start-vibing 4.1.2 → 4.3.0

package/template/.claude/skills/super-design/references/design-intelligence-rubric.md

@@ -0,0 +1,376 @@
+# Design Intelligence Rubric
+
+> The missing layer between WCAG/Nielsen checklists and "does this feel
+> designed or vibecoded?" — used by sd-audit as Phase 3g.
+
+## Why this exists
+
+A UI can pass axe (zero WCAG violations), Nielsen (10/10 heuristics green),
+Lighthouse (100 perf score) and still be visually horrible: card-stacked mobile
+dashboards, microtext tables on phones, no visual hierarchy, shadcn defaults
+slapped onto every surface with zero variant discipline, inline arbitrary
+pixel values everywhere. This rubric codifies those **implicit** criteria.
+
+Every category is scored **0–10** per page × viewport. Total score → a single
+**design-intelligence score (DIS)** 0–100. Scores below 60 auto-flag MEDIUM
+findings; below 40 auto-flag HIGH.
+
+## Evidence requirement
+
+Each category's score MUST cite ≥1 piece of evidence from the audit session:
+- **SHOT** (screenshot path)
+- **CSS** (computed style excerpt)
+- **DOM** (snapshot quote)
+- **CODE** (source file + line, via Grep, for vibecode detection)
+
+A score without evidence is invalid. Auditor records `n/a` instead of guessing.
+
+---
+
+## Category 1 — Visual hierarchy (weight 1.0)
+
+**Question:** On this view, what is the single primary goal? Is it the most
+dominant element visually?
+
+| Score | Criteria |
+|---|---|
+| 10 | One dominant element ≥ 2× larger or distinctly heavier than rest. Supporting info subordinate. Example: Cash App balance. |
+| 7  | Primary clear but competing CTAs present. |
+| 4  | Multiple equal-weight elements; user has to hunt. |
+| 0  | Flat wall of cards/tables, no signal of where to look. |
+
+**Detect:** `browser_evaluate` → collect computed `fontSize`, `fontWeight`, `lineHeight`, `color` of h1–h6, buttons, key metrics. Compute size-dominance ratio. Ratio > 2 → 10. Ratio < 1.3 → ≤4.
+
+**Example fail (beats-market):** admin dashboard mobile — 10 equal-weight metric cards, no hero. Score: 2.
+
+---
+
+## Category 2 — Density calibration per viewport (weight 1.2)
+
+**Question:** Does information density match the device context?
+
+| Viewport | Expected primary entities visible above fold |
+|---|---|
+| Mobile 375×812 | 6–8 compact rows OR 1 hero + 4–5 rows |
+| Tablet 768×1024 | 8–12 rows or 4 cards in 2×2 |
+| Desktop 1440×900 | 12–20+ rows or data-dense tables |
+
+**Score:**
+- 10 if density within ±20% of target
+- 5 if half or double target
+- 0 if <25% of target (wasteful) or >3× (cramped illegible)
+
+**Detect:** Count `role=listitem | region | article` elements with `getBoundingClientRect` intersecting viewport. Compare to viewport target.
+
+**Example fail (beats-market):** admin dashboard mobile — 3 cards above fold (target 6–8). Score: 3. Orders mobile = 20 rows visible but microtext = also fail (see Category 7).
+
+---
+
+## Category 3 — Consistency: spacing scale (weight 0.8)
+
+**Question:** Do paddings, margins, gaps come from a scale (4/8px or 0.25rem) or are they arbitrary magic numbers?
+
+**Detect:**
+- `browser_evaluate` → collect computed `padding`, `margin`, `gap` from ≥50 elements.
+- Grep codebase for `p-\[\d+px\]`, `m-\[\d+px\]`, `gap-\[\d+px\]` (Tailwind arbitrary values).
+- Count: on-scale vs off-scale.
+
+| Score | Criteria |
+|---|---|
+| 10 | 95%+ values on a 4/8 scale; no arbitrary pixel values in code |
+| 7 | 80–95% on-scale; a few arbitrary values in leaf components |
+| 4 | 50–80% on-scale; arbitrary values common |
+| 0 | Random pixel values everywhere; no visible scale |
+
+---
+
+## Category 4 — Consistency: typography scale (weight 0.8)
+
+Same method for font-size, font-weight, line-height. Look for `text-\[\d+px\]` and arbitrary font-size. Expected: 6–10 sizes total in a designed system; 30+ sizes = vibecoded.
+
+---
+
+## Category 5 — Consistency: color palette (weight 0.8)
+
+**Detect:**
+- Collect computed `color`, `background-color`, `border-color` from ≥100 elements.
+- Unique colors count. <15 = disciplined. 30+ = vibecoded.
+- Grep for `#[0-9a-f]{6}`, `rgb\(`, Tailwind arbitrary colors.
+
+| Score | Criteria |
+|---|---|
+| 10 | ≤12 distinct colors, all from tokens |
+| 7 | 12–20 colors, mostly tokens |
+| 4 | 20–30 colors |
+| 0 | 30+ colors, raw hex/rgb inline |
+
+---
+
+## Category 6 — Whitespace & breathing room (weight 0.7)
+
+**Question:** Does content have room to breathe, or is it crammed?
+
+**Detect:** Compute average `padding-inline + margin-inline` per content block. Compare to container width. Measure content-to-chrome ratio.
+
+| Score | Criteria |
+|---|---|
+| 10 | Content 60–75% of width, 25–40% whitespace |
+| 7 | Content 75–85% |
+| 4 | Content 85–95% OR <50% (too sparse) |
+| 0 | Content touching edges, no breathing |
+
+---
+
+## Category 7 — Text legibility (weight 1.2)
+
+**Detect:** `browser_evaluate` → collect `fontSize` computed px. Find minimum across visible text.
+
+| Viewport | Min body | Min meta | Min input |
+|---|---|---|---|
+| Mobile | 16px | 13px | 16px (iOS zoom floor) |
+| Desktop | 14px | 12px | 14px |
+
+| Score | Criteria |
+|---|---|
+| 10 | All text meets mins |
+| 5 | One or two elements below by ≤1px |
+| 0 | Widespread microtext (tables, chips, meta) below min |
+
+**Example fail (beats-market):** orders mobile — table cells computed at ~8px. Score: 0.
+
+---
+
+## Category 8 — CTA hierarchy (weight 1.0)
+
+**Question:** Is there ONE primary CTA per view?
+
+**Detect:** Count buttons with `variant=default | primary | filled` OR bg-primary class. >1 above fold = competing.
+
+| Score | Criteria |
+|---|---|
+| 10 | Single primary CTA, rest secondary/ghost |
+| 7 | Single primary + 1 competing |
+| 4 | 2–3 competing primaries |
+| 0 | Every button styled primary |
+
+Reference: Baymard PDP — 51% of e-commerce pages fail due to competing CTAs.
+
+---
+
+## Category 9 — State coverage (weight 1.1)
+
+Per page, does the UI handle: default / loading / empty / error / success?
+
+**Detect per scenario:**
+- Loading: Grep source for `isLoading`, `pending`, `Skeleton`, `aria-busy`.
+- Empty: Grep for `isEmpty`, `EmptyState`, zero-result ternaries.
+- Error: Grep for `role="alert"`, error boundaries, `onError`.
+
+| Score | Criteria |
+|---|---|
+| 10 | 5/5 states rendered or demonstrably coded |
+| 8 | 4/5 (usually missing success toast) |
+| 5 | 3/5 (missing empty + error) |
+| 0 | Only default; fetch returns broken UI on failure |
+
+---
+
+## Category 10 — Touch targets (mobile only, weight 1.0)
+
+**Detect:** `browser_evaluate` → get `getBoundingClientRect` of every clickable. Count targets < 44×44 px.
+
+| Score | Criteria |
+|---|---|
+| 10 | 100% targets ≥ 44×44 OR 24×24 with 8px+ gap |
+| 7 | 80–99% compliant |
+| 4 | 50–80% compliant (common: icon-only buttons) |
+| 0 | Widespread <24px targets |
+
+---
+
+## Category 11 — Motion & feedback (weight 0.6)
+
+**Question:** Do interactions give feedback? Are animations tasteful and respect `prefers-reduced-motion`?
+
+**Detect:**
+- `browser_evaluate` with `matchMedia('(prefers-reduced-motion: reduce)')` + check for `transition` / `animation` on interactive elements.
+- Missing hover/focus feedback on buttons = major fail.
+- >3s animations = excessive.
+
+| Score | Criteria |
+|---|---|
+| 10 | Hover/focus/active feedback everywhere; animations ≤300ms; reduced-motion respected |
+| 7 | Most interactions feedback; reduced-motion partial |
+| 4 | Some interactions static; reduced-motion ignored |
+| 0 | No hover/focus feedback at all OR autoplay video + parallax with no disable |
+
+---
+
+## Category 12 — Nav pattern matches platform (weight 1.0)
+
+| Viewport | Expected nav |
+|---|---|
+| Mobile (≤768) | Bottom tab bar (3–5), full-screen menus, gesture back |
+| Tablet | Hybrid (collapsible sidebar or top tabs) |
+| Desktop | Persistent sidebar or top navbar with search |
+
+**Detect:** On mobile viewport, check for `<nav>` in fixed bottom position. On desktop, fixed left sidebar OR top header with nav.
+
+| Score | Criteria |
+|---|---|
+| 10 | Nav matches platform convention |
+| 5 | Hybrid but functional (e.g., bottom FAB + hamburger) |
+| 0 | Hamburger-only on mobile OR bottom tabs on desktop |
+
+---
+
+## Category 13 — Table-on-mobile detection (weight 1.2, mobile only)
+
+**Detect:** At ≤768px, find `<table>` with >3 visible columns OR `display: table` containers with horizontal scroll AND text < 13px.
+
+| Score | Criteria |
+|---|---|
+| 10 | No table or table transformed to card-per-row |
+| 5 | Table present but scrolls clean with sticky first col |
+| 0 | Squashed desktop table with microtext |
+
+**Example fail (beats-market):** admin orders mobile — 8-col desktop table rendered at 375px with ~8px text. Score: 0.
+
+---
+
+## Category 14 — Modal/sheet appropriateness (weight 0.8)
+
+| Viewport | Expected modal pattern |
+|---|---|
+| Mobile | Bottom sheet (slide-up) or full-screen with close top-left |
+| Tablet | Centered dialog OR bottom sheet |
+| Desktop | Centered dialog |
+
+**Detect:** Open every `role=dialog` trigger. Measure position + dimensions. On mobile, centered dialog with close in top-right = fail.
+
+| Score | Criteria |
+|---|---|
+| 10 | Correct per viewport |
+| 5 | Centered on mobile but within reach |
+| 0 | Unreachable thumb-zone close, wrong pattern for device |
+
+---
+
+## Category 15 — Color semantics (weight 0.6)
+
+**Detect:** Collect colors used on: error messages, success states, warnings, info. Red = error? Green = success? Or decorative-only?
+
+| Score | Criteria |
+|---|---|
+| 10 | Semantic colors distinct and consistent across app |
+| 5 | Used but inconsistent (red elsewhere as brand) |
+| 0 | No semantic color system |
+
+---
+
+## Category 16 — Design-system coherence (weight 1.1)
+
+**The meta-category.** Does the app LOOK like it was designed by one team with one vision? Or does it look like a collection of shadcn defaults?
+
+**Detect (aesthetic signal):**
+- Does at least one of: custom color palette, custom font pairing, custom spacing rhythm, custom radius language, custom motion language, custom illustration/icon set EXIST?
+- Grep package.json for ≥1 of: `typeui.sh`, `framer-motion`, custom fonts beyond system, Lottie, MagicUI, Aceternity, custom token file.
+
+| Score | Criteria |
+|---|---|
+| 10 | Strong identity — you could recognize this app from a cropped screenshot |
+| 7 | Some identity (brand color + maybe custom font) |
+| 4 | shadcn defaults + 1 accent color |
+| 0 | Pure shadcn defaults, zero customization, looks like `npx shadcn-ui@latest init` |
+
+**When score ≤4:** recommend a typeui.sh aesthetic skill OR a frontend-design
+session. See `design-skills-catalog.md`.
+
+---
+
+## Category 17 — Vibecode detection (weight 1.0)
+
+**Question:** Does the code follow patterns (components, variants, tokens)
+or is it hand-assembled divs with inline styles?
+
+**Detect (source grep):**
+- Count `<div className="..."` without surrounding component → raw-div score
+- Count inline `style={{` → inline-style count
+- Count `@media` queries inline vs breakpoint tokens
+- Count arbitrary Tailwind values (`\[\d+px\]`, `\[#[0-9a-f]+\]`)
+- Check if shadcn components are wrapped into domain components (MetricRow, OrderCard) or used raw per page
+- Check if types are co-located in `types/` vs inline `any`
+
+| Score | Criteria |
+|---|---|
+| 10 | Domain components, design tokens, typed props, variants via CVA |
+| 7 | Some composition, some raw shadcn usage |
+| 4 | Mostly raw primitives, inconsistent composition |
+| 0 | Flat page files with 500+ lines of inline JSX; zero reuse |
+
+---
+
+## Scoring formula
+
+```
+DIS = Σ(score_i × weight_i) / Σ(weight_i) × 10
+
+weight_sum = 14.8
+max_raw = 148.0 → normalized to 100
+
+Example (beats-market admin dashboard mobile):
+  C1 hierarchy: 2 × 1.0 = 2.0
+  C2 density:   3 × 1.2 = 3.6
+  C3 spacing:   7 × 0.8 = 5.6
+  C4 type:      6 × 0.8 = 4.8
+  C5 color:     7 × 0.8 = 5.6
+  C6 whitespace:4 × 0.7 = 2.8
+  C7 legibility:8 × 1.2 = 9.6
+  C8 CTA:       6 × 1.0 = 6.0
+  C9 states:    4 × 1.1 = 4.4
+  C10 touch:    6 × 1.0 = 6.0
+  C11 motion:   5 × 0.6 = 3.0
+  C12 nav:      4 × 1.0 = 4.0
+  C13 table:   10 × 1.2 = 12.0 (no table on dashboard)
+  C14 modal:    6 × 0.8 = 4.8
+  C15 color-sem:6 × 0.6 = 3.6
+  C16 coherence:3 × 1.1 = 3.3
+  C17 vibecode: 4 × 1.0 = 4.0
+  raw = 85.1 → DIS = 57.5 → MEDIUM severity
+```
+
+## Output format
+
+Write `.super-design/sessions/<id>/design-intelligence.json`:
+
+```json
+{
+  "pages": [
+    {
+      "page_url": "/admin",
+      "viewport": "375x812",
+      "categories": {
+        "visual_hierarchy": { "score": 2, "evidence": ["screens/admin_mobile.png", "styles/admin_mobile.json"], "notes": "10 equal-weight metric cards, no hero" },
+        "density": { "score": 3, "evidence": ["screens/admin_mobile.png"], "notes": "Only 3 metrics above fold; target 6-8" }
+      },
+      "dis": 57.5,
+      "severity": "MEDIUM",
+      "top_findings": ["F-0042", "F-0043", "F-0049"]
+    }
+  ],
+  "overall_dis": 54.2,
+  "overall_severity": "MEDIUM",
+  "weakest_categories": ["visual_hierarchy", "density", "design_system_coherence"]
+}
+```
+
+Each category score ≤ 4 SHOULD spawn a finding with `template_id` from the M-family (M1–M15) in `fix-agent-playbook.md`.
+
+## Cross-references
+
+- Mobile-specific categories (C2, C7, C10, C12, C13, C14) reference
+  `.claude/skills/mobile-app-patterns/SKILL.md` for fix patterns.
+- Design-system coherence (C16) references `design-skills-catalog.md` for
+  typeui.sh skill suggestions.
+- Vibecode (C17) references `fix-agent-playbook.md` V-templates (spacing,
+  type, color tokens).

package/template/.claude/skills/super-design/references/design-skills-catalog.md

@@ -0,0 +1,102 @@
+# Design Skills Catalog
+
+> Map of installed design skills and when to recommend each. Used by
+> sd-audit (Category 16 design-system-coherence findings) and sd-fix
+> (when proposing aesthetic realignment above template scope).
+
+## Installed typeui-* skills
+
+All from https://www.typeui.sh/design-skills — already present in
+`.claude/skills/`. Claude auto-invokes them when their description matches
+the task. sd-audit MUST reference them by name in findings; sd-fix MUST
+mention them as optional realignment paths when design-system-coherence
+score ≤ 4.
+
+| Skill | Best for | Visual signature | When to recommend |
+|---|---|---|---|
+| **typeui-dashboard** | Admin panels, data apps, SaaS | Dark theme, cloud-platform density (AWS/GCP feel), data-first | DIS C16 fail on admin/dashboard routes |
+| **typeui-application** | Developer tools, productivity | Vercel/GitHub-inspired, clean neutrals, high information density | SaaS products without strong identity |
+| **typeui-enterprise** | B2B workflows, compliance, finance | Clean, high-contrast, conservative | Procurement-facing, corporate |
+| **typeui-ant** | Form-heavy enterprise | Structured, predictable, Ant Design-adjacent | CRM, admin with many forms |
+| **typeui-clean** | Marketing sites, simple products | Minimalist, generous whitespace | Pre-launch landing pages |
+| **typeui-bento** | Feature grids, portfolios | Modular grid blocks | Homepage feature sections |
+| **typeui-bold** | Consumer brands, challenger products | Strong typography, vivid color, confidence | Startups differentiating vs incumbents |
+| **typeui-artistic** | Creative tools, design products | Expressive type, unusual layouts | Non-enterprise, vibe-forward |
+| **typeui-dramatic** | Portfolios, agencies, brand sites | High-contrast, theatrical | Hero-heavy marketing |
+| **typeui-neobrutalism** | Gen-Z, indie brands | Raw borders, hard shadows, bold | Statement brands |
+| **typeui-paper** | Content, editorial, reading | Paper-textured, print-like | Blogs, publications |
+| **typeui-doodle** | Learning, kids, playful | Hand-drawn, sketch feel | Education, creative tools |
+
+## How each skill gets applied
+
+Each typeui-* skill contains:
+- **Design tokens** (colors, spacing, radius, shadows) as CSS variables
+- **Component variants** adapted to shadcn/ui structure
+- **Layout patterns** demonstrated
+- **Do/Don't examples**
+
+When Claude invokes a skill (via matching description or explicit mention),
+it follows the skill's specific tokens + patterns instead of defaults.
+
+## Other design-related skills installed
+
+| Skill | Purpose | Cross-ref |
+|---|---|---|
+| **mobile-app-patterns** | Duolingo/Linear/Arc mobile patterns | Mandatory for mobile DIS scoring |
+| **web-design-guidelines** | 100+ WCAG + UX rules (Vercel Labs) | Feeds Nielsen + WCAG manual pass |
+| **composition-patterns** | React compound/composition patterns | C17 vibecode detection |
+| **react-best-practices** | Vercel-Labs performance patterns | P-templates |
+| **shadcn-ui** | shadcn component usage | V-templates (variants) |
+| **tailwind-patterns** | Tailwind scale adherence | C3/C4/C5 consistency checks |
+| **frontend-design** (plugin) | Full UI design loop with competitor research | Deep aesthetic reset |
+
+## Selection matrix (used by sd-fix / sd-audit recommendations)
+
+| Current state | Target vibe | Recommend |
+|---|---|---|
+| Vibecoded admin with shadcn defaults | Professional dashboard | `typeui-dashboard` or `typeui-application` |
+| Admin with too many forms | Structured enterprise | `typeui-ant` or `typeui-enterprise` |
+| Landing with no identity | Consumer bold | `typeui-bold` or `typeui-dramatic` |
+| Creative-app landing | Expressive | `typeui-artistic` or `typeui-doodle` |
+| B2B-serious | Conservative | `typeui-enterprise` |
+| Editorial / blog | Readable long-form | `typeui-paper` |
+| Feature-grid homepage | Modular showcase | `typeui-bento` |
+
+## Recommending a skill in a finding
+
+When `design-intelligence.categories.design_system_coherence.score ≤ 4`,
+sd-audit MUST add a non-blocking advisory finding:
+
+```json
+{
+  "id": "F-NNNN",
+  "rule": "design-system-coherence",
+  "severity": 2,
+  "risk_for_fix": "HIGH",
+  "finding": "UI uses pure shadcn defaults with no identity. Recommend applying a design skill to establish visual language.",
+  "template_id": "DSC-1",
+  "advisory_only": true,
+  "recommended_skills": ["typeui-dashboard", "typeui-application"],
+  "why": "Admin/dashboard context; dark theme already present; data density matches cloud-platform skills.",
+  "application": "User runs /simplify or a frontend-design session with the chosen skill active — this is not auto-fixable, needs human design decision."
+}
+```
+
+Do NOT auto-apply design skills via sd-fix — aesthetic changes are always
+HIGH risk and require human sign-off. The finding is informational:
+sd-fix emits it into fix-report.md as "Proposed aesthetic direction" with
+a preview capability (sd-research already has screenshots of competitors
+in similar aesthetics to show reference).
+
+## Integration with frontend-design plugin
+
+If the user runs `/frontend-design` after super-design, the plugin can
+read `design-intelligence.json` and pre-load the `recommended_skills`
+automatically as seed context.
+
+## References
+
+- typeui.sh catalog — https://www.typeui.sh/design-skills
+- shadcn/ui — https://ui.shadcn.com
+- Karri Saarinen, Quality — https://linear.app/now/why-is-quality-so-rare
+- Vercel Design Engineering — https://vercel.com/blog/design-engineering-at-vercel

package/template/.claude/skills/super-design/templates/fix-history.md.tpl

@@ -2,15 +2,16 @@
 
 **Counts:** Applied {{applied}} · Proposed {{proposed}} · Skipped {{skipped}} · Failed {{failed}}
 **Base:** `{{base_sha}}` · **Tip:** `{{tip_sha}}`
+**Visual report:** [`sessions/{{session_id}}/fix-report.md`](./sessions/{{session_id}}/fix-report.md) — before/after screenshots per finding
 
 ### Applied
-| Finding | Category | Files | Commit |
-|---|---|---|---|
+| Finding | Category | Files | Commit | Before/After |
+|---|---|---|---|---|
 {{applied_table}}
 
 ### Proposed (awaiting approval)
-| Finding | Category | Files | Patch |
-|---|---|---|---|
+| Finding | Category | Files | Patch | Before |
+|---|---|---|---|---|
 {{proposed_table}}
 
 ### Skipped (HIGH risk — tracked as issues)
@@ -19,8 +20,8 @@
 {{skipped_table}}
 
 ### Failed (rolled back)
-| Finding | Gate | Reason |
-|---|---|---|
+| Finding | Gate | Reason | Before |
+|---|---|---|---|
 {{failed_table}}
 
 ---

package/template/.claude/skills/super-design/templates/fix-report.md.tpl

@@ -0,0 +1,165 @@
+# Fix report — `{{session_id}}`
+
+**Date:** {{session_date}}
+**Branch:** `{{branch}}`
+**Base:** `{{base_sha}}` · **Tip:** `{{tip_sha}}`
+**Audit source:** [`findings.json`](../../../.super-design/sessions/{{session_id}}/findings.json)
+
+## Summary
+
+| Status | Count |
+|---|---|
+| Applied | {{applied}} |
+| Proposed (awaiting approval) | {{proposed}} |
+| Skipped (HIGH risk → issues) | {{skipped}} |
+| Failed (rolled back) | {{failed}} |
+
+---
+
+## Applied fixes — before / after
+
+{{#each applied_findings}}
+### {{id}} — {{rule}}{{#if wcag_criterion}} · WCAG {{wcag_criterion}}{{/if}}{{#if nielsen_heuristic}} · Nielsen H{{nielsen_heuristic}}{{/if}}
+
+- **Page:** `{{page_url}}` · **Viewport:** {{viewport}}
+- **Severity:** {{severity}}/4 · **Risk:** {{risk_for_fix}} · **Template:** `{{template_id}}`
+- **Commit:** [`{{commit_sha_short}}`]({{commit_url}}) — `{{commit_subject}}`
+- **Verification:** technical {{technical_result}} · semantic {{semantic_result}}
+
+**Problem**
+
+{{finding}}
+
+**Evidence quote (from audit snapshot):**
+
+```
+{{snapshot_quote}}
+```
+
+**Before**
+
+Full page:
+
+![before-full F-{{id}}](./screens/{{id}}_before_full.png)
+
+{{#if before_element}}
+Element:
+
+![before-element F-{{id}}](./screens/{{id}}_before_element.png)
+{{/if}}
+
+**After**
+
+Full page:
+
+![after-full F-{{id}}](./screens/{{id}}_after_full.png)
+
+{{#if after_element}}
+Element:
+
+![after-element F-{{id}}](./screens/{{id}}_after_element.png)
+{{else if after_element_missing_reason}}
+_Element screenshot skipped: {{after_element_missing_reason}}_
+{{/if}}
+
+**What changed**
+
+```diff
+{{file_diff_summary}}
+```
+
+Files touched:
+{{#each files_affected}}
+- `{{this}}`
+{{/each}}
+
+{{#if after_console_errors}}
+**Console errors after fix:** {{after_console_errors.length}} — see `fix-results.json` for verbatim.
+{{/if}}
+
+---
+
+{{/each}}
+
+{{#if proposed_findings.length}}
+## Proposed fixes (awaiting approval)
+
+Before-only evidence is shown because these are not yet applied.
+
+{{#each proposed_findings}}
+### {{id}} — {{rule}}
+
+- **Page:** `{{page_url}}` · **Viewport:** {{viewport}}
+- **Severity:** {{severity}}/4 · **Risk:** {{risk_for_fix}}
+- **Patch:** [`proposals/{{id}}.patch`](../../../.super-design/sessions/{{session_id}}/proposals/{{id}}.patch)
+
+**Problem**
+
+{{finding}}
+
+**Before**
+
+![before F-{{id}}](./screens/{{id}}_before_full.png)
+
+**Proposed change**
+
+```diff
+{{proposed_diff}}
+```
+
+---
+
+{{/each}}
+{{/if}}
+
+{{#if skipped_findings.length}}
+## Skipped (HIGH risk — tracked as issues)
+
+{{#each skipped_findings}}
+- **{{id}}** · {{rule}} · `{{page_url}}` · Issue [#{{issue_number}}]({{issue_url}}) — {{skip_reason}}
+{{/each}}
+
+{{/if}}
+
+{{#if failed_findings.length}}
+## Failed (rolled back)
+
+{{#each failed_findings}}
+### {{id}} — {{rule}}
+
+- **Failed gate:** {{failed_gate}} ({{gate_reason}})
+- **Rolled back:** yes · **Commit sha:** none (reset before commit)
+
+**Before**
+
+![before F-{{id}}](./screens/{{id}}_before_full.png)
+
+**Attempted change (reverted)**
+
+```diff
+{{attempted_diff}}
+```
+
+---
+
+{{/each}}
+{{/if}}
+
+## Reproduce locally
+
+```bash
+git switch fix/{{session_id}}
+git log --oneline {{base_sha}}..HEAD
+git diff {{base_sha}}..HEAD -- <file>
+```
+
+Re-run audit to confirm findings cleared:
+
+```bash
+# From repo root
+super-design --scope <page_url>
+```
+
+---
+
+_Generated by `sd-fix` using `fix-report.md.tpl`. Screenshots captured via Playwright MCP at the same viewport as the original audit._