{"slug":"yuqingnicole-variant-analyze","name":"variant-analyze","description":"Audit existing sites, extract design tokens, generate style-matched pages. Runs consistency checks and Visual Quality Audit (40-item anti-slop checklist, Quality Score XX/100). Triggers on: analyze my site, audit this, match this style, extract tokens, what's wrong with this design, migrate, add a page to my site, compare old new","long_description":"---\nname: variant-analyze\ndescription: Audit existing sites, extract design tokens, generate style-matched pages. Runs consistency checks and Visual Quality Audit (40-item anti-slop checklist, Quality Score XX/100). Triggers on: analyze my site, audit this, match this style, extract tokens, what's wrong with this design, migrate, add a page to my site, compare old new\n---\n\n## Site Analysis Mode\n\nWhen the user points to existing code (file paths, a directory, or says \"analyze/audit/check my site\"), switch from generation mode to analysis mode. Load `references/design-system/style-audit.md` for the full methodology.\n\n### Triggers\n\n| User says | Action |\n|---|---|\n| \"analyze my site\" / \"audit this\" / \"check consistency\" | Full style audit → report |\n| \"match this style\" / \"follow existing design\" / \"extend my site\" | Extract tokens → generate matching pages |\n| \"extract tokens\" (on existing files, not a generated variation) | Token extraction → CSS custom properties file |\n| \"what's wrong with this design\" / \"review my CSS\" | Style consistency check → findings list |\n| \"migrate\" / \"consolidate\" / \"clean up\" | Audit → token generation → migration plan |\n| \"add a [page] to my site\" / \"new page matching my existing design\" | Extract → match → generate |\n\n### Analysis Workflow\n\n**Step 1: Scan** — Read the files the user points to. If no specific files given, scan for:\n```bash\n# Auto-detect entry points\nfind . -name \"*.html\" -o -name \"*.css\" -o -name \"*.tsx\" -o -name \"*.jsx\" \\\n -o -name \"*.vue\" -o -name \"*.svelte\" | head -20\n# Also check for:\n# - tailwind.config.* (Tailwind projects)\n# - globals.css / index.css / app.css (common entry CSS)\n# - tokens.css / variables.css / theme.* (existing token files)\n```\n\n**Step 2: Extract** — Pull all design primitives following the Token Extraction schema in `style-audit.md`: colors, typography, spacing, components, transitions. Group by semantic role.\n\n**Step 3: Detect** — Run all consistency checks from `style-audit.md` Section 2. For each finding, record severity (error/warning/info), the specific values, file locations, and a concrete fix.\n\n**Step 3.5: Visual Quality Audit** — In addition to consistency checks from `style-audit.md`, run this anti-slop checklist. Flag any item that fails with severity **warning** or **error**:\n\n**Typography**\n- [ ] Display font is NOT Inter/Roboto/Arial/Open Sans — use something with character\n- [ ] Headlines have presence: tight tracking, compressed line-height, strong weight contrast\n- [ ] Body text max-width ~65ch; line-height ≥ 1.5\n- [ ] Weight range uses at least 3 stops (e.g. 400 / 500 / 700) — not just Regular + Bold\n- [ ] Numbers in data contexts use `font-variant-numeric: tabular-nums` or monospace\n- [ ] No orphaned single words on last line — use `text-wrap: balance` / `text-wrap: pretty`\n- [ ] Headers use sentence case — not Title Case On Every Word\n\n**Color & Surfaces**\n- [ ] No pure `#000000` background — use off-black / dark charcoal / tinted dark\n- [ ] Accent saturation below 80% — no neon or screaming accents\n- [ ] Only one accent color — remove all others\n- [ ] Grays are from one family — no mixing warm and cool grays\n- [ ] No purple-to-blue \"AI gradient\" aesthetic\n- [ ] Shadows are tinted to match background hue — not pure black at low opacity\n- [ ] No random isolated dark section in a light-mode page (or vice versa)\n\n**Layout**\n- [ ] Not everything centered and symmetrical — break with offset, left-align, or asymmetry\n- [ ] No 3 equal-column feature card row — use zig-zag, asymmetric grid, or horizontal scroll\n- [ ] Uses `min-height: 100dvh` not `height: 100vh` (iOS Safari viewport jump)\n- [ ] Has `max-width` container constraint — content doesn't stretch edge-to-edge\n- [ ] Cards vary in size or weight — not uniformly identical\n- [ ] Card group CTAs pin to bottom so buttons align across variable-length cards\n\n**Interactivity & States**\n- [ ] All buttons/links/cards have hover state (not just `opacity: 0.8`)\n- [ ] Active/pressed feedback: `scale(0.98)` or `translateY(1px)`\n- [ ] Transitions have non-zero duration (200-300ms)\n- [ ] Visible `:focus-visible` ring — never `outline: none` alone\n- [ ] Loading state exists — skeleton loaders, not generic spinners\n- [ ] Empty state has content: acknowledge → explain value → CTA\n- [ ] Error state has inline message — no `window.alert()`\n\n**Content**\n- [ ] No generic names: John Doe, Acme Corp, Nexus, SmartFlow\n- [ ] No fake round numbers: `99.99%`, `$100.00`, `50,000 users`\n- [ ] No AI clichés: Elevate, Seamless, Unleash, Next-Gen, Game-changer, Delve\n- [ ] No Lorem Ipsum\n- [ ] No exclamation marks in success/confirmation messages\n- [ ] No passive voice in errors\n\n**Iconography**\n- [ ] Not using only Lucide/Feather icons — consider Phosphor or Radix UI Icons\n- [ ] Consistent stroke width across all icons\n- [ ] Favicon exists\n\n**Code Quality**\n- [ ] Semantic HTML: `