remove-ai-slop · diff
git:20260616.a04dcb5 to git:20260618.1b313eb
173 added, 66 removed. Audit A to A.
---
name: remove-ai-slop
- description: Audit a codebase or document for AI slop tells in design and copy. Identifies generic patterns that make AI-built work look AI-built, then rewrites or refactors them out.
+ description: Audit a codebase or document for AI slop tells in design and copy. Identifies generic patterns that make AI-built work look AI-built, shows before/after for every fix, then applies only what you approve.
category: workflow
tags: [design, copy, audit, refactor, quality]
author: tushaarmehtaa
---
- AI tools converge on the same patterns. Same gradients, same words, same structure. The output is technically correct and visually unremarkable. This skill finds and removes those patterns.
+ AI tools converge on the same patterns. Same gradients, same words, same structure. This skill finds every instance, shows you exactly what changes, and waits for your go-ahead before touching anything.
- Run it on a landing page, a marketing site, a skill description, or any copy-heavy file.
+ ---
## Phase 1: Read what exists
```bash
- # Identify files to audit
- find . -name "*.tsx" -o -name "*.css" -o -name "*.md" | head -40
- cat globals.css 2>/dev/null
- cat page.tsx 2>/dev/null
+ # Find files to audit
+ find . -name "*.tsx" -o -name "*.css" -o -name "*.scss" -o -name "*.md" -o -name "*.html" | grep -v node_modules | grep -v .next | head -60
```
- Read the markup, styles, and copy in full. Do not skim.
+ Read the markup, styles, and copy in full. Do not skim. Open every file that could contain design or copy.
- ## Phase 2: Design audit
+ ---
- Work through this checklist. Flag every match.
+ ## Phase 2: Audit
+ Work through every checklist item. For each match, record:
+ - The file path and line number
+ - The exact offending code or text
+ - Which pattern it matches
+
### Layout tells
- [ ] Centered hero with a badge/pill/chip floating above the H1
- - [ ] Three-column feature card grid (`grid-cols-3`) with uniform rounded corners
+ - [ ] Three-column feature card grid (`grid-cols-3`) with uniform height and rounded corners
- [ ] Icon + heading + body card repeated 3–6 times
- - [ ] Numbered steps section (1. Install → 2. Configure → 3. Ship)
- - [ ] Stat banner (3 numbers in a row, no context)
+ - [ ] Numbered steps section (1. Install → 2. Configure → 3. Ship) or `01` `02` `03` section labels
+ - [ ] Stat banner (3 numbers in a row, no supporting context)
- [ ] Footer with 4 equal columns
+ - [ ] Bento grid with 5+ different accent colors
+ - [ ] Nested cards (card-inside-card creating visual noise)
+ - [ ] Cards with identical heights forced rather than flowing to content
+ - [ ] Hero section occupying full viewport with vague headline
### Color tells
- - [ ] Purple-to-blue or indigo-to-pink gradient in the hero or CTA
- - [ ] Two accent colors (e.g. cyan for info + amber for action)
- - [ ] Gradient text animation (`background-clip: text`)
- - [ ] Low-contrast body text on a dark background
- - [ ] Lavender/purple as the only accent
+ - [ ] Purple-to-blue or indigo-to-pink gradient in the hero, CTA, or background
+ - [ ] "VibeCode purple" — lavender/violet as the sole brand accent
+ - [ ] Warm amber-and-cream used as "tasteful" default without brand justification
+ - [ ] Two competing accent colors (e.g. cyan for info + amber for action)
+ - [ ] Gradient text (`background-clip: text`) on hero headings
+ - [ ] Low-contrast gray body text on dark backgrounds
+ - [ ] Safe emerald green as default "clean" accent
### Effect tells
- [ ] Grain texture overlay (`::before` or `body::after`)
- [ ] Stage-light / ambient spotlight overlay (radial gradient on body)
- - [ ] Shimmer pseudo-element on cards or panels (`::after` sliding highlight)
- - [ ] Glow on borders, rules, or headings (`box-shadow`, `text-shadow`)
- - [ ] Gradient border animation
- - [ ] Fake blinking cursor (`cursor-blink` keyframe)
+ - [ ] Shimmer pseudo-element on cards (`::after` sliding highlight)
+ - [ ] Glow on borders, rules, or headings (`box-shadow`, `text-shadow` as decoration)
+ - [ ] Animated gradient border
+ - [ ] Fake blinking cursor keyframe
+ - [ ] Glassmorphism — `backdrop-filter: blur` on cards used decoratively
+ - [ ] Repeating-gradient stripes as surface decoration
+ - [ ] Dark glowing gradients behind hero cards or CTA buttons
### Typography tells
+ - [ ] Inter, Geist, Space Grotesk, or Instrument Serif used as the only font (no intentional pairing choice)
+ - [ ] Space Grotesk + Instrument Serif combo specifically
+ - [ ] Monospace font on body text (not just code blocks)
+ - [ ] Oversized hero headline consuming full viewport width
+ - [ ] Italic serif on a single hero word as "accent"
- [ ] `> ` prefix on headings (terminal-line aesthetic)
- [ ] `MANUAL PAGE` or similar meta-label above the heading
- - [ ] Serif italics used as accent words inline
- - [ ] Monospace font on body text (not just code)
- - [ ] Space Grotesk + Instrument Serif combo
- [ ] All-caps section labels on every section
+ - [ ] Uppercase eyebrow label with decorative dots or trailing lines
+ - [ ] Flat type hierarchy — font sizes too close together, no clear jump
### Component tells
- - [ ] Colored left border on every card (left-border-as-accent pattern)
- - [ ] Emoji icons in sidebar or feature list
- - [ ] `rounded-2xl` applied uniformly to everything
+ - [ ] Colored left border on every card (left-border-as-accent)
+ - [ ] Colored top border on cards
+ - [ ] `rounded-2xl` (24px+) applied uniformly to everything
+ - [ ] `rounded-full` on non-pill elements
- [ ] 8px uniform card shadow on every surface
+ - [ ] Emoji icons in sidebar navigation or feature lists
+ - [ ] shadcn/ui defaults leaking through without customization (default slate colors, default ring styles)
+ - [ ] Icon tile (rounded-square container) above every feature card heading
- ## Phase 3: Copy audit
+ ### Animation/motion tells
+ - [ ] Bounce or elastic easing on UI elements (`cubic-bezier` with overshoot)
+ - [ ] Staggered fade-in entrance on every section (generic `opacity: 0 → 1` with delay)
+ - [ ] Load animations on elements that don't need them
+ - [ ] Image hover scale or rotate transform
+ - [ ] Animating `width`, `height`, `padding`, or `margin` (causes layout thrash)
+ - [ ] No `prefers-reduced-motion` fallback anywhere
- ### Banned words
- Remove on sight. They add zero information:
+ ### Imagery tells
+ - [ ] Abstract 3D blobs or orbs floating in hero section
+ - [ ] Brain/neural network as hero illustration (AI product cliché)
+ - [ ] Stock photos of diverse teams looking at laptops in well-lit offices
+ - [ ] AI illustrations that are "slightly too smooth, slightly too symmetrical"
- **Empty adjectives:** seamless, robust, comprehensive, powerful, cutting-edge, next-generation, world-class, best-in-class, state-of-the-art, groundbreaking, innovative, revolutionary
+ ---
- **AI vocab spikes:** delve, leverage, elevate, intricate, meticulously, synergy, empower, tapestry, testament, beacon, realm, symphony, vibrant, nestled, renowned, showcasing, underscore
+ ### Copy tells
- **Marketing verbs:** unlock, unleash, supercharge, exceed, game-changer, boasts, committed to
+ **Banned words** — remove on sight:
- ### Banned phrases
- - "In today's landscape" / "In today's fast-paced world"
+ *Empty adjectives:* seamless, robust, comprehensive, powerful, cutting-edge, next-generation, world-class, best-in-class, state-of-the-art, groundbreaking, innovative, revolutionary, stellar, formidable, compelling, engaging, captivating, marvelous, paramount, crucial, fantastic
+
+ *AI vocab spikes:* delve, leverage, elevate, intricate, meticulously, synergy, empower, tapestry, testament, beacon, realm, symphony, vibrant, nestled, renowned, showcasing, underscore, hone, unveil, unravel, harness, foster, navigate, tackle, catapult, supercharge, unleash, unlock, craft (used as vague verb)
+
+ *Marketing verbs:* exceed, game-changer, boasts, committed to, moves the needle, secret sauce, magic (used in product copy)
+
+ **Banned phrases** — rewrite or cut:
+ - "In today's landscape" / "In today's fast-paced world" / "In a world where"
- "At the end of the day"
- "It's worth noting that" / "Worth mentioning"
- "This doesn't just X — it also Y" (defensive framing)
+ - "It's not about X, it's about Y"
+ - "No X. No Y. Just Z." (triple-structure marketing cadence)
+ - "Chaos into clarity" or any "X into Y" transformation cliché
- "The part everyone gets wrong" / "What most people miss"
- "Built from production usage" / "Battle-tested"
- - Any sentence that starts with "This skill reads your..."
+ - "Let's dive in" / "Ever wondered" / "Here's the kicker"
+ - "Build the future of work" / "Your all-in-one platform" / "Scale without limits"
+ - "Drive impact" / "Unlock value" / "Elevate your [noun]"
+ - Any sentence starting with "This skill reads your..." / "This tool analyzes your..."
- "However," / "Furthermore," / "Additionally," / "That being said,"
- - Summary paragraphs that restate what the previous paragraph just said
+ - Summary paragraphs that restate what was just said
+ - Two-word phrases repeated 2–3 times consecutively for rhythm
- ### Structural slop
+ **Structural slop:**
- [ ] Opener that narrates what's about to be said instead of saying it
- - [ ] Hedge words: arguably, fairly, might want to consider, could potentially
- - [ ] Em dashes every 50–80 words (more than 2 in a screen of text = AI-paced)
- - [ ] Sentences that back away from their own point ("it's arguably one of the better...")
- - [ ] Description that says what a feature IS without saying what it DOES
+ - [ ] Hedge words: arguably, fairly, might want to consider, could potentially, may help you
+ - [ ] Em dashes used more than twice per screen of text
+ - [ ] Sentences that back away from their own claim ("it's arguably one of the better...")
+ - [ ] Feature described by what it IS, not what it DOES
+ - [ ] Any headline vague enough to describe 3+ different products
- ## Phase 4: Fix
+ ---
- For each flagged item, apply the simplest fix that removes the pattern.
+ ## Phase 3: Report findings
- ### Design fixes
- - Replace dual accent with one. Pick the one that appears in your most important CTA.
+ Stop. Do not make any changes yet.
+
+ Present a numbered list of every issue found:
+
+ ```
+ Found X issues:
+
+ DESIGN
+ 1. [file:line] — [pattern name]: [exact code snippet]
+ 2. [file:line] — [pattern name]: [exact code snippet]
+ ...
+
+ COPY
+ 7. [file:line] — [pattern name]: "[exact offending text]"
+ 8. [file:line] — [pattern name]: "[exact offending text]"
+ ...
+ ```
+
+ Be specific. Show the actual code or text, not a description of it.
+
+ ---
+
+ ## Phase 4: Before/after preview
+
+ For each issue, show exactly what would change:
+
+ ```
+ Fix 1 — globals.css:14
+ BEFORE: background: linear-gradient(135deg, #6366f1, #8b5cf6);
+ AFTER: background: #1a1a1a;
+ Reason: purple gradient is the single most recognizable AI design tell
+
+ Fix 7 — hero.tsx:23
+ BEFORE: "Seamlessly integrate your workflow and unlock unprecedented productivity"
+ AFTER: "Connect [tool A] to [tool B] in one step"
+ Reason: "seamlessly" + "unlock" + "unprecedented" all on banned list; replaced with specific claim
+ ```
+
+ Work through every fix. Show all of them before asking for confirmation.
+
+ ---
+
+ ## Phase 5: Confirm
+
+ After showing all before/afters, ask:
+
+ > **Ready to apply [X] fixes. Any to skip?**
+ > Reply with fix numbers to skip (e.g. "skip 3, 7") or just say "go" to apply all.
+
+ Wait for the response. Do not apply anything until you have it.
+
+ ---
+
+ ## Phase 6: Apply fixes
+
+ Apply only the approved fixes. Make changes precisely — do not modify surrounding code or introduce new patterns.
+
+ For design fixes:
+ - Replace dual accent with one. Keep the one used in the most important CTA.
- Replace gradient hero background with flat dark or single color.
- - Remove all decorative `::before` / `::after` overlays. If you can delete the CSS rule and nothing breaks visually, delete it.
- - Replace grain/stage-light with nothing. Empty space reads as confidence.
- - Replace `rounded-2xl` uniformity with intentional radius: tight (3–4px) on small elements, loose (8px) on panels, zero on large containers.
- - Replace three-column grid with a simple list or two-column layout if content doesn't actually need three columns.
+ - Remove all decorative `::before` / `::after` overlays. If deleting the CSS rule leaves nothing broken, delete it.
+ - Replace `rounded-2xl` uniformity with intentional radius: 3–4px on small elements, 8px on panels, 0 on large containers.
+ - Replace three-column grid with a list or two-column layout if the content doesn't actually need three columns.
+ - Remove bounce/elastic easing. Replace with `ease-out` or `cubic-bezier(0.16, 1, 0.3, 1)`.
+ - Remove staggered fade-ins. If animation is needed, use one — not one per element.
- ### Copy fixes
- - If the opener narrates → delete the opener and start with the second sentence.
- - If the sentence hedges → remove the hedge word. If the claim breaks without it, make the claim specific enough to stand.
- - If an adjective is empty → replace with a specific measurement or delete it. "Robust error handling" → "catches and surfaces every Stripe webhook failure."
- - If a phrase is on the banned list → rewrite or cut. Usually the sentence improves when the phrase is cut entirely.
- - If the section ends with a summary → delete the summary. Readers can read.
+ For copy fixes:
+ - If the opener narrates → delete it, start with the second sentence.
+ - If the sentence hedges → remove the hedge. If the claim breaks without it, make it specific enough to stand alone.
+ - If an adjective is empty → replace with a measurement or delete it. "Robust error handling" → "catches and surfaces every Stripe webhook failure."
+ - If a phrase is banned → cut it. The sentence almost always improves.
+ - If the section ends with a summary → delete the summary.
- ## Phase 5: Verify
+ ---
+ ## Phase 7: Verify
+
After changes:
- 1. Read the copy out loud. If you'd feel embarrassed saying it to someone → it's still AI slop.
- 2. Count accent colors in the CSS. More than one needs a reason.
+ 1. Read copy out loud. If you'd feel embarrassed saying it to someone → still slop.
+ 2. Count accent colors in CSS. More than one needs a reason.
3. Count decorative pseudo-elements. Each one needs a reason.
- 4. Search for banned words: `grep -r "seamless\|robust\|leverage\|delve\|tapestry" .`
- 5. Read the hero copy. If it could describe three different products → it's not specific enough.
+ 4. Run: `grep -r "seamless\|robust\|leverage\|delve\|tapestry\|supercharge\|unleash\|harness\|elevate\|paramount" .`
+ 5. Read the hero. If it could describe three different products → not specific enough.
+ 6. Check motion: `grep -r "cubic-bezier\|bounce\|elastic\|stagger" .`
- ## What "clean" looks like
+ ---
- Copy is clean when:
+ ## What clean looks like
+
+ **Copy is clean when:**
- Each sentence makes exactly one claim
- Every adjective could be replaced by a measurement
- The opener is the thing, not a description of the thing
- - A reader can't tell whether a human or machine wrote it (the goal is indistinguishability, not "sounds human")
+ - A reader can't tell whether a human or machine wrote it
- Design is clean when:
+ **Design is clean when:**
- One accent color, used sparingly
- No CSS rule exists purely for decoration
- Removing any visual layer doesn't reduce information
- The layout follows content structure, not a template
+ - No component pattern requires explanation to justify its existence