gstack/review/design-checklist.md

Design Review Checklist (Lite)

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

This checklist applies to source code in the diff — not rendered output. Read each changed frontend file (full file, not just diff hunks) and flag anti-patterns.

Trigger: Only run this checklist if the diff touches frontend files. Use gstack-diff-scope to detect:

source <(~/.claude/skills/gstack/bin/gstack-diff-scope <base> 2>/dev/null)

If SCOPE_FRONTEND=false, skip the entire design review silently.

DESIGN.md calibration: If DESIGN.md or design-system.md exists in the repo root, read it first. All findings are calibrated against the project's stated design system. Patterns explicitly blessed in DESIGN.md are NOT flagged. If no DESIGN.md exists, use universal design principles.

---

Confidence Tiers

Each item is tagged with a detection confidence level:

• [HIGH] — Reliably detectable via grep/pattern match. Definitive findings.
• [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

AUTO-FIX (mechanical CSS fixes only — HIGH confidence, no design judgment needed):

• outline: none without replacement → add outline: revert or &:focus-visible { outline: 2px solid currentColor; }
• !important in new CSS → remove and fix specificity
• font-size < 16px on body text → bump to 16px

ASK (everything else — requires design judgment):

• All AI slop findings, typography structure, spacing choices, interaction state gaps, DESIGN.md violations

LOW confidence items → present as "Possible: [description]. Verify visually or run /design-review." Never AUTO-FIX.

---

Output Format

Design Review: N issues (X auto-fixable, Y need input, Z possible)

**AUTO-FIXED:**
- [file:line] Problem → fix applied

**NEEDS INPUT:**
- [file:line] Problem description
  Recommended fix: suggested fix

**POSSIBLE (verify visually):**
- [file:line] Possible issue — verify with /design-review

Optional: test_stub — skeleton test code for this finding using the project's test framework.

If no issues found: Design Review: No issues found.

If no frontend files changed: skip silently, no output.

---

Categories

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.

• [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.

• [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.

• [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] [gradient-text] Emphasis is weight or size. Gradient text is emphasis in a costume. Grep for background-clip: text next to a gradient background.

• [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.

• [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)

• [HIGH] Body text font-size < 16px. Grep for font-size declarations on body, p, .text, or base styles. Values below 16px (or 1rem when base is 16px) are flagged.

• [HIGH] More than 3 font families introduced in the diff. Count distinct font-family declarations. Flag if >3 unique families appear across changed files.

• [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, 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)

• [MEDIUM] Arbitrary spacing values not on a 4px or 8px scale, when DESIGN.md specifies a spacing scale. Check margin, padding, gap values against the stated scale. Only flag when DESIGN.md defines a scale.

• [MEDIUM] Fixed widths without responsive handling: width: NNNpx on containers without max-width or @media breakpoints. Risk of horizontal scroll on mobile.

• [MEDIUM] Missing max-width on text containers: body text or paragraph containers with no max-width set, allowing lines >75 characters. Check for max-width on text wrappers.

• [HIGH] !important in new CSS rules. Grep for !important in added lines. Almost always a specificity escape hatch that should be fixed properly.

4. Interaction States (3 items)

• [MEDIUM] Interactive elements (buttons, links, inputs) missing hover/focus states. Check if :hover and :focus or :focus-visible pseudo-classes exist for new interactive element styles.

• [HIGH] outline: none or outline: 0 without a replacement focus indicator. Grep for outline:\s*none or outline:\s*0. This removes keyboard accessibility.

• [LOW] Touch targets < 44px on interactive elements. Check min-height/min-width/padding on buttons and links. Requires computing effective size from multiple properties — low confidence from code alone.

5. DESIGN.md Violations (3 items, conditional)

Only apply if DESIGN.md or design-system.md exists:

• [MEDIUM] Colors not in the stated palette. Compare color values in changed CSS against the palette defined in DESIGN.md.

• [MEDIUM] Fonts not in the stated typography section. Compare font-family values against DESIGN.md's font list.

• [MEDIUM] Spacing values outside the stated scale. Compare margin/padding/gap values against DESIGN.md's spacing scale.

---

Suppressions

Do NOT flag:

• Patterns explicitly documented in DESIGN.md as intentional choices
• Third-party/vendor CSS files (node_modules, vendor directories)
• CSS resets or normalize stylesheets
• Test fixture files
• Generated/minified CSS