feat(review): generate review/design-checklist.md from the catalog

review/design-checklist.md was hand-written and its own header admitted it
drifted from DESIGN_METHODOLOGY category 9. It is now rendered by
scripts/resolvers/design-checklist.ts from lib/design-catalog.ts: category 1
lists every grep-detectable slop entry plus the legacy blacklist lines,
sorted HIGH/MEDIUM/LOW, each with its heuristic and, where the detector knows
the rule, its bracketed id (27 items, up from 6). The font blacklist renders
from BANNED_FONTS. Categories 2-5, Instructions, Classification, Output
Format, and Suppressions keep their prose. Title and slop heading are
unchanged (test/skill-e2e-review.test.ts and hosts/opencode.ts key on them).

gen-skill-docs writes the file for the Claude host only (a Claude-side
runtime asset; other hosts copy or inline the render), honors --out-dir, and
reports STALE/FRESH under --dry-run like sections do.
test/design-checklist-sync.test.ts pins committed == generated, the
host/out-dir scoping, and the dry-run freshness line.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

review/design-checklist.md

@@ -1,6 +1,7 @@
+<!-- GENERATED from lib/design-catalog.ts via scripts/resolvers/design-checklist.ts. Run: bun run gen:skill-docs -->
 # Design Review Checklist (Lite)
 
-> **Subset of DESIGN_METHODOLOGY** — when adding items here, also update `generateDesignMethodology()` in `scripts/gen-skill-docs.ts`, and vice versa.
+> **Generated from the catalog.** Category 1 renders the grep-detectable slop entries of `lib/design-catalog.ts`, the same entries DESIGN_METHODOLOGY category 9 renders, so the two cannot drift. Edit the catalog, then run `bun run gen:skill-docs`.
 
 ## Instructions
 
@@ -26,6 +27,8 @@ Each item is tagged with a detection confidence level:
 - **[MEDIUM]** — Detectable via pattern aggregation or heuristic. Flag as findings but expect some noise.
 - **[LOW]** — Requires understanding visual intent. Present as: "Possible issue — verify visually or run /design-review."
 
+A bracketed `[rule-id]` names the deterministic detector rule for the same pattern; a hit from the detector and a hit from this checklist at the same file:line are one finding.
+
 ---
 
 ## Classification
@@ -68,21 +71,63 @@ If no frontend files changed: skip silently, no output.
 
 ## Categories
 
-### 1. AI Slop Detection (6 items) — highest priority
+### 1. AI Slop Detection (27 items) — highest priority
 
 These are the telltale signs of AI-generated UI that no designer at a respected studio would ship.
 
-- **[MEDIUM]** Purple/violet/indigo gradient backgrounds or blue-to-purple color schemes. Look for `linear-gradient` with values in the `#6366f1`–`#8b5cf6` range, or CSS custom properties resolving to purple/violet.
+- **[HIGH]** Centered everything (`text-align: center` on all headings, descriptions, cards). Grep for `text-align: center` density: if more than 60% of text containers center, flag it.
 
-- **[LOW]** The 3-column feature grid: icon-in-colored-circle + bold title + 2-line description, repeated 3x symmetrically. Look for a grid/flex container with exactly 3 children that each contain a circular element + heading + paragraph.
+- **[HIGH]** [side-tab] Colored left-border on cards (`border-left: 3px solid <accent>`). Grep for `border-left: <n>px solid` on card, callout, or list-item selectors.
 
-- **[LOW]** Icons in colored circles as section decoration. Look for elements with `border-radius: 50%` + a background color used as decorative containers for icons.
+- **[HIGH]** system-ui or `-apple-system` as the PRIMARY display/body font — the "I gave up on typography" signal. Pick a real typeface. Grep `font-family` on body, headings, and base styles for `system-ui` or `-apple-system` as the first face in the stack.
 
-- **[HIGH]** Centered everything: `text-align: center` on all headings, descriptions, and cards. Grep for `text-align: center` density — if >60% of text containers use center alignment, flag it.
+- **[HIGH]** [gradient-text] Emphasis is weight or size. Gradient text is emphasis in a costume. Grep for `background-clip: text` next to a gradient background.
 
-- **[MEDIUM]** Uniform bubbly border-radius on every element: same large radius (16px+) applied to cards, buttons, inputs, containers uniformly. Aggregate `border-radius` values — if >80% use the same value ≥16px, flag it.
+- **[HIGH]** [bounce-easing] Overshoot and bounce curves on UI motion. Exponential ease-out from an already-visible default. Grep transitions and keyframes for cubic-bezier curves with a control point past 1, or `bounce` in animation names.
 
-- **[MEDIUM]** Generic hero copy: "Welcome to [X]", "Unlock the power of...", "Your all-in-one solution for...", "Revolutionize your...", "Streamline your workflow". Grep HTML/JSX content for these patterns.
+- **[HIGH]** [dark-glow] Glowing edges on dark surfaces: look number two. Depth has an offset; a zero-offset colored halo is decoration. Grep `box-shadow` for a zero x/y offset with a large blur and a saturated color.
+
+- **[HIGH]** [oversized-h1] Display type past 6rem on a page that is not a poster. Size is not hierarchy. Grep h1 and display selectors for font-size above 6rem or 96px.
+
+- **[HIGH]** [extreme-negative-tracking] Letter-spacing below -0.04em on display type. Tight tracking is a taste; crushed tracking is a tell. Grep `letter-spacing` for values below -0.04em.
+
+- **[MEDIUM]** [ai-color-palette] Purple/violet/indigo gradient backgrounds or blue-to-purple color schemes. Look for `linear-gradient` with values in the `#6366f1` to `#8b5cf6` range, or CSS custom properties resolving to purple/violet.
+
+- **[MEDIUM]** Uniform bubbly border-radius on every element (same large radius on everything). Aggregate `border-radius` values: if more than 80% share one value of 16px or more, flag it. Pill radius on everything is the extreme case.
+
+- **[MEDIUM]** Emoji as design elements (rockets in headings, emoji as bullet points). Grep headings, list items, and buttons for emoji code points used as icons or bullets.
+
+- **[MEDIUM]** Generic hero copy ("Welcome to [X]", "Unlock the power of...", "Your all-in-one solution for..."). Grep HTML/JSX content for "Welcome to", "Unlock the power of", "Your all-in-one solution", "Revolutionize your", "Streamline your workflow".
+
+- **[MEDIUM]** [overused-font] A training-data default as the display voice means you stopped looking. As body or UI on an Operate or Read surface, several of these are fine. Say which and why. Grep `font-family` for a listed face as the first face on display selectors (h1, h2, .hero, .display). Faces: Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Montserrat, Poppins, Space Grotesk, Space Mono, Fraunces, Playfair Display, Cormorant, Lora, Crimson, Newsreader, Syne, IBM Plex Sans, IBM Plex Serif, DM Sans, DM Serif, Outfit, Plus Jakarta Sans, Instrument Sans, Geist.
+
+- **[MEDIUM]** [pulsing-dot] A small circle pulsing forever next to "Live" or "Online". Motion that says nothing new after the first loop. Grep for infinite keyframe animations on small round elements.
+
+- **[MEDIUM]** [kicker-above-heading] A kicker above a heading is the strongest default there is: the heading carries its own weight, so delete the label. If the user wants it anyway, comply and say the tradeoff once. Look for a short uppercase, tracked element immediately before an h1 or h2.
+
+- **[MEDIUM]** [marketing-buzzword] "Seamless", "effortless", "supercharge", "streamline": words that describe nothing. Say what the product does. Grep visible copy for seamless, effortless, supercharge, streamline, revolutionize, unlock, empower, elevate.
+
+- **[MEDIUM]** [theater-slop-phrase] "Built for the way you work", "Designed for teams like yours", "Meet your new...": phrases that perform a launch instead of describing one. Grep copy for "built for", "designed for", "meet your new", "ship faster", "the future of".
+
+- **[MEDIUM]** [image-hover-transform] Scaling an image on hover. Motion with no information in it. Grep `:hover` rules on images for `transform: scale`.
+
+- **[MEDIUM]** Gradient buttons as the primary call to action. One solid color the palette owns. Grep button and CTA selectors for gradient backgrounds.
+
+- **[MEDIUM]** "Get Started" and "Learn More" as the only calls to action. Name the outcome the click buys. Grep buttons and links for "Get Started" and "Learn More" with no more specific CTA on the page.
+
+- **[MEDIUM]** Frosted-glass panels with blurred backdrops as the default surface. One translucent layer where it explains depth, not everywhere. Grep for `backdrop-filter: blur` on more than one container.
+
+- **[MEDIUM]** Monospace on labels and body copy to look technical. Mono is for code and data columns. Grep `font-family` for a monospace stack on non-code, non-tabular selectors.
+
+- **[MEDIUM]** Selection color, caret, scrollbars, focus rings, underline offset, tabular numerals left at browser defaults. Theme them from the palette. Grep for `::selection`, `caret-color`, `accent-color`, `scrollbar-color`, `text-underline-offset`, `font-variant-numeric`: none present means none themed.
+
+- **[LOW]** **The 3-column feature grid:** icon-in-colored-circle + bold title + 2-line description, repeated 3x symmetrically. THE most recognizable AI layout. Look for a grid/flex container with exactly 3 children that each contain a circular element + heading + paragraph.
+
+- **[LOW]** Icons in colored circles as section decoration (SaaS starter template look). Look for elements with `border-radius: 50%` + a background color used as decorative containers for icons.
+
+- **[LOW]** Decorative blobs, floating circles, wavy SVG dividers (if a section feels empty, it needs better content, not decoration).
+
+- **[LOW]** Cookie-cutter section rhythm (hero → 3 features → testimonials → pricing → CTA, every section same height).
 
 ### 2. Typography (4 items)
 
@@ -92,7 +137,7 @@ These are the telltale signs of AI-generated UI that no designer at a respected
 
 - **[HIGH]** Heading hierarchy skipping levels: `h1` followed by `h3` without an `h2` in the same file/component. Check HTML/JSX for heading tags.
 
-- **[HIGH]** Blacklisted fonts: Papyrus, Comic Sans, Lobster, Impact, Jokerman. Grep `font-family` for these names.
+- **[HIGH]** Blacklisted fonts: Papyrus, Comic Sans, Lobster, Impact, Jokerman, Bleeding Cowboys, Permanent Marker, Bradley Hand, Brush Script, Hobo, Trajan, Raleway, Clash Display, Courier New. Grep `font-family` for these names.
 
 ### 3. Spacing & Layout (4 items)