| name | kill-ai-slop |
| description | Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project. Use when the user asks to "kill AI slop", "de-slop", "remove the AI look", "make this not look AI-generated", or clean up a landing page / UI / docs that feels templated. Detects and fixes the catalogue of tells: indigo→violet gradients, gradient-clip headlines, the default semantic palette, one-hue status boxes, atmospheric gradients, serif-italic emphasis, highlighted keywords, AI copywriting voice ("not just X — it's Y"), emoji everywhere, glowing status dots, colored-left-border callouts, pastel icon tiles, glassmorphism, over-rounding, oversized shadows, borders that die at corners, badge & pill spam, AI-drawn SVG icons, kickers over every heading, flat type hierarchies, invented stat rows (10k+ / 99.9% / 24/7), 01/02/03 section markers, cards nested in cards, the default Inter/Space Grotesk look, and more. Works on HTML/CSS, React/Vue/Svelte/Astro, Tailwind, PHP, and Markdown copy. |
Kill AI Slop
AI slop is ugly in a specific way: it piles on every possible style and
detail without settling on a focus. A gradient, a glow, a mascot, emoji, a wall
of glowing cards, every default switched on at once, until every product looks
like the same garish template. It reads as "designed" in a thumbnail and falls
apart the moment anyone looks. Your job is to strip it back to something a
person would actually choose.
The principles, held on every fix you make:
- Decide before you decorate. Every visual choice must be explainable.
- One accent, one voice.
- Hierarchy from scale and space. Coloring words or swapping fonts is a shortcut.
- Subtract first. The first move toward not-ugly is removing things.
- Specific beats punchy in copy.
- Decoration must mean something — icons, badges, callouts are signals.
Workflow
Follow these steps in order. Do not mass-edit before the user has seen the report.
1. Scope
Confirm what to scan. Default to the app/site source (skip node_modules,
dist, build, .git, vendor, lockfiles, minified files). Ask if the
project mixes several apps.
2. Scan
Run the bundled scanner, which greps the codebase for the code-level signals of
each tell and prints grouped file:line hits:
node scripts/scan.mjs <root> # human-readable report
node scripts/scan.mjs <root> --json # machine-readable, for triage
It is pure Node (no dependencies) and never edits files. Use its output as a
starting map, not gospel — confirm each hit by reading the code.
To narrow a scan: --only=01,06 / --skip=19 filter by tell id, and
--exclude=legacy drops paths (substring match on the project-relative path).
--rules=extra.mjs loads additional project- or language-specific tells
(scripts/rules.ru.mjs is a shipped Russian-copy example and the template for
your own). Hits the user has confirmed as intentional can be pinned in source
with deslop-ignore, deslop-ignore-next-line 06, or deslop-ignore-file
comments — prefer the id-scoped forms so new tells still surface.
3. Triage
For every hit, open the file and decide slop vs. intentional. This is the
step that separates this skill from a lint rule. A gradient, a serif, or an
emoji can be a real, defended choice. Keep anything the user clearly chose
(brand tokens, a logo, a deliberate illustration). Flag only defaults.
Read references/taxonomy.md for what each tell is and why it reads as
machine-made, and references/detection.md for the exact patterns and their
common false positives.
4. Report
Before changing anything, give the user a grouped summary: each tell, the
file:line hits you confirmed, one sentence on why, and the proposed fix.
Mirror the format:
slop src/Hero.tsx:12 indigo→violet gradient → one solid accent
slop src/Hero.tsx:31 gradient-clip headline → solid ink, scale up
slop src/Note.tsx:8 border-l-4 callout ×3 → 1 aside, rest is body
slop copy.md:1 "not just X — it's Y" → say the specific thing
→ 4 groups, 11 hits.
Then ask which groups to apply, or whether to proceed on all.
5. Fix
Apply the minimal change that removes the tell while preserving intent and
function. Use references/fixes.md for the before→after pattern per tell.
- Prefer editing shared tokens/components over touching every call site.
- Never invent new brand colors; if a palette must change, propose neutrals +
the project's existing accent and let the user confirm.
- Keep copy meaning; make it specific, don't just delete it.
- Re-run the scanner after fixing to confirm the count dropped, and note any
hits you intentionally left (with the reason).
Guardrails
- Respect authorship. Treat unfamiliar files and deliberate flourishes as
someone's choice. When unsure whether something is slop, ask — don't strip it.
- Small, reviewable diffs. Never reformat unrelated code. Never run
git add -A; stage explicit files only, and leave others' work-in-progress
alone.
- No new dependencies to do this work.
- Verify visually when possible. If a dev server exists, look at the before
and after; a passing scan is not the same as a better page.
References
references/taxonomy.md — the 33 tells: what each is, why it's slop, the fix.references/detection.md — concrete ripgrep/regex patterns + false positives.references/fixes.md — before→after remediation patterns.scripts/scan.mjs — the dependency-free scanner.
