start-vibing 4.1.2 → 4.3.0

package/template/.claude/skills/mobile-app-patterns/SKILL.md

@@ -0,0 +1,237 @@
+---
+name: mobile-app-patterns
+description: >
+  Best-in-class mobile UI/UX patterns inspired by Duolingo, Linear, Arc, Raycast,
+  Notion Mobile, Superhuman. MUST BE USED when designing, auditing, or fixing
+  any mobile viewport (≤768px) — especially dashboards, lists, forms, modals,
+  nav. Replaces "responsive-web-on-a-phone" thinking with genuine mobile-native
+  patterns. Referenced by sd-audit (design-intelligence rubric), sd-fix
+  (M-template fixes), and sd-research (component extraction from competitors).
+version: 1.0.0
+---
+
+# mobile-app-patterns
+
+## Philosophy
+
+A mobile screen is **not** a shrunken desktop. It is a **thumb-reach device** used in 2–10 second sessions with one hand, often while walking/waiting/scrolling. Every pattern here is derived from apps people actually keep on their home screen.
+
+## Reference apps (study these before designing)
+
+| App | Why | Patterns to extract |
+|---|---|---|
+| **Duolingo** | Highest D7 retention in learning category | Compact metric rows, streak flames, XP hero, bottom nav with tab bubbles, full-screen lesson flow, celebration animations |
+| **Linear Mobile** | Fastest feedback SaaS on mobile | Minimal chrome, swipe-to-action on list rows, bottom sheet for create, command-K style quick switcher |
+| **Arc Mobile / Search** | Search-first nav | No bottom tabs — single tap to search/command, gesture stack for back |
+| **Raycast iOS** | Power-user density | Compact list rows with inline metadata, command palette, no decorative chrome |
+| **Notion Mobile** | Heavy content on small screen | Block-based editor, swipe to nest/unnest, floating action button for quick capture |
+| **Superhuman** | Speed as the aesthetic | No loading states visible — optimistic everything, keyboard shortcuts respected on iPad, split-swipe archive/snooze |
+| **Cash App** | Financial density without tables | Big number hero, compact transaction rows (avatar + name + amount + relative time), bottom-sheet send/receive |
+| **Spotify** | Media density | Horizontal scroll rails (not cards in column), sticky now-playing bar, bottom tab nav |
+
+## Core mobile patterns
+
+### 1. Lists over cards (CRITICAL)
+
+**Rule:** On mobile dashboards, `role=listitem` rows beat `role=region` cards for metrics, entities, and history. Cards waste 40–60% of viewport height on padding+radius+shadow for a single data point.
+
+```tsx
+// ANTI-PATTERN (what the beats-market admin dashboard did wrong)
+<div className="flex flex-col gap-3">
+  <Card><CardHeader>Total Users</CardHeader><CardContent>16</CardContent></Card>
+  <Card><CardHeader>Producers</CardHeader><CardContent>5</CardContent></Card>
+  <Card><CardHeader>Orders</CardHeader><CardContent>18</CardContent></Card>
+  {/* 10+ cards = endless scroll, no density */}
+</div>
+
+// GOOD (Duolingo/Linear/Cash App style)
+<ul className="divide-y divide-border">
+  {metrics.map(m => (
+    <li key={m.id} className="flex items-center justify-between py-3 px-4">
+      <div className="flex items-center gap-3">
+        <Icon name={m.icon} className="size-5 text-muted-foreground" />
+        <span className="text-sm text-muted-foreground">{m.label}</span>
+      </div>
+      <span className="text-base font-semibold tabular-nums">{m.value}</span>
+    </li>
+  ))}
+</ul>
+
+// EVEN BETTER for a hero metric on mobile (Cash App style)
+<section className="px-4 pt-6 pb-4">
+  <p className="text-sm text-muted-foreground">Total revenue</p>
+  <h1 className="text-4xl font-bold tabular-nums">R$1.389</h1>
+  <p className="text-xs text-muted-foreground mt-1">+12% vs last month</p>
+</section>
+<ul className="divide-y">{/* supporting metrics as compact rows */}</ul>
+```
+
+**Density target:** A mobile viewport (390×844) should fit **at least 6–8 metrics above the fold**, not 2–3.
+
+### 2. Hero + compact list (dashboard pattern)
+
+```
+┌─────────────────────────┐
+│ ☰    Dashboard      👤 │  Header (56px fixed)
+├─────────────────────────┤
+│                         │
+│   Total Revenue         │  HERO: 1 big number
+│   R$ 1,389.00           │  that matters most
+│   +12% this month  ↗    │
+│                         │
+├─────────────────────────┤
+│ 👥  Users          16 │  Compact metric rows
+│ 🎵  Producers       5 │  (44px each)
+│ 📦  Active Packs   18 │
+│ 🛒  Orders         18 │
+│ 🔄  Refunds         0 │
+│ 📊  Refund Rate  0.0% │
+│ 🛡️  DMCA Claims     0 │
+│ 💬  Open Tickets    1 │
+├─────────────────────────┤
+│ [Home][Metrics][Orders] │  Bottom tab nav (56px)
+└─────────────────────────┘
+```
+
+### 3. Bottom nav (NOT hamburger) for top-level nav
+
+- 3–5 tabs max. More → move to secondary screen via "More" tab.
+- Each tab = a destination, not an action.
+- Fixed position, 56–64px tall, with safe-area inset.
+- Active state: fill icon + label always visible (not hidden).
+
+```tsx
+<nav className="fixed inset-x-0 bottom-0 z-40 border-t bg-background pb-[env(safe-area-inset-bottom)]">
+  <ul className="flex h-14">
+    {tabs.map(t => (
+      <li key={t.id} className="flex-1">
+        <Link
+          href={t.href}
+          aria-current={active === t.id ? 'page' : undefined}
+          className="flex h-full flex-col items-center justify-center gap-1 text-xs"
+        >
+          <t.Icon className={cn('size-5', active === t.id ? 'fill-current' : '')} />
+          <span className={active === t.id ? 'font-semibold' : 'text-muted-foreground'}>{t.label}</span>
+        </Link>
+      </li>
+    ))}
+  </ul>
+</nav>
+```
+
+### 4. Bottom sheets (NOT centered modals) for actions
+
+- Centered dialog on mobile = thumb cannot reach top-right close button.
+- Bottom sheet slides up from the bottom, close via drag-down or button at top.
+- Use `<dialog>` or Vaul/Radix + `vaul-drawer` libs.
+
+### 5. Full-screen flows (NOT multi-step modals)
+
+Onboarding, lesson completion, checkout, create-entity — all should be **full-screen pages** that replace the current view, with a close/back in the top-left, not modal overlays.
+
+Duolingo lesson = full-screen. Cash App send = full-screen. Linear create-issue = bottom sheet → expand to full. Never a centered modal trying to cram a form.
+
+### 6. Swipe actions on list rows
+
+Archive / Delete / Snooze / Complete = left or right swipe on the row. Exposes discoverability via slight peek on first render.
+
+Lib: `react-swipeable-list` / custom pointer-events handler. Always provide a long-press or trailing `[…]` button as a11y fallback.
+
+### 7. Pull-to-refresh on scrollable lists
+
+Native iOS/Android pattern. Every list that fetches server data should implement it. Lib: `react-pull-to-refresh` or Framer Motion gestures.
+
+### 8. Typography scale for mobile
+
+- Body: **16px** (never smaller — iOS triggers zoom on focus for <16px inputs)
+- Meta / captions: 14px minimum, 13px absolute floor for tabular dense lists
+- Headings: 20/24/32/40 — large hero numbers allowed (44–56px)
+- Line-height: 1.4 body, 1.2 headings, 1.5 long-form reading
+
+### 9. Touch targets
+
+- **44×44 px minimum** (Apple HIG) or 48dp (Material) — NOT the WCAG 24px floor
+- 8px gap between adjacent targets
+- Full-width list rows: the whole row is the target, not just the text
+
+### 10. Data tables → convert on mobile
+
+Tables with >3 columns CANNOT fit at 375px. Transform:
+
+| Original desktop | Mobile replacement |
+|---|---|
+| Users table (name, email, role, status, date, actions) | List of rows with avatar + primary text + compact metadata stack + trailing `[⋯]` menu |
+| Orders table (id, buyer, items, total, payment, refund, downloads, actions) | Card per order: buyer + total prominent, metadata as chips, CTA row at bottom |
+| Data grid | Virtualized list OR horizontal scroll with sticky first column (only if truly needed) |
+
+## Mobile anti-patterns (auto-flag in audits)
+
+| Anti-pattern | Why bad | Fix |
+|---|---|---|
+| Cards in `flex-col` for metrics | Wastes 40–60% vertical space | Compact list rows with divider |
+| Desktop table <768px | Unreadable microtext or horizontal scroll hell | Card-per-row OR list with primary+meta |
+| Hamburger menu as only nav | Hides primary destinations behind 1+ tap | Bottom tab bar (3–5 tabs) |
+| Centered modal with close in top-right | Unreachable by thumb | Bottom sheet with drag handle |
+| Input `font-size < 16px` | iOS Safari zooms in on focus | Use 16px or `font-size: max(16px, 1rem)` |
+| Fixed header + fixed footer > 25% height | Leaves <75% for content | Collapse header on scroll (framer shrink) |
+| Multi-column layout <600px | Nothing fits | Single column or horizontal rail |
+| Hover-only affordances | Touch has no hover | Gate `@media (hover: hover)` + tap equivalent |
+| Tiny close buttons (<24×24) | Missed taps | 44×44 hit area even if icon is smaller |
+| Toast in top-right | Thumb can't dismiss | Bottom-center toast with swipe-down |
+| 100vh anywhere | iOS Safari URL bar breaks it | `100svh` / `100dvh` with `-webkit-fill-available` fallback |
+| Pull-to-refresh inside inner scroll | Conflicts with browser pull | `overscroll-behavior: contain` |
+
+## Competitor reference for mobile patterns by domain
+
+| Your app type | Study these on mobile |
+|---|---|
+| Admin / SaaS dashboard | Linear, Height, Plane, Vercel dashboard |
+| Marketplace (buyer) | Instagram Shop, Depop, Vinted, Mercari |
+| Marketplace (seller) | Shopify Mobile, Etsy Seller, Depop |
+| E-commerce checkout | Shop App, Amazon, Stripe Checkout (in a WebView) |
+| Social / community | Discord, Slack, Twitter (X), BlueSky |
+| Learning / habit | Duolingo, Brilliant, Finch, Streaks |
+| Finance / fintech | Cash App, Revolut, Mercury, Ramp |
+| Productivity | Notion, Linear, Raycast, Things 3 |
+| Media | Spotify, Apple Music, YouTube |
+
+## How to use this skill
+
+- **sd-audit** references these anti-patterns as M-category findings (M1–M12).
+- **sd-fix** applies M-templates with code snippets directly from this skill.
+- **sd-research** studies competitors' mobile viewports against this pattern library, not just home pages.
+- **frontend-design** plugin cross-references this skill when generating mobile UI.
+
+## Mandatory mobile audit checklist (≤375px viewport)
+
+```
+□ Primary nav is bottom tabs (3-5), not hamburger-only
+□ Dashboards use hero + compact list, not card stack
+□ Tables transformed to card-per-row or compact list
+□ No input has font-size < 16px
+□ Every interactive target ≥ 44×44 px
+□ Modals are bottom sheets or full-screen, not centered
+□ No hover-only state; every hover has a tap equivalent
+□ Loading states exist for async flows
+□ Empty states exist for zero-data cases
+□ Error states exist for server failures
+□ Safe-area insets respected (iOS notch, home indicator)
+□ Text uses 100svh / 100dvh (not 100vh) for full-height
+□ Scroll containers use overscroll-behavior: contain
+□ Pull-to-refresh implemented on primary list views
+□ Swipe actions discoverable (peek on first render)
+□ Back gesture (iOS) works via browser history
+□ Keyboard does not overlap input (visualViewport API)
+□ Touch targets 8px+ apart
+□ Long-press fallback for swipe actions
+□ Bottom sheet CTAs sticky above safe area
+```
+
+## References
+
+- Linear Method — https://linear.app/method
+- Vercel Design Engineering — https://vercel.com/blog/design-engineering-at-vercel
+- iOS HIG Touch Targets — https://developer.apple.com/design/human-interface-guidelines/layout
+- Material 3 Bottom App Bar — https://m3.material.io/components/bottom-app-bar/overview
+- NN/g Mobile UX — https://www.nngroup.com/topic/mobile-and-tablet-design/
+- Baymard Mobile Checkout — https://baymard.com/checkout-usability

package/template/.claude/skills/super-design/SKILL.md

@@ -8,7 +8,7 @@ description: >
   UX audit (WCAG 2.2 AA, Nielsen heuristics, Baymard, CWV), and synthesized
   overview. Re-audits only what changed since last run. On explicit user request,
   applies surgical fixes with full rollback.
-version: 0.4.0
+version: 0.6.0
 ---
 
 # super-design
@@ -18,14 +18,36 @@ version: 0.4.0
 Four-phase pipeline with 6 specialist agents:
 
 1. **Market research** (sd-research) — auto-detects niche from repo, finds 5–10
-   competitors, extracts design language, produces market-analysis.md.
-2. **UI/UX audit** (sd-audit) — drives browser via Playwright MCP directly,
-   applies Nielsen's 10 heuristics, WCAG 2.2 AA, Baymard (if e-commerce), and
-   Core Web Vitals. Produces findings.json with SHOT+QUOTE+SEL+VAL evidence.
-3. **Synthesis** (sd-synthesis) — unifies research + audit into overview.md.
+   competitors, extracts design language AND component vocabulary (buttons,
+   nav, cards, modals, forms, tokens — per competitor × mobile+desktop),
+   produces market-analysis.md + component-comparison.md.
+2. **UI/UX audit** (sd-audit) — drives browser via Playwright MCP directly.
+   Five layers:
+   - Route discovery + static snap (Nielsen + WCAG 2.2 AA + Baymard + CWV)
+   - **Step 2.5 component/modal/flow discovery** (Phase A inventory, B modal
+     enumeration, C flow exercising, D state matrix, E form coverage) — this
+     is where modal contents, empty/loading/error states, and flow errors
+     get real evidence instead of "checklist hypothetical".
+   - **Step 3g design-intelligence scoring** (17-category rubric → DIS 0–100)
+     catches implicit best practices checklists miss (cards-in-flex-col,
+     low density, weak CTA hierarchy, vibecode smell).
+   - **Step 3h mobile-native audit** (21-item Duolingo/Linear/Arc/Cash-App
+     checklist) — replaces "responsive-web-on-a-phone" thinking.
+   - C16 ≤ 4 → design-skill advisory finding citing typeui-* selection matrix.
+   Produces findings.json + design-intelligence.json with SHOT+QUOTE+SEL+VAL.
+3. **Synthesis** (sd-synthesis) — unifies research + audit + design-intelligence
+   into overview.md (per-page DIS table + executive summary).
 4. **Fix** (sd-fix + two-stage verify) — optional. Applies safe fixes with
    technical gates (types/lint/tests) AND semantic verification ("does this
-   fix actually resolve the finding, or just mask it?").
+   fix actually resolve the finding, or just mask it?"). Template families:
+   A1-A15 a11y · V1-V8 design · U1-U10 ux · P1-P10 perf · **M1-M15 mobile**
+   (cards-in-flex-col → compact list, table-on-mobile → card-per-row,
+   centered-modal → bottom-sheet, etc.) · **DSC-1 design-skill advisory**
+   (proposes typeui-* direction, never auto-applies — HIGH risk). After each
+   successful fix, re-drives Playwright to capture an after-screenshot (full
+   page + element crop) and emits `docs/super-design/sessions/<id>/fix-report.md`:
+   a self-contained visual diff with before/after images, file diffs,
+   verification status, and commit SHA per finding.
 
 ## Entry flow
 

package/template/.claude/skills/super-design/references/component-flow-discovery.md

@@ -0,0 +1,258 @@
+# Component, Modal & Flow Discovery Playbook
+
+> How sd-audit systematically exercises EVERY interactive element before
+> running heuristics. Without this, the audit only sees static page snaps
+> and misses modal contents, flow state, hover/focus/active variants, and
+> loading/empty/error states.
+>
+> This playbook runs as **Step 2.5** in sd-audit, after route discovery
+> and before per-viewport heuristic passes.
+
+## Why this matters
+
+Static screenshots of pages show ~30% of what users interact with. The other 70%
+lives inside modals, drawers, dropdowns, command palettes, error flows, empty
+states, loading states, hover menus, focus rings. A page can score 95/100 on
+Lighthouse and be unusable because its "Create" modal is broken — and the
+auditor never opened it.
+
+## Discovery phases
+
+### Phase A — Interactive inventory (per page × viewport)
+
+After navigating and dismissing banners:
+
+```js
+// browser_evaluate
+(() => {
+  const roots = [
+    '[role="button"]',
+    'button',
+    'a[href]',
+    '[role="link"]',
+    '[role="menuitem"]',
+    '[role="tab"]',
+    '[role="switch"]',
+    '[role="checkbox"]',
+    '[role="radio"]',
+    '[aria-haspopup]',
+    '[aria-expanded]',
+    '[data-trigger]',
+    '[data-state]',
+    'input',
+    'select',
+    'textarea',
+    'summary',
+  ];
+  const items = [];
+  roots.forEach(sel => {
+    document.querySelectorAll(sel).forEach(el => {
+      if (!el.offsetParent && getComputedStyle(el).position !== 'fixed') return;
+      const r = el.getBoundingClientRect();
+      if (r.width === 0 || r.height === 0) return;
+      items.push({
+        selector: sel,
+        tag: el.tagName,
+        role: el.getAttribute('role'),
+        name: el.getAttribute('aria-label') || el.textContent?.trim().slice(0, 60) || '',
+        type: el.getAttribute('type'),
+        haspopup: el.getAttribute('aria-haspopup'),
+        expanded: el.getAttribute('aria-expanded'),
+        disabled: el.disabled || el.getAttribute('aria-disabled') === 'true',
+        rect: { x: r.x, y: r.y, w: r.width, h: r.height },
+      });
+    });
+  });
+  return items;
+})()
+```
+
+Save to `.super-design/sessions/<id>/interactive/<slug>_<vp>.json`.
+
+Classify each:
+- **navigation** — links, tabs, back buttons
+- **action** — primary CTAs, submit, delete, save
+- **trigger** — opens modal/drawer/dropdown (`aria-haspopup`, `data-trigger`)
+- **input** — form fields
+- **state-toggle** — switches, checkboxes, expanders
+
+### Phase B — Modal & overlay discovery
+
+For each trigger from Phase A:
+
+```
+1. Pre-click snapshot (already have from Phase 1)
+2. browser_click({ ref })   # click the trigger
+3. browser_wait_for(text="<expected modal content>") or 500ms
+4. browser_snapshot → save as snapshots/<slug>_<vp>_<triggerName>_open.yaml
+5. browser_take_screenshot fullPage + element-scoped → screens/components/
+6. browser_console_messages(level="error") → record
+7. Inside open modal, run Phase A again (nested inventory)
+8. Look for [role="dialog"] or [data-state="open"] to confirm it opened
+9. Exercise modal internals:
+   - Tab through to find focus trap
+   - Press Escape to confirm dismiss
+   - Resize to mobile — check if it becomes bottom-sheet
+10. Close modal (button or Escape)
+11. Re-snapshot → confirm background restored, focus returned to trigger
+```
+
+**Modals a junior agent misses:**
+- Confirmation dialogs (delete confirm, logout confirm)
+- Date pickers (calendar popover)
+- Color pickers
+- Combobox dropdowns (autocomplete search)
+- Popover menus (dropdown with options)
+- Sheet / drawer (slide-in from right or bottom)
+- Command palette (Cmd+K)
+- Tooltips (hover-triggered on desktop)
+- Toast notifications (programmatic — trigger an action that causes one)
+- Error modals (submit invalid form)
+- Share sheets
+- File upload dialogs (click input[type=file])
+
+### Phase C — Flow exercising
+
+A **flow** is a multi-step user journey. Every app has 3–10 critical flows.
+sd-audit must auto-discover and exercise them.
+
+**Auto-discover flows from routes + component names:**
+
+| Route / name hint | Flow |
+|---|---|
+| `/login`, `/signin`, `/auth` | Login flow (happy + wrong password + locked account) |
+| `/register`, `/signup` | Registration flow |
+| `/forgot`, `/reset` | Password reset flow |
+| `/onboarding`, `/welcome` | First-run flow |
+| `/checkout`, `/cart` | Checkout flow (incl. errors: declined card, validation) |
+| `/dashboard`, `/home` (authed) | Post-auth landing → primary CTA flow |
+| List route (`/users`, `/orders`) | CRUD — create, edit, view, delete, filter, search, paginate |
+| Detail route (`/users/:id`) | Edit flow, delete flow, related actions |
+| `/settings`, `/profile` | Profile edit, preference toggles, account delete |
+| `/support`, `/help`, `/chat` | Messaging flow |
+
+**Per flow:**
+
+```
+1. Plan steps (list of expected screens + actions)
+2. Execute step-by-step:
+   - Navigate / click to advance
+   - Per step: snapshot + screenshot + console
+   - Test error path (invalid input, network error via DevTools)
+   - Test back button preserves state
+3. Capture final success state (confirmation page, toast, redirect)
+4. If flow depends on creating test data, use burner account
+```
+
+Save per-flow artifacts under `.super-design/sessions/<id>/flows/<flow_name>/step_NN_<action>.png`.
+
+### Phase D — State matrix per component
+
+For each UI component class (Button, Input, Card, ListRow, Modal, NavItem…),
+capture:
+
+| State | How to trigger |
+|---|---|
+| default | Initial render |
+| hover | `browser_hover` (desktop only, gate `@media hover`) |
+| focus | Tab to element via `browser_press_key(Tab)` until focused |
+| focus-visible | Same as focus (most systems collapse them now) |
+| active | `browser_press_key` Enter/Space while focused |
+| disabled | Find a disabled example (e.g., form before valid) |
+| loading | Submit form → catch transient state; OR throttle network via DevTools |
+| error | Invalid input + submit |
+| empty | Navigate to route with no data (burner account OR delete all) |
+| success | Complete a flow successfully |
+| selected | Click tab / radio / checkbox that shows selected variant |
+
+Save per component class:
+```
+.super-design/sessions/<id>/components/
+  Button/
+    default.png
+    hover.png
+    focus.png
+    active.png
+    disabled.png
+    loading.png
+  Input/...
+  Modal/...
+```
+
+Output `.super-design/sessions/<id>/component-state-matrix.json`:
+
+```json
+{
+  "Button": {
+    "states_captured": ["default", "hover", "focus", "active", "disabled", "loading"],
+    "states_missing": ["error"],
+    "evidence": { "default": "components/Button/default.png", "..." }
+  },
+  "...": {}
+}
+```
+
+**Missing states → finding.**
+
+### Phase E — Form state coverage
+
+Per form discovered, test:
+1. Empty submit → validation messages
+2. Each field invalid individually → per-field error
+3. All valid → success state
+4. Server error (simulate 500) → error recovery
+5. Network offline → offline handling
+6. Paste into password field → paste NOT blocked
+7. Autocomplete tokens on login fields (`username`, `current-password`, `one-time-code`)
+8. Tab order matches visual order
+9. Submit via Enter key works
+10. Mobile viewport — input zoom behavior (iOS Safari `font-size < 16px`?)
+
+Save: `.super-design/sessions/<id>/forms/<formId>_<scenario>.png`
+
+## Orchestration summary
+
+sd-audit adds this between Step 2 and Step 3:
+
+```
+Step 2.5 — Discovery
+  For each (page, viewport):
+    A. Interactive inventory
+    B. Modal/overlay enumeration (click every trigger)
+    C. Flow exercising (login, CRUD, checkout if applicable)
+    D. Component state matrix
+    E. Form state coverage
+```
+
+This takes 3–5× longer than static-only audit but produces ~3× the findings,
+each with real evidence of failure conditions (not just hypothetical WCAG
+violations on static markup).
+
+## Budget & skipping
+
+For very large apps, scope Phase B/C/D to:
+- Top 5 most-clicked triggers per page (ranked by proximity to primary CTA)
+- Critical flows only (login + checkout + 1 CRUD)
+- 3 component classes minimum (Button, Input, Modal) — rest deferred to full-mode audit
+
+Record what was skipped in `.super-design/sessions/<id>/scope.json` so later
+runs can close the gap.
+
+## Error handling
+
+- **Triggered modal doesn't appear within 2s** — record "trigger broken" finding, move on
+- **Console error after click** — record verbatim, still capture whatever rendered
+- **Focus not trapped** — record a11y violation
+- **Modal close fails** — force navigate away, record "close broken" finding
+
+Never let a broken trigger abort the full audit — isolate and continue.
+
+## Hard rules
+
+1. Every Phase A inventory item must be considered for exercising; skips recorded.
+2. Every modal opened must be screenshotted OPEN + CLOSED.
+3. Every flow must capture at least one error path, not just happy path.
+4. Component state matrix must declare which states are MISSING (not just captured).
+5. Form state coverage — 10 scenarios per form; partial completion records which.
+6. Use ONE Playwright session; reuse across phases; `browser_close` only at end.
+7. Sequential, not parallel. Never spawn parallel tabs.