An agent skill that measures before it touches anything, fixes spacing, surfaces, icons, type and data in five passes, and stops when its own audit comes back clean.
npx skills add arjunkshah12345-hash/unslop
Spacing first, because it is structural and hard to see once colour changes. Data last, because it depends on every type and colour decision before it.
Guessed spacing is almost consistent. Nobody sees 3px; everybody feels it.
gap, not margins.When everything glows, nothing is important.
Emoji change per platform, ignore your colours and read as a toy.
currentColor.Slop copy performs excitement. Honest type says what the thing is.
A spinning five-slice donut looks like data and says nothing.
One read-only script finds the measurable tells: off-grid spacing, uneven siblings, emoji, glow, gradient text, hype copy, failing contrast, looping charts. The skill runs it before the first pass and after every pass.
Loads the page in headless Chromium and exits 1 while errors remain, so it can gate CI.
Evaluate audit.js with whatever browser tool the agent has. The result is the report.
Paste the file into the console for a table of every issue.
This site was built with the skill. Check it yourself.
$ node scripts/audit-url.mjs demo/?stage=1&hold 106 errors · 76 warnings · 175 visible elements icons/emoji (60) error div#brand > span.pro · ✨ in "PRO ✨" error div#n1 > span.ico > span.e · 🏠 in "🏠" spacing/off-grid (37) error div#navlabel · margin-top 31px, margin-bottom 10px error div#search · margin-top 22px surface/colored-glow (31) warn div#n1 · rgba(255, 70, 200, 0.7) blur 28px type/hype (5) warn p#sub · crushing in "Your deploys are absolutely CRUSHING…" spacing/uneven-siblings (3) error aside#side > nav · vertical gaps 11, 4, 17, 7, 13px $ node scripts/audit-url.mjs demo/?stage=7&hold 0 errors · 0 warnings · 0 info · 236 visible elements Clean. Nothing measurable left to unslop.
| Check | Severity | Catches |
|---|---|---|
spacing/off-grid | Error | Padding, margin or gap outside the 4pt scale |
spacing/uneven-siblings | Error | Repeated items sitting at different rendered gaps |
icons/emoji | Error | Emoji in interface text |
surface/gradient-text | Error | Gradient-filled text |
contrast/text | Error | Text under 4.5:1, or 3:1 for large text |
surface/colored-glow, surface/text-glow | Warning | Coloured shadows and glowing text |
surface/vivid-gradient, surface/too-many-accents | Warning | Saturated multi-hue gradients; more than three accent hues |
type/exclamation, type/hype | Warning | Exclamation marks and hype words in UI copy |
type/too-many-weights, type/too-many-sizes | Warning | More than three weights or eight sizes |
radius/no-scale | Warning | More than four corner radii |
motion/infinite | Warning | Animations that loop forever on content |
surface/glass, type/proportional-figures | Info | Backdrop blur; big numbers without tabular figures |
A plain folder: SKILL.md, the rulebook, the audit and four demos to use as film templates. It works with Claude Code and any agent that reads skills.
Installs into every agent it finds.
npx skills add arjunkshah12345-hash/unslop
Clone it and link the folder.
git clone https://github.com/arjunkshah12345-hash/unslop ln -s "$PWD/unslop/skills/unslop" ~/.claude/skills/unslop
Copy skills/unslop to wherever it loads skills, or point it at SKILL.md.
cp -r unslop/skills/unslop ~/.agents/skills/
Then ask: unslop this dashboard