| name | ui-slop-guard |
| description | Audit UI code for AI slop patterns — generic color palettes, missing interaction states, cookie-cutter gradients, and template-clone layouts. Returns SLOP/RISK/CLEAN verdicts with specific remediation. |
| version | 0.1.0 |
| level | 2 |
| triggers | ["ui slop guard","slop check","check for ai slop","audit this UI","/ui-slop-guard"] |
| context_files | ["context/project.md"] |
| steps | [{"name":"Color Audit","description":"Scan for AI slop hex values and unanchored gradients. Flag any color not from the brand token set."},{"name":"Interaction Audit","description":"Verify every interactive element has hover, focus, active, and disabled states."},{"name":"Typography Audit","description":"Check for Inter/Roboto defaults, missing type scale, and unvaried font weights."},{"name":"Layout Audit","description":"Identify hero-cta-features-pricing-footer clone patterns and surface-level \"premium\" signals."},{"name":"Animation Audit","description":"Detect gratuitous or performance-unsafe animations. Flag missing prefers-reduced-motion."},{"name":"Verdict","description":"Issue SLOP/RISK/CLEAN per category with specific line-level remediation."}] |
UI Slop Guard Skill
Audit code for the patterns that make AI-generated UI look AI-generated. The output is a category-by-category verdict, not a general impression.
What Claude Gets Wrong Without This Skill
Claude produces statistically average output. It has trained on thousands of SaaS landing pages, and without contrary instruction, it reproduces the center of that distribution. The resulting UI is not wrong — it is indistinguishable. Same violet gradient, same Inter font at 16px, same hero-features-pricing-CTA structure, same cards with box-shadow: 0 4px 6px rgba(0,0,0,0.1).
The second failure: slop often hides in omission. The button has a primary style. It has no hover state. It has no focus ring. It has no disabled treatment. It looks complete until someone tabs to it or disables it — and then it falls apart. This skill makes omissions visible.
AI Slop Signature Patterns
These are the specific patterns that tag output as AI-generated. Any match is a flag.
Color Slop
Hard block — the AI violet palette:
#7c3aed (violet-700)#8b5cf6 (violet-500)#6366f1 (indigo-500)#a855f7 (purple-500)#ec4899 (pink-500)
Any of these in a project without an explicit brand reason is AI slop. These are the default colors of models that learned from a corpus dominated by AI startup landing pages.
Risk flags — unanchored gradients:
linear-gradient(135deg, ...) — the default angle. Real gradient design specifies intent, not default.linear-gradient(to right, #[purple], #[blue]) — the AI purple-to-blue hero background.- Any gradient that is not documented in the design brief.
Risk flags — shadow patterns:
box-shadow: 0 4px 6px rgba(0,0,0,0.1) — Tailwind's default shadow. Present everywhere. Signals no design intent.- Identical shadow values across all card components.
Interaction State Slop
Missing states are invisible until they are not:
| Element | Required States |
|---|
| Button (primary) | default, hover, active, focus, disabled, loading |
| Button (secondary/ghost) | default, hover, active, focus, disabled |
