Anti Slop Frontend

anti-slop-frontend

A flat, mechanical checklist of the concrete signatures an undirected model emits when it tries to "look designed." Every rule here is countable or binary - you can mechanically verify pass/fail, not argue taste. That is the whole point: "it looks better" is not a check; "eyebrow count > ceil(sections/3)" is.

What this is, and is NOT

• IS an advisory catalog of AI-tells, scoped by surface kind.
• IS standalone - works with no tooling, in any React/Tailwind/HTML project.
• IS NOT a design philosophy, a loop, or a gate. It scores; it never blocks.

Relationship to frontend-mockup-loop

Different jobs, intentionally separate:

When both are present: the loop's a11y floor and cite-a-source rule win. This skill feeds concrete failing items into the loop's FIX step. It never overrides a gate, and a tell here is never a reason to violate a cited rule.

Authority: advisory. Findings feed the frontend-mockup-loop FIX step and never override a WCAG-AA or severity gate. When a recommendation conflicts with a gate result, the gate result stands and the recommendation is recorded as overridden.

The suite

Honesty note: these rules are curated taste, hardened into countable form. They are good defaults, not laws of nature. Every rule has an override path: when the brief explicitly asks for the "banned" thing, it is allowed - execute it with intent, not by accident.

Design Read and surface profile (declare first)

Before reviewing or generating, state ONE line:

Design Read: <profile> · <audience> · <mood> · VARIANCE <n> / MOTION <n> / DENSITY <n>

Example: Design Read: marketing · technical buyers · calm, precise · VARIANCE 4 / MOTION 3 / DENSITY 5.

Audience and mood are declared context, not checks. The profile is the switch that decides which rule groups fire:

• product-ui: dashboards, admin panels, data tables, editors, wizards, any app screen.
• marketing: an existing landing / portfolio / about / docs-home page.
• new-site: a site with no shipped design yet.

Never infer the profile silently. An undeclared profile is how marketing rules leak into dense UI. If the brief is ambiguous, ask exactly one question. A review or generation reported without a Design Read fails Verification.

The three dials (set once, up front)

State these before reviewing or generating. They gate which rules fire and how hard.

• VARIANCE (1-10) - 1 = perfect symmetry, 10 = artsy chaos
• MOTION (1-10) - 1 = static, 10 = cinematic/physics
• DENSITY (1-10) - 1 = art-gallery airy, 10 = cockpit/packed-data

Infer from the brief; don't silently use a baseline. Dashboards/data UI live high on DENSITY and low on VARIANCE/MOTION. Landing/portfolio live the opposite.

PART A - Universal tells (apply to EVERY surface, dashboards included)

These fire regardless of surface kind. A dense admin panel is just as guilty of AI-purple and Inter-everywhere as a landing page.

A1. Color

• No AI-purple/blue glow as default. No automatic violet button glows, no random neon gradients ("the Lila tell"). Neutral base (Zinc/Slate/Stone) + ONE high-contrast accent. Override: brand literally is purple.
• Max 1 accent color, saturation < 80% default. Lock it: the same accent on the whole page. A warm-grey UI does not grow a blue CTA in section 7.
• One neutral temperature per project. Don't drift warm-grey ↔ cool-grey.
• No pure #000000 / pure #ffffff. Off-black (zinc-950) and off-white; pure values kill depth.

A2. Typography

• Inter is discouraged as the default. Reach past it (Geist, Outfit, Cabinet Grotesk, Satoshi) unless the brief wants neutral/Linear-style or is accessibility-first. Override exists.
• Serif is very discouraged as default. "Feels premium/creative" is not a reason. Specifically banned as defaults: Fraunces, Instrument Serif. Serif only when the brief names one or the family is genuinely editorial/luxury/heritage.
• Emphasis = italic/bold of the SAME family. Never inject a random serif word into a sans headline for "visual interest."
• One corner-radius scale per page (all-sharp / all-soft / all-pill), or a documented rule followed everywhere.

A3. The em-dash ban (the #1 tell)

• Zero — and zero –-as-separator anywhere visible. Headlines, labels, pills, body, quotes, attribution, captions, buttons, alt text. No "sparingly." Replace with a period, comma, colon, parentheses, line break, or a spaced hyphen -. Ranges use a plain hyphen (2018-2026, €40-80k).
• Mechanical check: grep the rendered output for —/–. Any hit = fail.

A4. Fake data ("Jane Doe" effect)

• No generic names. "John Doe / Sarah Chan / Jack Su" → realistic, locale-appropriate names.
• No generic brand names. "Acme / Nexus / SmartFlow / Cloudly" → contextual names that sound real.
• No fake-perfect numbers. 99.99%, 50%, 1234567 → organic values (47.2%, real-looking phone formats). Fake-precise engineering specs (5.8mm, 4.1×) are banned unless from real data or labeled mock.
• No filler verbs. "Elevate / Seamless / Unleash / Next-Gen / Revolutionize" → concrete verbs.
• No generic avatars (SVG "egg", default user glyph) → believable placeholders.

A5. Assets & icons

• No div-based fake screenshots. Building a fake dashboard/terminal/task-list out of styled <div>s is the single biggest tell. Use a real screenshot, a generated image, a real mini component preview, or nothing.
• No hand-rolled SVG icons. Use one icon family (Phosphor / HugeIcons / Radix / Tabler), standardized stroke width. Lucide only on explicit request.
• No hand-rolled decorative SVG illustrations as default.
• No broken image links. Use picsum.photos/seed/{descriptive}/{w}/{h} or generated assets, never dead Unsplash URLs.

A6. Interactive states (the "happy-path only" tell)

• Loading / empty / error states exist, not just the static success state. Skeletons match final layout shape; avoid generic spinners.
• Button contrast (a11y). Every CTA's text passes WCAG AA against its own background. No white-on-white, no transparent button on same-color bg with no border. (This one is also a hard gate when frontend-mockup-loop runs.)
• Form contrast (a11y). Inputs, placeholders, focus rings, helper, error text all pass AA against the section bg. Label above input; never placeholder-as-label.

A7. Motion must be motivated

• Every animation justifies itself in one sentence - hierarchy, storytelling, feedback, or state-transition. "It looked cool" is not valid. Motion-for-show is amateur.
• Motion claimed = motion shown. If MOTION > 4, the page actually moves; if you can't ship working motion, drop the dial and ship clean static.
• Banned mechanism: window.addEventListener('scroll', …) and React-state scroll/rAF loops. Use scroll-driven CSS, IntersectionObserver, or a motion library's scroll primitives.
• Reduced-motion honored for anything above MOTION 3.

A8. Layering and DOM cost

• No arbitrary z-index. Every z-* / z-index value comes from one documented layer scale (e.g. base, sticky, dropdown, overlay, modal, toast). Mechanical check: count distinct z-index values in the diff; any value not in the project's scale = fail. z-[9999] / z-50 sprinkled to "win" a stacking fight is the tell.
• Grain / noise / blur filters only on fixed, pointer-events-none layers, never on a scrolling container (continuous repaint).
• Animate only transform and opacity. Animating top / left / width / height = fail.
• No wrapper-div towers. A component that nests > 4 layout-only <div>s to place one element is flagged; flatten with grid/flex on the parent.

PART B - Marketing-surface tells (landing / portfolio / about ONLY)

Skip Part B entirely for dashboards, data tables, wizards, editors, product UI. These rules govern hero-driven marketing pages, where the model's worst templating habits live.

B1. Hero discipline

• Hero fits the initial viewport. Headline ≤ 2 lines, subtext ≤ 20 words and ≤ 4 lines, CTA visible without scroll. A 4-line headline is a font-size error.
• Hero top padding ≤ pt-24 desktop (content must not float mid-viewport).
• Max 4 text elements in the hero: (eyebrow OR brand strip), headline, subtext, CTAs. Banned in hero: trust micro-strip, pricing teaser, tagline under CTAs, feature bullets, avatar row - those move to sections below.
• No version labels (V0.6, BETA, INVITE-ONLY) unless the brief is a launch.

B2. The eyebrow tell (#1 violated rule)

• An "eyebrow" = small uppercase wide-tracking label above a section headline (text-[11px] uppercase tracking-[0.18em]).
• Max 1 eyebrow per 3 sections (hero counts as 1). Mechanical check: count uppercase tracking micro-labels above headlines; fail if > ceil(sections/3).
• No section-number eyebrows (00 / INDEX, 001 · Capabilities, 06 · how it works). The section's position already categorizes it.
• Default fix: drop the eyebrow. The headline alone is enough.

B3. Layout repetition

• No 3 equal feature cards. The "three identical horizontal cards" row is the default. Use asymmetric grid, zig-zag, or a different family.
• Zigzag cap: max 2 consecutive image+text splits. The 3rd in a row is a fail.
• Section-layout-repetition ban. A layout family appears at most once. 8 sections → ≥ 4 distinct families.
• No split-header ("big left headline + small right floating paragraph") as default. Stack headline over body instead.
• Bento: exact cell count, real rhythm, background diversity. N items → N cells (no empty tiles); ≥ 2-3 cells have real visual variation (image, gradient, pattern), not all white-on-white text cards.
• Marquee: max one per page.