anti-slop-design v1.0.0
skills.sh GitHub

Human-grade UI engineering
for AI coding agents.

A single-file skill that stops AI agents from generating blurry purple gradients, emoji-laden buttons, and 3-card marketing grids. Enforces curated token archetypes, tactile micro-interactions, and a 7-axis quality gate.

$ npx skills add wwewtech/anti-slop-design
Install for:
URL SHORTENER ANALYTICS // TELEMETRY LENS
✕ Screaming Eyebrow
DASHBOARD // REAL-TIME METRICS
✕ Single-Word Italic Gradient
Link Telemetry & Traffic Radar
✕ Cookie-Cutter 3-Card Grid
🚀
Total Clicks
28,491
🔥
Uptime
+99.9% Uptime
💡
Total Links
50k+ Active
✕ Raw Emojis Inside Action Buttons
INPUT: VIBE-CODED AI SLOP (REJECTED)
01 - <div className="min-h-screen bg-slate-900
02 - bg-[radial-gradient(ellipse_at_top,_#312e81,_#0f172a)]
03 - flex flex-col items-center p-8">
04 - <span className="tracking-widest uppercase">DASHBOARD</span>
05 - <h1>Live <em className="text-gradient">Radar</em></h1>
06 - <div className="grid grid-cols-3 gap-6">
07 - <Card><Emoji>🚀</Emoji><Val>+99.9% Faster</Val></Card>
08 - </div>
09 - </div>
OUTPUT: HUMAN-GRADE REFACTOR (PASSED)
01 + <main className="min-h-screen bg-[#09090b] text-zinc-100 p-8">
02 + <header className="flex items-center justify-between pb-4
03 + border-b border-white/10">
04 + <h1 className="text-base font-semibold">Link Telemetry</h1>
05 + <UnifiedControlBar dateRange="30d" />
06 + </header>
07 + <TelemetrySummary singleSource={true} sparkline={true} />
08 + <StructuredTable activeScale={0.97} focusRing={true} />
09 + </main>

The 4 Production Design Archetypes

DYNAMIC TOKEN ENGINE
Deploy Pipeline #84
Production Branch · Commit 4f1a2
BUILD LATENCY STABLE (1.2s)
1,420 ms
Quiet Luxury SaaS archetype. Electric cobalt accents, deep obsidian canvas, and refined spacing geometry.
SEMANTIC CSS TOKENS 
:root {
  --bg-canvas: #09090b;
  --bg-surface: #121215;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --accent-primary: #3b82f6; /* Electric Cobalt */
  --text-primary: #f4f4f5;
  --radius-sm: 6px;
  --radius-md: 10px;
}

The 8-State Interactive Feedback Sandbox

EMIL KOWALSKI DECISION RULES
1. Default State
2. Focus-Visible State
3. Active State (0.97)
4. Loading State
5. Success State
6. Error State (Shake)
7. Disabled State
8. Live Cycle Sandbox
ENFORCED BY SKILL: Actions 100+ times/day = 0ms (Instant). Standard micro-interactions = 120ms–180ms ease-out (cubic-bezier(0.23, 1, 0.32, 1)). Tactile press = transform: scale(0.97). Never use ease-in for UI.

Live Anti-Slop Code Scanner & Auto-Fixer

CLIENT-SIDE LINTER
PRESET TEST CASES:

The 7-Axis Pre-Emit Quality Gate

MANDATORY PASS THRESHOLD ≥ 28/35
1. Anti-Slop Purity
Zero purple gradients, zero emojis as icons, zero vanity stats
5
2. UX Speed & 1-to-3 Rule
1 primary action, max 3 secondary, unified page-level filters
5
3. Typographic Discipline
Max 2 font families, tabular numbers on metrics, ≤ 75ch body
5
4. Spacing & Geometric Math
Strict 4px/8pt grid, nested radius math: R_inner = max(0, R_outer - padding)
5
5. Micro-Interactions & Motion
Snappy transitions < 200ms, tactile active scale(0.97), no ease-in
5
6. Accessibility & Keyboard Flow
WCAG 2.1 AA visible focus rings, no naked outline: none, semantic tags
5
7. Mobile & Responsive Linearity
Clean vertical stacking, zero horizontal overflow, ≥ 44px touch targets
5
AGGREGATE AUDIT SCORE
35
OUT OF 35 MAXIMUM
PASSED: PRODUCTION READY
All 7 axes exceed the mandatory ≥ 4/5 threshold.

The 12 Banned AI Slop Anti-Patterns

ENFORCED IN AGENT LOOP
Anti-Pattern Vibe-Coded AI Manifestation Mandatory Production Replacement
The "AI Dark Mode" Blob radial-gradient from indigo-600/purple-900 blurred in corners Deep monochrome obsidian surfaces (#09090b) with 1px hairline border
Monotonous Slate/Indigo Generic bg-slate-900 text-slate-400 bg-indigo-600 boilerplates Curated semantic tokens (OKLCH/HSL) with distinct brand personality
Cookie-Cutter 3-Card Grid Three identical rectangular cards with glowing hover borders Dynamic asymmetric bento, split-panels, or sequential workflow rows
Raw Emojis as UI Icons Plastering raw emojis (🚀, 🔥, 💡) inside buttons and cards Crisp single-weight vector SVG icons (Phosphor, Lucide, Heroicons)
Fabricated Vanity Stats Filler cards: "+99.9% Uptime", "10x Faster", "50k+ Users" Real domain telemetry or remove the card entirely. Zero vanity metrics
Screaming Eyebrow Labels Tracked-out uppercase labels above every heading: OVERVIEW, FEATURES Sentence-case hierarchy, subtle metadata tags, or omit if self-explanatory
Single-Word Italic/Color Accents Headlines with one word italicized in glowing gradient text Uniform, confident typographic weight. Let the whole statement carry authority
Redundant Metric Duplication Repeating total clicks/revenue in header, sidebar, and inside multiple cards Single source of metric truth. One primary KPI summary per viewport
Card-Level Filter Pollution Duplicating date pickers or dropdowns inside individual cards Unified page-level control bar that synchronizes all views
Vanity Space-Wasters Giant 3D globe or map taking 60% viewport with zero deltas Compact horizontal bar comparisons, sparklines, or tabular comparison rows
Missing Interactive States Buttons with only hover effects; lacking :focus-visible, active, loading 8-State interactive feedback system with tactile active scale(0.97)
Broken Placeholders & Links via.placeholder.com, broken Unsplash URLs, or blurry stock images High-fidelity inline SVGs, semantic CSS abstract shapes, or verified local assets
Command copied to clipboard