ima2-gen 2.0.15 → 2.0.16

package/skills/ima2-front/references/logo-sections.md

@@ -0,0 +1,194 @@
+# Logo Sections — Integration Grids, Marquees & Brand Walls
+
+Patterns for displaying partner/integration logos. These sections are trust signals, not navigation.
+For design judgment (when/why to use each pattern), see `dev-uiux-design/references/logo-trust-sections.md`.
+
+---
+
+## Decision Table
+
+| Condition | Pattern | Reason |
+|-----------|---------|--------|
+| ≤6 logos, need labels/links | Static grid | Clean, scannable, clickable |
+| ≤6 logos, case study links | Static grid, clickable | Hover justified — links add value |
+| 8+ logos, social proof | CSS marquee | Avoids orphan cells, feels dynamic |
+| Many logos, save vertical space | Multi-row marquee | Opposing directions add depth |
+| Portfolio/client list | Static grid with uniform treatment | Professional, organized |
+
+---
+
+## Why Logo Sections Should NOT Have Individual Hover Effects
+
+Logo/integration sections are **trust signals**, not interactive navigation.
+
+1. **False affordance** — Hover implies clickability. Users expect navigation but get nothing.
+2. **Visual noise** — Many logos + hover animations = busy, gimmicky, undermines credibility.
+3. **Mobile incompatibility** — Hover states don't exist on touch devices.
+4. **Brand guideline conflicts** — Heavy modifications can violate partner brand guidelines.
+5. **Distraction from CTA** — The section's job is to build trust, not capture clicks.
+
+**Acceptable alternatives:**
+- Pause the entire marquee on hover (standard)
+- Very subtle uniform opacity change on section hover (not individual items)
+- No hover at all (cleanest, most common in premium sites)
+- **Exception:** If logos link to case study pages, individual hover is justified.
+
+---
+
+## CSS-Only Marquee
+
+The dominant production pattern. Duplicate the content for seamless looping.
+
+```html
+<div class="marquee" aria-label="Trusted by leading companies">
+  <div class="marquee-track">
+    <!-- Original set -->
+    <img src="/logos/kubernetes.svg" alt="Kubernetes" width="120" height="40">
+    <img src="/logos/docker.svg" alt="Docker" width="120" height="40">
+    <img src="/logos/aws.svg" alt="AWS" width="120" height="40">
+    <!-- Duplicate set for seamless loop -->
+    <img src="/logos/kubernetes.svg" alt="" aria-hidden="true" width="120" height="40">
+    <img src="/logos/docker.svg" alt="" aria-hidden="true" width="120" height="40">
+    <img src="/logos/aws.svg" alt="" aria-hidden="true" width="120" height="40">
+  </div>
+</div>
+```
+
+```css
+.marquee {
+  overflow: hidden;
+  user-select: none;
+  -webkit-mask-image: linear-gradient(
+    to right, transparent, black 10%, black 90%, transparent
+  );
+  mask-image: linear-gradient(
+    to right, transparent, black 10%, black 90%, transparent
+  );
+}
+
+.marquee-track {
+  display: flex;
+  gap: 48px;
+  align-items: center;
+  width: max-content;
+  animation: marquee-scroll 40s linear infinite;
+}
+
+.marquee-track img {
+  height: 32px;
+  width: auto;
+  flex-shrink: 0;
+  filter: grayscale(1) brightness(0.7);
+  opacity: 0.5;
+  transition: none; /* No individual hover */
+}
+
+@keyframes marquee-scroll {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+
+.marquee:hover .marquee-track {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .marquee-track { animation: none; }
+}
+```
+
+### Marquee Speed Guide
+
+| Speed | Duration | Feel | Use |
+|-------|----------|------|-----|
+| Very slow | 50-60s | Calm, premium | Enterprise, finance |
+| Slow | 30-40s | Professional | General SaaS |
+| Medium | 20-30s | Energetic | Startups, dev tools |
+| Fast | <15s | Cheap, frantic | **Avoid** |
+
+`linear` timing only — no easing. Constant speed feels intentional.
+
+### Key Details
+- Duplicate items get `aria-hidden="true"` and empty `alt=""`
+- Fade edges with `mask-image` gradient — no hard cut
+- `translateX(-50%)` only works when content is exactly duplicated
+
+---
+
+## Multi-Row Opposing Marquee
+
+Two rows scrolling in opposite directions for visual depth.
+
+```css
+.marquee-reverse .marquee-track {
+  animation-direction: reverse;
+}
+```
+
+---
+
+## Static Grid (≤6 Logos)
+
+When logos need labels or link to documentation/case study pages.
+
+```css
+.logo-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 32px 48px;
+  align-items: center;
+}
+
+.logo-grid img {
+  height: 28px;
+  width: auto;
+  filter: grayscale(1) brightness(0.7);
+  opacity: 0.5;
+}
+```
+
+**Use `flexbox` with `justify-content: center`, NOT CSS grid** — flex avoids the orphan cell problem.
+
+---
+
+## The Orphan Cell Problem
+
+When a CSS grid has e.g. 8 items in a 7-column layout, 1 item sits alone on the last row.
+
+| Solution | When to use |
+|----------|-------------|
+| **Marquee** | 8+ logos — eliminates the problem entirely |
+| **Flexbox with `justify-content: center`** | Items wrap naturally, no empty cells |
+| **Match column count to item count** | Add or remove logos to fill the row |
+
+**Never** leave a single item alone on a grid row.
+
+---
+
+## Grayscale Treatment
+
+Standard for logo walls: desaturated/monochrome by default.
+
+```css
+.logo-item img {
+  filter: grayscale(1) brightness(0.7);
+  opacity: 0.5;
+}
+
+[data-theme="dark"] .logo-item img {
+  filter: grayscale(1) brightness(1.2) invert(1);
+  opacity: 0.4;
+}
+```
+
+Do NOT apply `filter: grayscale(0)` on individual hover. The grayscale-to-color-on-hover pattern feels gimmicky in 2026.
+
+---
+
+## Performance
+
+- Use SVGs — sharp at any size, tiny file size
+- Set explicit `width` and `height` attributes — prevents layout shift
+- `will-change: transform` on the marquee track
+- Lazy-load below-fold logos with `loading="lazy"`

package/skills/ima2-front/references/mobile-ux.md

@@ -0,0 +1,144 @@
+# Mobile UX Rules (MANDATORY for consumer/landing pages)
+
+Mobile is NOT "desktop squished down." It is a different interaction model with different constraints, different user posture, and different conversion mechanics. These rules apply to any page serving mobile traffic.
+
+---
+
+## Thumb Zone Geometry
+
+49% of users hold their phone with one hand. The bottom 40% of the screen is the natural thumb reach zone ("easy"), the middle 40% is comfortable, and the top 20% is hard to reach.
+
+```
+┌────────────────────┐
+│   HARD TO REACH    │  ← top 20%: status bar, back nav, secondary info
+│                    │
+│   COMFORTABLE      │  ← middle 40%: content, scrollable area
+│                    │
+│   EASY / NATURAL   │  ← bottom 40%: primary CTA, tab bar, key actions
+└────────────────────┘
+```
+
+Rules:
+- Primary CTA → bottom 80% of viewport (easy + comfortable zones), or sticky-bottom
+- Secondary actions (share, bookmark, settings) → top or overflow menu
+- Destructive actions (delete, cancel) → require confirmation, never in thumb zone default
+- FAB (floating action button) → bottom-right, 56px, 16px from edges
+
+## Touch Targets (MANDATORY)
+
+| Element | Minimum Size | Recommended |
+|---------|-------------|-------------|
+| Buttons | 44 x 44px | 48 x 48px |
+| Form inputs | 44px height | 48px height |
+| List items (tappable) | 44px height | 48-56px height |
+| Icon buttons | 44 x 44px (including padding) | 48 x 48px |
+| Links in body text | 44px touch area (padding) | — |
+| Spacing between targets | 8px minimum | 12px |
+
+Never rely on hover states for mobile — there is no hover. Every hover-revealed element needs a tap-accessible alternative.
+
+## Sticky CTA Pattern (conversion pages)
+
+On landing/marketing pages longer than 2 screen heights, the primary CTA scrolls out of view. Fix:
+
+```html
+<div class="fixed bottom-0 inset-x-0 p-4 bg-white/90 backdrop-blur-sm border-t
+            pb-[calc(1rem+env(safe-area-inset-bottom))] z-40 md:hidden">
+  <button class="w-full h-12 rounded-lg bg-primary text-white font-semibold">
+    Get Started
+  </button>
+</div>
+```
+
+Rules:
+- Show only on mobile (< 768px)
+- Appear after user scrolls past the hero CTA (use IntersectionObserver)
+- Semi-transparent background so content beneath is visible
+- Include safe-area bottom padding
+- Do NOT show if the hero CTA is still visible
+
+## Mobile Section Composition
+
+Section order and density must adapt for mobile — not just stack unchanged.
+
+### CTA Placement
+- Hero: CTA visible without scroll (MANDATORY — same as desktop)
+- After first proof/testimonial block: repeat CTA
+- After FAQ/objection handling: final CTA
+- Desktop can have 5-8 sections between CTAs. Mobile: max 3 sections between CTAs.
+
+### Proof Proximity
+On desktop, users tolerate claim → feature → feature → proof. On mobile, every claim needs proof within 1 scroll:
+- Feature claim → immediately followed by testimonial, stat, or screenshot
+- No more than 2 consecutive "claim" sections without evidence
+
+### Section Density on Mobile
+- Max content per mobile section: 1 heading + 1 paragraph (≤60 words) + 1 visual or CTA
+- Long feature lists (>4 items): horizontal scroll-snap cards or accordion, not vertical list
+- Pricing: 1 card visible at a time with swipe or tab selector
+- Testimonials: swipe carousel, not stacked cards
+
+### Content That Changes on Mobile
+- Desktop side-by-side comparison → mobile tab selector or accordion
+- Desktop data table → mobile card list or horizontal scroll
+- Desktop multi-column footer → mobile accordion sections
+- Desktop image gallery grid → mobile horizontal scroll-snap
+
+## Mobile Hero Constraints
+
+The mobile hero has ~390 x 600px of usable space. It must:
+- Headline: max `text-3xl` (1.875rem), max 2 lines
+- Subtext: max 15 words (not 20 — mobile has less width per line)
+- CTA: visible without scroll, full-width button preferred
+- Hero image: max 60vh, or background with overlay text
+- No decorative elements (trust badges, taglines below CTA, scroll cues)
+
+If the desktop hero has a side-by-side layout, mobile MUST stack: image first (if product/visual), text first (if story/narrative).
+
+## Bottom Sheet Pattern
+
+Mobile form selects and pickers use the same dropdown design-layer skin
+(`dropdown-layer.md` FE-DROPDOWN-LAYER-01) rendered as a bottom sheet: no
+nested scrolling, preserved form semantics and keyboard/AT behavior, and a tap
+path for anything hover-spawned on desktop.
+
+For mobile actions that need more space than a button but less than a full page:
+
+```
+┌──────────────────────┐
+│ ──── (drag handle)   │
+│                      │
+│ Action title         │
+│ Option 1             │
+│ Option 2             │
+│ Option 3             │
+│                      │
+│ [Cancel]             │
+└──────────────────────┘
+```
+
+Rules:
+- Max height: 70vh (user must see the page behind it)
+- Drag handle visible at top center
+- Close on backdrop tap or swipe down
+- No nested scrolling (if content is too long, use a full page instead)
+- `overscroll-behavior: contain` to prevent background scroll
+
+## Mobile Form Rules
+
+- One input per row (never side-by-side on mobile)
+- Use correct `inputmode`: `tel` for phone, `numeric` for zip/PIN, `email` for email, `url` for URLs
+- Label above input, not inside (placeholder-only labels are inaccessible)
+- Auto-advance between short fields (OTP, phone segments)
+- Submit button full-width, sticky-bottom for long forms
+- Error messages inline below the field, not in a toast or alert
+- Keyboard-aware: scroll the active input into view above the keyboard
+
+## Portrait Media Guidance
+
+Mobile is portrait-first. Images optimized for desktop landscape crop poorly on mobile.
+
+- Hero images: prepare portrait crop (4:5 or 3:4) for mobile, landscape (16:9 or 3:2) for desktop
+- Product images: square (1:1) works for both orientations
+- Background textures: use CSS `object-position` to control crop focal point
+- Video: provide portrait version or use `object-fit: cover` with careful framing

package/skills/ima2-front/references/performance-budget.md

@@ -0,0 +1,106 @@
+# Performance Budget
+
+## Core Web Vitals Targets
+
+| Metric | Good | Needs Work | Poor | Measures |
+|--------|------|------------|------|----------|
+| LCP | ≤ 2.5s | ≤ 4.0s | > 4.0s | Hero load time |
+| INP | ≤ 200ms | ≤ 500ms | > 500ms | Input responsiveness |
+| CLS | ≤ 0.1 | ≤ 0.25 | > 0.25 | Visual stability |
+
+- Every page targets "Good" on all three
+- LCP element: identify early, preload it
+- INP: never block main thread > 50ms
+- CLS: every image/video/embed needs explicit `width`+`height` or `aspect-ratio`
+
+## Bundle Size Budgets
+
+| Resource | Budget (compressed) |
+|----------|-------------------|
+| Total page weight | <= 500KB first load (landing motion media exempt - see FE-MEDIA-BUDGET-01) |
+| JavaScript (per route) | ≤ 150KB |
+| CSS (total) | ≤ 50KB |
+| Hero image | <= 100KB (landing motion media exempt - see FE-MEDIA-BUDGET-01) |
+| Images (above fold) | <= 200KB (landing motion media exempt - see FE-MEDIA-BUDGET-01) |
+| Web fonts | ≤ 100KB |
+
+- Measure compressed (gzip/brotli) sizes
+- Tree-shake: `import { x } from 'lib'`, never `import lib`
+- Dynamic import for below-fold: `lazy(() => import('./Modal'))`
+- Bundle analyzer mandatory for builds > 200KB JS
+
+## Motion Media Budget Exemption (FE-MEDIA-BUDGET-01) (DEFAULT)
+
+On LANDING-bucket surfaces (see `motion.md` FE-MOTION-BUCKET-01), motion media
+is exempt from byte-cap rows with no byte ceiling: autoplay loop video,
+scroll-scrub video, frame sequences, and large hero imagery. Budget freedom is
+not correctness freedom: Core Web Vitals field gates remain supreme (LCP <= 2.5s,
+INP <= 200ms, CLS <= 0.1).
+
+This exemption applies only when the loading mechanics hold:
+- Poster-first LCP; the poster itself counts toward the hero image budget.
+- Lazy or Intersection Observer-gated loading outside first paint.
+- `prefers-reduced-motion` and `prefers-reduced-data` fallbacks to poster/still.
+- Stable layout; no CLS from media swap.
+
+Heavy media still needs a product reason plus the mechanics above. Do not ship
+large video, frame sequences, or heavy hero imagery just because the byte cap is
+exempt.
+
+## Font Loading
+
+```html
+<link rel="preload" href="/fonts/primary.woff2" as="font" type="font/woff2" crossorigin>
+```
+
+```css
+@font-face {
+  font-family: 'Primary';
+  src: url('/fonts/primary.woff2') format('woff2');
+  font-display: swap;
+  unicode-range: U+0020-007F, U+AC00-D7AF;
+}
+```
+
+- `font-display: swap` for body, `optional` for decorative
+- Preload only the primary font file
+- Subset: Latin + target script only
+- Max 2 families, 4 weights total
+- Self-host when possible
+
+## Image Optimization
+
+| Format | Use For | Quality |
+|--------|---------|---------|
+| WebP | Photos, complex | 75-85% |
+| AVIF | Photos (modern) | 65-75% |
+| SVG | Icons, logos | N/A |
+| PNG | Screenshots, transparency | Lossless |
+
+- `<picture>` with AVIF → WebP → fallback for hero
+- `loading="lazy"` below-fold, `loading="eager" fetchpriority="high"` for hero
+- Max 2x display size for retina
+- Responsive `srcset` + `sizes` for content images
+
+## Build-Time Gates
+
+- Lighthouse Performance score is advisory smoke only; CWV field metrics are the gate
+- Bundle regression: fail if JS increases > 10KB
+- Image audit: flag > 200KB, excluding declared landing motion-media assets (frame sequences, posters of IO-gated video)
+- Unused CSS: flag > 5KB dead CSS
+
+## Runtime Rules
+
+- No `querySelectorAll` in scroll/resize handlers
+- Debounce scroll: 100ms min, `requestAnimationFrame` for visual
+- Intersection Observer for lazy loading
+- `content-visibility: auto` on below-fold sections
+
+## Pre-flight
+
+- [ ] Hero image <= 100KB, `fetchpriority="high"`, explicit dimensions; landing motion media exempt per FE-MEDIA-BUDGET-01 when poster-first/loading mechanics hold
+- [ ] Below-fold images have `loading="lazy"`
+- [ ] No JS bundle > 150KB compressed
+- [ ] `font-display: swap` + `preload` on primary font
+- [ ] Every `<img>`/`<video>` has `width`+`height`
+- [ ] Lighthouse Performance score is advisory smoke only; CWV field metrics are the gate

package/skills/ima2-front/references/preflight-full.md

@@ -0,0 +1,58 @@
+# Full Pre-Flight Checklist (launch/audit depth)
+
+Companion to `dev-frontend/SKILL.md` §14. The router keeps the minimum blocking gates;
+this file is the full launch/audit list. Production surfaces only (the work classifier).
+
+## Design & composition
+- [ ] Domain-correct direction chosen and committed
+- [ ] Product surface, locale, density, asset need, soft 3D gate, motion intensity classified
+- [ ] Anti-slop patterns enforced (SKILL §5)
+- [ ] Oversized hero text avoided unless a true hero surface
+- [ ] Required assets are real, semantic, rendered — not generic decoration
+- [ ] Soft 3D/miniature/character assets pass domain and semantic gates
+- [ ] Eyebrow count ≤ ceil(sectionCount / 3) (layout-discipline.md)
+- [ ] Section layout diversity: ≥4 different families per 8 sections
+- [ ] Color/shape/theme locks consistent across all sections (consistency-locks.md)
+
+## Responsive & mobile
+- [ ] Mobile layout collapse guaranteed with per-section-type rules (layout-discipline.md § Responsive Transforms)
+- [ ] Full-height sections use `min-h-[100dvh]` not `h-screen`
+- [ ] Page containment: `max-w-[1400px] mx-auto` (responsive-viewport.md)
+- [ ] Tested at 768px (tablet) and 1024px (split-screen) plus mobile/desktop
+- [ ] Touch targets ≥ 44px on mobile; no hover-only interactions (mobile-ux.md)
+- [ ] Responsive images use `srcset`/`sizes` or `<picture>` (responsive-viewport.md)
+- [ ] Safe-area padding on fixed elements: `env(safe-area-inset-*)`
+
+## States & behavior
+- [ ] Loading, empty, and error states provided
+- [ ] State classified before adding store/Context/Effect/cache (SKILL §12)
+- [ ] Effects sync with external systems; derived state is not Effect-synced
+- [ ] Container queries considered before viewport-query or JS layout workarounds
+- [ ] View transitions respect reduced motion
+- [ ] shadcn components follow local registry and token conventions
+- [ ] AI UI states honest: no fake streaming, citations, or tool calls
+- [ ] Forms validate with schema and show field-level errors (SKILL §8)
+- [ ] Focus management on modals and popovers (SKILL §7)
+- [ ] Interactive components isolated as Client Components (if RSC)
+- [ ] Error Boundaries wrap major sections, not the entire app (SKILL §13)
+
+## Korean-first
+- [ ] CJK typography and Korean UX writing rules followed (korea-2026.md, ux-writing-ko.md)
+- [ ] `word-break: keep-all`; `text-wrap: balance` on short descriptors
+- [ ] Rendered screenshot check for lone particles/endings ("합니다.", "화.") at target viewports
+
+## SEO, theme, i18n
+- [ ] SEO meta present for public pages (title, description, canonical, OG) — seo-baseline.md
+- [ ] JSON-LD structured data matches page type
+- [ ] Theme toggle works: light/dark/system, no FOWT — theme-switching.md
+- [ ] All colors use CSS custom properties (theme-ready)
+- [ ] i18n: no hardcoded strings, CSS logical properties, Intl API — i18n-global.md
+
+## Performance & verification
+- [ ] Core Web Vitals field gate: LCP <= 2.5s, INP <= 200ms, CLS <= 0.1 - performance-budget.md
+- [ ] Lighthouse Performance score is advisory smoke only; CWV field metrics are the gate; no JS bundle > 150KB compressed
+- [ ] Hero image preloaded, below-fold images lazy-loaded; landing motion media exempt from byte caps only when FE-MEDIA-BUDGET-01 poster-first/loading mechanics hold
+- [ ] Desktop/mobile/narrow screenshots checked for overlap, clipping, asset rendering
+- [ ] No captured third-party asset (reference-capture.md) in the shipped build; capture manifest present for any reference captures
+- [ ] Accessibility deep pass: modals trap focus, live regions — a11y-patterns.md
+- [ ] Stack-specific rules followed (references/stacks/)

package/skills/ima2-front/references/product-density.md

@@ -0,0 +1,53 @@
+# Product Density
+
+Choose density before choosing visual style. Many frontend failures happen because a working tool is treated like a campaign page.
+
+## Density Profiles
+
+| Profile | Surface | Default |
+| --- | --- | --- |
+| D1 | Campaign / editorial | expressive type, large media, low density |
+| D2 | Landing / brand | strong first-viewport asset, concise copy |
+| D3 | Consumer app | mobile-first, short labels, sticky actions |
+| D4 | Productivity tool | task-first, moderate density, clear states |
+| D5 | SaaS dashboard | dense panels, filters, tables, saved views |
+| D6 | Admin / ops | compact controls, stable navigation, repeat actions |
+| D7 | Finance / analytics | high trust, tabular numbers, explainable changes |
+| D8 | Developer console | code/data density, logs, inspectable state |
+
+### Cross-Density Enforcement (MANDATORY)
+
+If Design Read declares page kind != SaaS/dashboard/admin:
+- Stats rows (e.g., "368 오름 / 1,950m 한라산") — BANNED
+- Metric comparison grids — BANNED
+- Feature checkbox tables — BANNED
+- Use narrative content blocks instead of data-dump sections
+
+## Rules
+
+- D1-D2 may use hero-scale typography and strong imagery.
+- D3-D4 should prioritize the main workflow within the first viewport.
+- D5-D8 should avoid decorative card stacks and oversized headings.
+- Dense does not mean cramped. Use separators, hierarchy, table density controls, and stable toolbars.
+- Keep repeated-work UI predictable. Surprise belongs in campaigns, not operations.
+
+## Dashboard Defaults
+
+Prefer:
+
+- tables with sort/filter
+- split panes
+- compact metric rows
+- visible state and timestamps
+- saved filters/views
+- inline editing when safe
+- clear empty/loading/error states
+
+Avoid:
+
+- every metric boxed in a separate floating card
+- giant hero headers
+- chart decoration with no decision value
+- one-note color palettes
+- motion that slows repeated workflows
+

package/skills/ima2-front/references/prototype-variants.md

@@ -0,0 +1,54 @@
+# Prototype Variants — Runnable UI Choice Protocol
+
+Use this when the user wants to compare designs, when visual direction is uncertain,
+or when `iterative-design.md` calls for multiple variants.
+
+## Boundary
+
+- `iterative-design.md` owns creative divergence: what directions to try and how to
+  kill/mutate them.
+- This file owns the runnable mechanism: where variants live, how the user switches
+  between them, how screenshots are verified, and how temporary code is removed.
+
+## Required Shape
+
+Sequence: runnable structural variants come AFTER the pre-code concept lock
+(`ima2-uiux` UX-CONCEPT-GEN-01 mockup synthesis) and only when structural
+uncertainty genuinely survives that lock.
+
+1. Build at least 3 structurally different variants. A color swap, copy tweak, icon
+   swap, or same card grid with different spacing is not a variant.
+2. Prefer the existing target page/context so data, routing, constraints, and layout
+   pressure are real.
+3. Use a throwaway route only when no host page exists or the host page would create
+   unrelated risk.
+4. Expose variants with a stable `?variant=` URL parameter, plus an on-screen switcher
+   or keyboard shortcut when useful for review.
+5. Keep variant state deterministic. Reloading the same URL must show the same option.
+
+## Variant Quality Gate
+
+Each variant should differ in at least two structural dimensions:
+
+- navigation or information architecture
+- layout rhythm and density
+- primary interaction model
+- visual hierarchy
+- content grouping
+- motion or transition model
+
+Do not count these as structural differences: theme color only, font only, card radius
+only, copy tone only, or swapping illustration assets while keeping the same layout.
+
+## Verification
+
+- Capture screenshots for every variant at the relevant desktop and mobile viewport.
+- Check text fit, overlap, scroll containment, and empty/error/loading states when
+  those states are in scope.
+- If a variant is interactive, click through the primary path once before presenting it.
+
+## Cleanup
+
+After the user selects a winner, fold the winning direction into production code and
+remove the loser variants, switcher, temporary route, and prototype-only fixtures unless
+the user explicitly asks to keep a gallery.