{"slug":"blackbelttechnology-anti-slop-frontend","name":"anti-slop-frontend","description":"A mechanical, countable anti-slop checklist for AI-generated frontend. Catches the specific signatures an undirected model defaults to: AI-purple glows, Inter-everywhere, em-dashes, div-based fake screenshots, eyebrow-on-every-section, beige+brass \\\"premium\\\" palettes, generic Jane Doe / Acme data. Advisory layer that pairs with frontend-mockup-loop (which owns the cite-a-source loop plus WCAG gates) but works standalone in any React/Tailwind/HTML project. Triggers: \\\"does this look AI-generated\\\", \\\"anti-slop pass\\\", \\\"remove the AI tells\\\", \\\"why does this look templated\\\", \\\"design review for slop\\\".","long_description":"---\nname: anti-slop-frontend\ndescription: \"A mechanical, countable anti-slop checklist for AI-generated frontend. Catches the specific signatures an undirected model defaults to: AI-purple glows, Inter-everywhere, em-dashes, div-based fake screenshots, eyebrow-on-every-section, beige+brass \\\"premium\\\" palettes, generic Jane Doe / Acme data. Advisory layer that pairs with frontend-mockup-loop (which owns the cite-a-source loop plus WCAG gates) but works standalone in any React/Tailwind/HTML project. Triggers: \\\"does this look AI-generated\\\", \\\"anti-slop pass\\\", \\\"remove the AI tells\\\", \\\"why does this look templated\\\", \\\"design review for slop\\\".\"\nlicense: MIT\nmetadata:\n author: blackbelt-technology\n version: \"0.1\"\n adapted_from: \"Leonxlnx/taste-skill (design-taste-frontend, MIT) - countable rules distilled, stack-coupling removed, scoped universal vs marketing-only.\"\n---\n\n# anti-slop-frontend\n\nA flat, **mechanical** checklist of the concrete signatures an undirected model\nemits when it tries to \"look designed.\" Every rule here is **countable or\nbinary** - you can mechanically verify pass/fail, not argue taste. That is the\nwhole point: \"it looks better\" is not a check; \"eyebrow count > ceil(sections/3)\"\nis.\n\n## What this is, and is NOT\n\n- **IS** an advisory catalog of AI-tells, scoped by surface kind.\n- **IS** standalone - works with no tooling, in any React/Tailwind/HTML project.\n- **IS NOT** a design philosophy, a loop, or a gate. It scores; it never blocks.\n\n### Relationship to `frontend-mockup-loop`\n\nDifferent jobs, intentionally separate:\n\n| | frontend-mockup-loop | anti-slop-frontend (this) |\n|---|---|---|\n| Shape | ground→contract→mockup→test→fix→learn **loop** | flat **checklist** |\n| Basis | cite an **external public rule** (Nielsen, WCAG, Laws of UX) | codified **AI-tell catalog** |\n| Authority | owns the **hard gates** (WCAG-AA, severity-4) | **advisory only**, drives the fix list |\n| Domain | product UI, dashboards, flows | universal tells + marketing-surface tells |\n\nWhen both are present: the loop's a11y floor and cite-a-source rule **win**.\nThis skill feeds concrete failing items into the loop's FIX step. It never\noverrides a gate, and a tell here is never a reason to violate a cited rule.\n\n> **Honesty note:** these rules are curated *taste*, hardened into countable\n> form. They are good defaults, not laws of nature. Every rule has an **override\n> path**: when the brief explicitly asks for the \"banned\" thing, it is allowed -\n> execute it with intent, not by accident.\n\n---\n\n## The three dials (set once, up front)\n\nState these before reviewing or generating. They gate which rules fire and how hard.\n\n- **`VARIANCE` (1-10)** - 1 = perfect symmetry, 10 = artsy chaos\n- **`MOTION` (1-10)** - 1 = static, 10 = cinematic/physics\n- **`DENSITY` (1-10)** - 1 = art-gallery airy, 10 = cockpit/packed-data\n\nInfer from the brief; don't silently use a baseline. Dashboards/data UI live high\non DENSITY and low on VARIANCE/MOTION. Landing/portfolio live the opposite.\n\n---\n\n## PART A - Universal tells (apply to EVERY surface, dashboards included)\n\nThese fire regardless of surface kind. A dense admin panel is just as guilty of\nAI-purple and Inter-everywhere as a landing page.\n\n### A1. Color\n- **No AI-purple/blue glow as default.** No automatic violet button glows, no\n random neon gradients (\"the Lila tell\"). Neutral base (Zinc/Slate/Stone) +\n ONE high-contrast accent. *Override:* brand literally is purple.\n- **Max 1 accent color, saturation < 80% default.** Lock it: the same accent on\n the whole page. A warm-grey UI does not grow a blue CTA in section 7.\n- **One neutral temperature per project.** Don't drift warm-grey ↔ cool-grey.\n- **No pure `#000000` / pure `#ffffff`.** Off-black (zinc-950) and off-white;\n pure values kill depth.\n\n### A2. Typography\n- **Inter is discouraged as the *default*.** Reach past it (Geist, Outfit,\n Cabinet Grotesk, Satoshi) unless the brief wants neutral/Linear-style or is\n accessibility-first. *Override exists.*\n- **Serif is very discouraged as default.** \"Feels premium/creative\" is not a\n reason. Specifically banned as defaults: **Fraunces, Instrument Serif**.\n Serif only when the brief names one or the family is genuinely\n editorial/luxury/heritage.\n- **Emphasis = italic/bold of the SAME family.** Never inject a random serif\n word into a sans headline for \"visual interest.\"\n- **One corner-radius scale per page** (all-sharp / all-soft / all-pill), or a\n documented rule followed everywhere.\n\n### A3. The em-dash ban (the #1 tell)\n- **Zero `—` and zero `–`-as-separator anywhere visible.** Headlines, labels,\n pills, body, quotes, attribution, captions, buttons, alt text. No \"sparingly.\"\n Replace with a period, comma, colon, parentheses, line break, or a spaced\n hyphen ` - `. Ranges use a plain hyphen (`2018-2026`, `€40-80k`).\n- Mechanical check: grep the rendered output for `—`/`–`. Any hit = fail.\n\n### A4. Fake data (\"Jane Doe\" effect)\n- **No generic names.** \"John Doe / Sarah Chan / Jack Su\" → realistic,\n locale-appropriate names.\n- **No generic brand names.** \"Acme / Nexus / SmartFlow / Cloudly\" → contextual\n names that sound real.\n- **No fake-perfect numbers.** `99.99%`, `50%`, `1234567` → organic values\n (`47.2%`, real-looking phone formats). Fake-precise engineering specs\n (`5.8mm`, `4.1×`) are banned unless from real data or labeled mock.\n- **No filler verbs.** \"Elevate / Seamless / Unleash / Next-Gen / Revolutionize\"\n → concrete verbs.\n- **No generic avatars** (SVG \"egg\", default user glyph) → believable placeholders.\n\n### A5. Assets & icons\n- **No div-based fake screenshots.** Building a fake dashboard/terminal/task-list\n out of styled `
`s is the single biggest tell. Use a real screenshot, a\n generated image, a real mini component preview, or nothing.\n- **No hand-rolled SVG icons.** Use one icon family (Phosphor / HugeIcons /\n Radix / Tabler), standardized stroke width. Lucide only on explicit request.\n- **No hand-rolled decorative SVG illustrations** as default.\n- **No broken image links.** Use `picsum.photos/seed/{descriptive}/{w}/{h}` or\n generated assets, never dead Unsplash URLs.\n\n### A6. Interactive states (the \"happy-path only\" tell)\n- **Loading / empty / error states exist**, not just the static success state.\n Skeletons match final layout shape; avoid generic spinners.\n- **Button contrast (a11y).** Every CTA's text passes WCAG AA against its own\n background. No white-on-white, no transparent button on same-color bg with no\n border. *(This one is also a hard gate when frontend-mockup-loop runs.)*\n- **Form contrast (a11y).** Inputs, placeholders, focus rings, helper, error text\n all pass AA against the section bg. Label above input; never placeholder-as-label.\n\n### A7. Motion must be motivated\n- **Every animation justifies itself in one sentence** - hierarchy, storytelling,\n feedback, or state-transition. \"It looked cool\" is not valid. Motion-for-show\n is amateur.\n- **Motion claimed = motion shown.** If `MOTION > 4`, the page actually moves; if\n you can't ship working motion, drop the dial and ship clean static.\n- **Banned mechanism: `window.addEventListener('scroll', …)`** and React-state\n scroll/rAF loops. Use scroll-driven CSS, IntersectionObserver, or a motion\n library's scroll primitives.\n- **Reduced-motion honored** for anything above `MOTION 3`.\n\n---\n\n## PART B - Marketing-surface tells (landing / portfolio / about ONLY)\n\nSkip Part B entirely for dashboards, data tables, wizards, editors, product UI.\nThese rules govern hero-driven marketing pages, where the model's worst\ntemplating habits live.\n\n### B1. Hero discipline\n- **Hero fits the initial viewport.** Headline ≤ 2 lines, subtext ≤ 20 words and\n ≤ 4 lines, CTA visible without scroll. A 4-line headline is a font-size error.\n- **Hero top padding ≤ `pt-24` desktop** (content must not float mid-viewport).\n- **Max 4 text elements in the hero**: (eyebrow OR brand strip), headline,\n subtext, CTAs. Banned in hero: trust micro-strip, pricing teaser, tagline\n under CTAs, feature bullets, avatar row - those move to sections below.\n- **No version labels** (`V0.6`, `BETA`, `INVITE-ONLY`) unless the brief is a launch.\n\n### B2. The eyebrow tell (#1 violated rule)\n- An \"eyebrow\" = small uppercase wide-tracking label above a section headline\n (`text-[11px] uppercase tracking-[0.18em]`).\n- **Max 1 eyebrow per 3 sections** (hero counts as 1). Mechanical check: count\n `uppercase tracking` micro-labels above headlines; fail if > ceil(sections/3).\n- **No section-number eyebrows** (`00 / INDEX`, `001 · Capabilities`, `06 · how it\n works`). The section's position already categorizes it.\n- **Default fix: drop the eyebrow.** The headline alone is enough.\n\n### B3. Layout repetition\n- **No 3 equal feature cards.** The \"three identical horizontal cards\" row is the\n default. Use asymmetric grid, zig-zag, or a different family.\n- **Zigzag cap: max 2 consecutive image+text splits.** The 3rd in a row is a fail.\n- **Section-layout-repetition ban.** A layout family appears at most once. 8\n sections → ≥ 4 distinct families.\n- **No split-header** (\"big left headline + small right floating paragraph\") as\n default. Stack headline over body instead.\n- **Bento: exact cell count, real rhythm, background diversity.** N items → N\n cells (no empty tiles); ≥ 2-3 cells have real visual variation (image,\n gradient, pattern), not all white-on-white text cards.\n- **Marquee: max one per page.**\n\n### B4. CTA & social proof\n- **No duplicate CTA intent.** \"Get in touch\" + \"Let's talk\" + \"Contact us\" on one\n page = fail. One label per intent, everywhere.\n- **No CTA wraps to 2+ lines at desktop** (shorten label or widen button).\n- **Logo wall lives UNDER the hero, is logos only** (no industry labels beneath),\n uses real SVG marks (Simple Icons / devicon) or generated monograms, not plain\n text wordmarks.\n\n### B5. Decoration tells (banned by default)\n- **No decoration text strip** at hero bottom (`BRAND. MOTION. SPATIAL.`).\n- **No locale / city / time / weather strips** (`LIS 14:23 · 18°C`) unless the\n brief is genuinely place- or timezone-focused.\n- **No scroll cues** (`Scroll`, `↓ scroll`, `Scroll to explore`).\n- **No version footers** (`v1.4.2`, `Build 0048`, `last sync 4s ago`) on\n marketing pages - those are devtool fixtures.\n- **The middle-dot `·` is rationed** (max 1 per metadata line; not the default\n separator for everything).\n- **No decorative status dots** before every nav item / row / badge. Only for\n real semantic state, sparingly.\n- **No pills/labels overlaid on images** and **no pretentious photo-credit\n captions** (`Field study no. 12 · Ines Caetano`) on stock/placeholder images.\n- **No poetic section labels** (\"From the field\", \"Field notes\", \"On our desks\")\n → plain functional labels or none.\n- **No `border-t` + `border-b` on every row** of a long list/spec table. Long\n lists (>5 items) use a real component (grouped chunks, card grid, tabs,\n scroll-snap), not a hairline-per-row `