Anti-Pattern Check Skill (SKILL.md)
Paste-ready Claude Code skill that audits any generation against the 10 most common AI design anti-patterns: luxury clichés, gradient overload, fake depth, random 3D heroes, motion spam, and more.
What this is
A ready-to-paste SKILL.md that turns the AI Anti-Patterns Gallery into a slash command. Invoke /anti-pattern-check after any generation and Claude reviews the output against the 10 most common AI design clichés.
How to install
Step 1: Create the skill folder
mkdir -p ~/.claude/skills/anti-pattern-check
Step 2: Paste the file below as SKILL.md
touch ~/.claude/skills/anti-pattern-check/SKILL.md
Step 3: Invoke it
After any generation, type:
/anti-pattern-check
Claude reads the skill, audits the most recent file, and either fixes violations inline or confirms the output passes.
The full SKILL.md
---
name: anti-pattern-check
description: Review the most recent generation for the 10 most common AI design anti-patterns.
Use after Claude produces any page, component, section, or layout. Flags violations,
proposes fixes using the project's CLAUDE.md rules, and applies them inline.
---
## What to check
Read the most recently generated or edited file. Review it against these 10 patterns:
### 1. Luxury by default
- Dark mode (near-black) + gold (#d4af37 family) + oversized serif headlines
- "Exclusive", "refined", "bespoke", "premium" copy without content backing
- All-caps small tracking decorative labels ("EST. 2024", "CURATED")
- Ornate borders, gold dividers, frosted-glass "luxe" cards
### 2. Gradient overload
- More than one gradient on the page
- Gradient used on buttons, cards, AND backgrounds
- Rainbow or multi-color gradients (3+ colors)
- Glowing effects on buttons or cards (box-shadow with colored blur)
### 3. Fake depth
- Default shadows on static cards (no elevation meaning)
- Multiple stacked shadow layers
- Glassmorphism, backdrop-filter: blur, frosted glass panels
- Floating decorative elements with no compositional reason
### 4. Random 3D hero
- Abstract floating 3D objects (spheres, orbs, cubes, blobs)
- Particle systems, mesh gradients as hero background
- "Cosmic" or nebula imagery unrelated to the product
- Any 3D asset that does not explain the product
### 5. Over-animated everything
- Scroll-triggered entrance animations on hero or body text
- Parallax backgrounds
- Scale-on-hover above 1.02
- Rotate, skew, or bounce on hover
- Animation durations above 600ms
- Multiple stagger sequences of more than 3 items
### 6. Spacing without rhythm
- Padding values not on the project's spacing scale
- Section gaps varying randomly
- Card padding inconsistent between cards of the same type
- Missing vertical rhythm between text blocks
### 7. Typography without hierarchy
- More than 3 font sizes per section
- More than 2 font weights across the entire page
- Headlines and subheadings too close in size
- Italic body text
- All-caps runs longer than 30 characters
- Decorative font-family mixed with primary type
### 8. Reference soup
- Multiple distinct visual references in one page (Apple + Stripe + Linear + "luxury")
- Style inconsistency between sections
- Mixed metaphors (editorial + cyberpunk + brutalist)
- No named dominant visual direction
### 9. No content logic
- Buzzword copy: "revolutionize", "seamless", "unlock", "empower", "supercharge",
"game-changer", "cutting-edge", "innovative", "world-class"
- Adjective-only feature cards ("Fast", "Smart", "Simple")
- Headlines that ask questions instead of making statements
- Sections that repeat the same claim with different phrasing
- "Trust us" proof (logos, testimonials) without specificity
### 10. Generic polish with no worldview
- Every section could belong to any SaaS website
- No element that is specifically non-default
- No opinionated layout, typography, or copy choice
- The page is competent and forgettable
## How to output findings
For each pattern found:
1. **VIOLATION**: [pattern name, 1-10]
2. **WHERE**: [file path + line number or component name]
3. **WHY IT WEAKENS**: [one sentence]
4. **FIX**: [specific change, referencing the project's CLAUDE.md rules if present]
5. **APPLIED**: [apply the fix inline if possible, otherwise note what needs manual review]
If no violations are found, report:
> Anti-pattern check clean. All 10 patterns avoided.
If 3+ violations are found, also print:
> Consider tightening CLAUDE.md. The output hit [N] anti-patterns. Add explicit
> rules for the most common ones to prevent them on future generations.
## Priority order
Fix in this order if multiple violations exist:
1. Luxury clichés and reference soup (affect overall identity)
2. Gradient overload and fake depth (affect visual noise)
3. Motion spam (affects trust and performance)
4. Typography and spacing (affect readability)
5. Content logic (affects communication)
6. Random 3D hero (remove last, usually a single-element fix)
## Never do
- Do not suggest "add more animation" as a fix.
- Do not suggest "use a gradient" as a fix.
- Do not recommend adding decorative elements to solve emptiness.
- If the fix would require generating a new asset, flag it for the designer instead
of inventing one.
How to customize
Add your own anti-patterns
The 10 patterns above are the most common. If your work has project-specific anti-patterns (e.g. “never use our secondary brand color above 10% of the page”), add an 11th section.
Tune the priority
The default priority fixes identity issues first. If you care more about motion, move that section up.
Link to project rules
If your project has a CLAUDE.md with a full motion or spacing spec, reference it explicitly in the skill:
For motion violations, reference the project's /CLAUDE.md#motion-rules
section for approved motion patterns.
Pairs with
- The AI Anti-Patterns Gallery guide (the full explanation)
- The Motion Decision Tree guide (for motion-specific audits)
- The Taste Skill Starter (your personal taste skill)
The guides alone saved me a full day of work every sprint.
- All guides, prompts, and templates
- Starter kits and templates
- New content every week
- Priority support