Kill AI slop skill
Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project.
by yetone·Apache-2.0 license·★ 1,324 Stars on the repo·GitHub ↗
npx degit yetone/kill-ai-slop/skill#main ~/.claude/skills/skill-34Checked ·commit main
Files of Kill AI slop
Show the full text122 lines
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 35 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.
| 1 | |
| 2 | name kill-ai-slop |
| 3 | description >- |
| 4 | Find and remove AI slop — the generic, machine-default visual and copy tics of |
| 5 | vibe-coded products — from a web project. Use when the user asks to "kill AI |
| 6 | slop", "de-slop", "remove the AI look", "make this not look AI-generated", or |
| 7 | clean up a landing page / UI / docs that feels templated. Detects and fixes |
| 8 | the catalogue of tells: indigo→violet gradients, gradient-clip headlines, the |
| 9 | default semantic palette, one-hue status boxes, atmospheric gradients, |
| 10 | serif-italic emphasis, highlighted keywords, AI copywriting voice ("not just |
| 11 | X — it's Y"), emoji everywhere, glowing status dots, wobbling spinners, |
| 12 | colored-left-border |
| 13 | callouts, pastel icon tiles, glassmorphism, over-rounding, oversized shadows, |
| 14 | borders that die at corners, badge & pill spam, AI-drawn SVG icons, kickers |
| 15 | over every heading, flat type |
| 16 | hierarchies, invented stat rows, 01/02/03 section |
| 17 | markers, cards nested in cards, the default Inter/Space Grotesk look, and |
| 18 | more. Works on HTML/CSS, React/Vue/Svelte/Astro, Tailwind, PHP, and Markdown |
| 19 | copy. |
| 20 | |
| 21 | |
| 22 | # Kill AI Slop |
| 23 | |
| 24 | AI slop is **ugly** in a specific way: it piles on every possible style and |
| 25 | detail without settling on a focus. A gradient, a glow, a mascot, emoji, a wall |
| 26 | of glowing cards, every default switched on at once, until every product looks |
| 27 | like the same garish template. It reads as "designed" in a thumbnail and falls |
| 28 | apart the moment anyone looks. Your job is to strip it back to something a |
| 29 | person would actually choose. |
| 30 | |
| 31 | The principles, held on every fix you make: |
| 32 | |
| 33 | **Decide before you decorate.** Every visual choice must be explainable. |
| 34 | **One accent, one voice.** |
| 35 | **Hierarchy from scale and space.** Coloring words or swapping fonts is a shortcut. |
| 36 | **Subtract first.** The first move toward not-ugly is removing things. |
| 37 | **Specific beats punchy** in copy. |
| 38 | **Decoration must mean something** — icons, badges, callouts are signals. |
| 39 | |
| 40 | ## Workflow |
| 41 | |
| 42 | Follow these steps in order. Do not mass-edit before the user has seen the report. |
| 43 | |
| 44 | ### 1. Scope |
| 45 | Confirm what to scan. Default to the app/site source (skip `node_modules`, |
| 46 | `dist`, `build`, `.git`, `vendor`, lockfiles, minified files). Ask if the |
| 47 | project mixes several apps. |
| 48 | |
| 49 | ### 2. Scan |
| 50 | Run the bundled scanner, which greps the codebase for the code-level signals of |
| 51 | each tell and prints grouped `file:line` hits: |
| 52 | |
| 53 | |
| 54 | node scripts/scan.mjs <root> # human-readable report |
| 55 | node scripts/scan.mjs <root> --json # machine-readable, for triage |
| 56 | |
| 57 | |
| 58 | It is pure Node (no dependencies) and never edits files. Use its output as a |
| 59 | starting map, not gospel — confirm each hit by reading the code. |
| 60 | |
| 61 | To narrow a scan: `--only=01,06` / `--skip=19` filter by tell id, and |
| 62 | `--exclude=legacy` drops paths (substring match on the project-relative path). |
| 63 | `--rules=extra.mjs` loads additional project- or language-specific tells |
| 64 | (`scripts/rules.ru.mjs` is a shipped Russian-copy example and the template for |
| 65 | your own). Hits the user has confirmed as intentional can be pinned in source |
| 66 | with `deslop-ignore`, `deslop-ignore-next-line 06`, or `deslop-ignore-file` |
| 67 | comments — prefer the id-scoped forms so new tells still surface. |
| 68 | |
| 69 | ### 3. Triage |
| 70 | For every hit, open the file and decide **slop vs. intentional**. This is the |
| 71 | step that separates this skill from a lint rule. A gradient, a serif, or an |
| 72 | emoji can be a real, defended choice. Keep anything the user clearly chose |
| 73 | (brand tokens, a logo, a deliberate illustration). Flag only defaults. |
| 74 | |
| 75 | Read `references/taxonomy.md` for what each tell is and why it reads as |
| 76 | machine-made, and `references/detection.md` for the exact patterns and their |
| 77 | common false positives. |
| 78 | |
| 79 | ### 4. Report |
| 80 | Before changing anything, give the user a grouped summary: each tell, the |
| 81 | `file:line` hits you confirmed, one sentence on why, and the proposed fix. |
| 82 | Mirror the format: |
| 83 | |
| 84 | |
| 85 | slop src/Hero.tsx:12 indigo→violet gradient → one solid accent |
| 86 | slop src/Hero.tsx:31 gradient-clip headline → solid ink, scale up |
| 87 | slop src/Note.tsx:8 border-l-4 callout ×3 → 1 aside, rest is body |
| 88 | slop copy.md:1 "not just X — it's Y" → say the specific thing |
| 89 | → 4 groups, 11 hits. |
| 90 | |
| 91 | |
| 92 | Then ask which groups to apply, or whether to proceed on all. |
| 93 | |
| 94 | ### 5. Fix |
| 95 | Apply the minimal change that removes the tell while preserving intent and |
| 96 | function. Use `references/fixes.md` for the before→after pattern per tell. |
| 97 | |
| 98 | Prefer editing shared tokens/components over touching every call site. |
| 99 | Never invent new brand colors; if a palette must change, propose neutrals + |
| 100 | the project's existing accent and let the user confirm. |
| 101 | Keep copy meaning; make it specific, don't just delete it. |
| 102 | Re-run the scanner after fixing to confirm the count dropped, and note any |
| 103 | hits you intentionally left (with the reason). |
| 104 | |
| 105 | ## Guardrails |
| 106 | |
| 107 | **Respect authorship.** Treat unfamiliar files and deliberate flourishes as |
| 108 | someone's choice. When unsure whether something is slop, ask — don't strip it. |
| 109 | **Small, reviewable diffs.** Never reformat unrelated code. Never run |
| 110 | `git add -A`; stage explicit files only, and leave others' work-in-progress |
| 111 | alone. |
| 112 | **No new dependencies** to do this work. |
| 113 | **Verify visually when possible.** If a dev server exists, look at the before |
| 114 | and after; a passing scan is not the same as a better page. |
| 115 | |
| 116 | ## References |
| 117 | |
| 118 | `references/taxonomy.md` — the 35 tells: what each is, why it's slop, the fix. |
| 119 | `references/detection.md` — concrete ripgrep/regex patterns + false positives. |
| 120 | `references/fixes.md` — before→after remediation patterns. |
| 121 | `scripts/scan.mjs` — the dependency-free scanner. |
| 122 |
Discussion
Alternatives
Browse more free Claude skills or everything in Content creator.