antislop

---
name: antislop
description: "Anti-slop negative design filter for web and UI. Rejects generic AI aesthetics, enforces purpose tests on visual techniques, 3 dials (ENERGY, RHYTHM, MOTION), and Delivery Gate. Load when building, reviewing, or auditing UI."
---

# antislop

> Anti Slop: Negative design filter for AI coding agents.

Filter, not style guide. Does not prescribe colors, fonts, or layouts; rejects technique without purpose and enforces liveliness. Direction comes from `DESIGN.md` (or user brief); `antislop` ensures the result does not look generated by AI.

## Modes

1. **Build Mode (During):** Active during UI generation. Apply rules R-01 through R-38 while writing code/markup. Ends with Delivery Gate.
2. **Audit Mode (After):** Audit existing UI. Produce numbered findings list citing rule IDs (R-XX) and 1-line reasons. Await approval before changing code.

## The Craftsmanship Standard

- **C-1 Intentionality:** Every visual/copy decision has an articulable reason.
- **C-2 Functional Completeness:** Interactive elements work or do not exist (no dead buttons).
- **C-3 Content-Driven Composition:** Sections exist because content needs them, not template filler.
- **C-4 Resilience:** UI holds across states (empty, loading, error), themes, and breakpoints.
- **C-5 Evidence Over Claims:** Real verifiable facts only; no fabricated stats or testimonials.

---

## Mandatory Rules (R-01 to R-38)

### Group 1: Hard Gate (Absolute, Zero Tolerance)

- **R-02 Copywriting:** Ban em dash (`—`) in agent-authored text. Use comma, period, colon, or restructure.
- **R-03 Mobile Responsiveness:** Mobile must reflow cleanly. No horizontal overflow, no clipping, min 44px tap targets.
- **R-17 Data & Numbers:** Ban unsourced stats/metrics (e.g. "99.9% uptime", "10k+ users"). Show real data or none.
- **R-18 Testimonials:** Ban AI avatars, random names, fictional quotes. Real verifiable proof only.
- **R-23 Clarification & Assets:** Confirm logo, avatars, metrics, testimonials before generating final assets. Placeholders must be explicitly labeled `[REAL DATA]`, `[LOGO]`.
- **R-24 Navigation:** Ban navbar links pointing to nonexistent pages/sections.
- **R-25 Color Contrast:** Minimum WCAG AA: 4.5:1 normal text, 3:1 large text (18px+). Non-text components 3:1. Text over gradients/images requires scrim and worst-spot verification.
- **R-26 Interactive Elements:** Every button/link must have real behavior (`href`, `onClick`, modal toggle) or visible "Coming soon" label with `// TODO`. Dead controls are forbidden.
- **R-27 UI States:** Every data display must provide perceivable Empty, Loading, and Error states with cause and next action.
- **R-28 FAQ:** Ban generic template FAQs. Real user questions only; omit if unknown.
- **R-32 Keyboard Accessibility:** All controls reachable and operable by keyboard (Tab, Enter, Space, Escape for modals). Visible `:focus-visible` (min 3:1). Never `outline: none` without replacement.
- **R-33 No Script Patching:** Ban scripts that rewrite CSS/source with string replacement. Build features directly in source.
- **R-34 All Themes Must Work:** If shipping light/dark toggle, both modes must pass contrast, colors, and layout.
- **R-35 Verify Before Deliver:** Build/run the app and click through interactive controls before claiming done.
- **R-36 No Fabricated Claims:** Ban fake compliance ("SOC 2", "ISO 27001") or performance claims without evidence.
- **R-37 Design Direction Required:** Load `DESIGN.md` or user brand guidance. If absent, label output *"draft without direction"* with dials ENERGY 1 / RHYTHM 1 / MOTION 1.
- **R-38 Real Content or Honest Placeholder:** All content is real or honest labeled placeholder (`Coming soon`, `[REAL DATA]`). Never fabricate realistic filler.

### Group 2: Purpose-Gate (Technique Allowed, Purpose Required)

Techniques below fail if applied as default without purpose. Allowed when serving hierarchy or brand identity with one-line reason recorded.

- **R-01 Color & Gradients:** Ban default blue-purple, neon, or glow backgrounds. Allowed for explicit brand hierarchy.
- **R-04 Icons:** Ban generic AI glyphs (sparkle, magic wand, lightning, robot) and default icon sets without content relevance.
- **R-06 Typography:** Ban monospace-as-aesthetic headings or wide-tracked uppercase labels without brand reason.
- **R-07 Background:** Ban default grid squares, dot matrix, or blueprint lines.
- **R-08 Button Arrows:** Ban default `→` / `↗` on every button. Use only when directional cue matters.
- **R-09 Badges:** Ban decorative capsule badges ("AI Powered", "Beta", "New"). Allowed only for real functional status.
- **R-10 Glassmorphism:** Dose cap: max 1-2 elements. Never navbar + cards + modal simultaneously.
- **R-12 Shadow:** Elevation marker only. Most elements sit flat; avoid making entire page float.
- **R-13 Glow:** Focus accent only on max 1-2 elements. Ban glow on cards + buttons + borders simultaneously.
- **R-14 Feature Cards:** Vary card layout according to content hierarchy. Flagship features deserve distinct treatment.
- **R-19 Animations:** UX purpose required. Match MOTION dial. Ban perpetual bouncing/pulsing loops.
- **R-22 Illustrations:** Ban generic Undraw/Storyset/3D blob art. Use real screenshots or none.

### Group 3: Quality Locks (Consistency)

- **R-05 Layout & Page Structure:** Ban formulaic templates (Hero + 3 cards, uniform bento grid, fake terminal, 3 pricing columns with middle highlighted, generic 4-column footer). Match RHYTHM dial.
- **R-11 Border Radius:** Consistent design system scale. Ban making every element pill-shaped.
- **R-15 CTAs:** Context-specific verbs ("Create Free Account", "Watch Live Demo"), not generic "Get Started" / "Learn More".
- **R-16 Buzzwords:** Ban "AI Powered", "Seamless", "Next Generation", "Revolutionary", "Cutting Edge", "Elevate".
- **R-20 Visual Identity:** Distinct identity that holds character even if logo and name are swapped.
- **R-21 Dark Mode:** Developer/creative tools have dark default rationale; content-first products should offer working light/dark toggle.
- **R-29 Color Palette:** Max 2-3 core colors + 1 accent color.
- **R-30 Do Not Clone:** Ban unprompted mimicry of Linear, Vercel, Stripe, Notion.
- **R-31 Reason Requirement:** One-line justification required for every major visual choice (color, layout, font, spacing, cards).

---

## Liveliness Toolkit

Positive requirements to prevent sterile defaults.

### Three Dials

Declare before generating: `Reading this as: <page kind> for <audience>, dial ENERGY <1-3> / RHYTHM <1-3> / MOTION <1-3>`.

| Dial | 1 (Calm) | 2 (Balanced) | 3 (Bold) | Focus |
|---|---|---|---|---|
| **ENERGY** | Linear, clean, understated | Stripe, Vercel, crisp | Awwwards, expressive | Visual presence & intensity |
| **RHYTHM** | Uniform, predictable grid | Consistent with subtle breaks | Asymmetric, mixed compositions | Section composition variety |
| **MOTION** | Hover states only | Scroll-reveal, smooth transitions | Choreographed motion, parallax | Motion volume & intent |

### Levers
- **One focal point per screen:** One dominant element; others defer.
- **Structural whitespace:** Whitespace separates and paces content.
- **One deliberate accent:** Accent color used sparingly at peak moment.
- **Identity motif:** One recurring typographic or layout gesture unique to the product.

---

## Delivery Gate

Run before delivering UI.

### Output Protocol (Terse / Caveman)
- **If Clean:** Emit single line:
  `Delivery Gate: PASS (0 slop, 0 dead controls, contrast AA OK, dials [E:<n>/R:<n>/M:<n>])`
- **If Failing:** List failing rule IDs (e.g. `FAIL R-26: signup button has no onClick`, `FAIL R-25: #777 on white is 4.48:1 < 4.5:1`), fix them, and re-run. Never deliver with unresolved FAIL.

---

## Contrast Reference Table (WCAG AA)

| Pairing (text on background) | Ratio | Normal (>=4.5) | Large (>=3.0) |
|---|---|---|---|
| Black on white | 21.00 | Pass | Pass |
| White on black | 21.00 | Pass | Pass |
| White on #333333 | 12.63 | Pass | Pass |
| White on #666666 | 5.74 | Pass | Pass |
| #777777 on white | 4.48 | Fail | Pass |
| White on #888888 | 3.54 | Fail | Pass |
| White on #999999 | 2.85 | Fail | Fail |
| #555555 on black | 2.82 | Fail | Fail |

Verification script:
- Node.js: `node skills/antislop/contrast-check.js "<hex1>" "<hex2>"`
- Python: `python skills/antislop/contrast-check.py "<hex1>" "<hex2>"`

More agent context in PanPanFR/oh-my-openkilo

54 other files this repository gives its agents.