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.

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.

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.

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.

B4. CTA & social proof

• No duplicate CTA intent. "Get in touch" + "Let's talk" + "Contact us" on one page = fail. One label per intent, everywhere.
• No CTA wraps to 2+ lines at desktop (shorten label or widen button).
• Logo wall lives UNDER the hero, is logos only (no industry labels beneath), uses real SVG marks (Simple Icons / devicon) or generated monograms, not plain text wordmarks.

B5. Decoration tells (banned by default)

• No decoration text strip at hero bottom (BRAND. MOTION. SPATIAL.).
• No locale / city / time / weather strips (LIS 14:23 · 18°C) unless the brief is genuinely place- or timezone-focused.
• No scroll cues (Scroll, ↓ scroll, Scroll to explore).
• No version footers (v1.4.2, Build 0048, last sync 4s ago) on marketing pages - those are devtool fixtures.
• The middle-dot · is rationed (max 1 per metadata line; not the default separator for everything).
• No decorative status dots before every nav item / row / badge. Only for real semantic state, sparingly.
• No pills/labels overlaid on images and no pretentious photo-credit captions (Field study no. 12 · Ines Caetano) on stock/placeholder images.
• No poetic section labels ("From the field", "Field notes", "On our desks") → plain functional labels or none.
• No border-t + border-b on every row of a long list/spec table. Long lists (>5 items) use a real component (grouped chunks, card grid, tabs, scroll-snap), not a hairline-per-row <ul>.

B6. Copy self-audit

• Re-read every visible string. Flag and rewrite: grammatically broken phrases, unclear referents, cute-but-wrong wordplay, fake-craftsman micro-meta. Plain functional copy beats AI-cute copy.

Mechanical pre-flight (the grep-able subset)

The rules below can be checked by string-search, not judgment. Run them last.

• Em-dash: zero — / –-as-separator in rendered output (A3).
• AI-purple: no default violet glow/gradient unless brand-justified (A1).
• Accent lock: one accent hex family across all sections (A1).
• Default font: not Inter (unless justified); serif is not Fraunces / Instrument Serif (A2).
• Fake data: no "Doe / Acme / 99.99% / Elevate" (A4).
• Fake screenshots: no div-built product UI; no hand-rolled icon paths (A5).
• CTA/form contrast: every CTA + input passes WCAG AA (A6).
• Motion: no addEventListener('scroll'); reduced-motion present (A7).
• (marketing only) Eyebrow count ≤ ceil(sections/3) (B2).
• (marketing only) Zigzag ≤ 2 consecutive splits; ≥ 4 layout families (B3).
• (marketing only) CTA intent not duplicated; no CTA wrap at desktop (B4).
• (marketing only) no decoration/locale/scroll-cue/version strips (B5).

If a box can't be honestly ticked, it's a flagged item - feed it to the fix step.

Pitfalls

• Do NOT treat these as hard gates. They are advisory; the WCAG/severity gates (owned by frontend-mockup-loop) are the only hard blockers.
• Do NOT apply Part B to dashboards/product UI - it will fight dense, correct UI.
• Do NOT cite a tell from this catalog as justification to violate an external documented rule. When the two conflict, the cited public rule wins.
• Do NOT forget the override path: when the brief explicitly asks for the "banned" thing, allow it - done with intent, not by default-reaching.

Verification

• The three dials were declared and reasoned from the brief, not defaulted.
• The grep-able pre-flight subset was run; every hit is either fixed or has a documented brief-driven override.
• Part B was applied only to marketing surfaces; skipped for product UI.
• No advisory tell was used to override a WCAG-AA or severity-4 gate.

Adapted from Leonxlnx/taste-skill (design-taste-frontend, MIT). This is a distillation of its countable rules: stack-coupling (Next RSC / Motion / GSAP / next/font) removed, rules re-scoped into universal vs marketing-only, and reframed as an advisory catalog that pairs with - never overrides - frontend-mockup-loop's cite-a-source loop and hard gates. Original taste, original author's eye; full prose corpus and GSAP code skeletons live in the upstream repo.