@su-record/vibe 2.9.23 → 2.9.24

package/skills/design-audit/orchestrator.md

@@ -1,64 +1,64 @@
----
-name: design-audit-orchestrator
-type: orchestrator
-agents: [a11y-auditor, performance-auditor, responsive-auditor, slop-detector, scorer]
----
-
-# Design Audit Orchestrator
-
-## Workflow
-
-### Phase 1: Launch Dimension Auditors
-- **Agent**: a11y-auditor, performance-auditor, responsive-auditor, slop-detector
-- **Input**: Target files or component paths + optional design-context.json
-- **Output**: Per-dimension findings `{dimension, findings[], severity}` scored 0–4
-- **Parallel**: yes — all 4 auditors run simultaneously
-
-### Phase 2: Aggregate Scores
-- **Agent**: scorer
-- **Input**: All 4 dimension results from Phase 1
-- **Output**: Score table (per-dimension + overall), severity-tagged finding list (P0–P3)
-- **Parallel**: no — requires all dimension results
-
-### Phase 3: Generate Report
-- **Agent**: orchestrator (self)
-- **Input**: Scored results from Phase 2
-- **Output**: Prioritized report with P0→P3 sections and per-dimension summaries
-- **Parallel**: no
-
-### Phase 4: Suggest Next Skill
-- **Agent**: orchestrator (self)
-- **Input**: Overall score and dominant failure dimension from Phase 3
-- **Output**: Recommended next skill (`/design-normalize`, `/design-critique`, `/design-polish`)
-- **Parallel**: no
-
-## DAG (Dependency Graph)
-
-```mermaid
-graph TD
-    A[Phase 1a: a11y-auditor] --> E[Phase 2: Scorer]
-    B[Phase 1b: performance-auditor] --> E
-    C[Phase 1c: responsive-auditor] --> E
-    D[Phase 1d: slop-detector] --> E
-    E --> F[Phase 3: Generate Report]
-    F --> G[Phase 4: Next Skill Suggestion]
-```
-
-## Error Handling
-
-| Phase | Failure Mode | Strategy |
-|-------|-------------|----------|
-| Phase 1 | Auditor finds no applicable items (e.g., no images for perf) | Return score 4 (N/A treated as pass) |
-| Phase 1 | Target file unreadable | Skip file, log warning, continue with others |
-| Phase 1 | design-context.json missing | Proceed with defaults, note missing context |
-| Phase 2 | <2 dimension scores returned | Warn user, compute partial overall score |
-| Phase 3 | 0 findings across all dimensions | Output "No issues found" report — do not suppress |
-| Phase 4 | Score at boundary of multiple next-skill suggestions | Present all applicable options ranked by score |
-
-## Scalability Modes
-
-| Mode | When | Agents Used |
-|------|------|-------------|
-| Full | Normal operation | All 4 auditors + scorer |
-| Reduced | Single-concern audit | Target auditor only (e.g., a11y-auditor alone) |
-| Single | Quick slop check | slop-detector only — fast AI-pattern scan |
+---
+name: design-audit-orchestrator
+type: orchestrator
+agents: [a11y-auditor, performance-auditor, responsive-auditor, slop-detector, scorer]
+---
+
+# Design Audit Orchestrator
+
+## Workflow
+
+### Phase 1: Launch Dimension Auditors
+- **Agent**: a11y-auditor, performance-auditor, responsive-auditor, slop-detector
+- **Input**: Target files or component paths + optional design-context.json
+- **Output**: Per-dimension findings `{dimension, findings[], severity}` scored 0–4
+- **Parallel**: yes — all 4 auditors run simultaneously
+
+### Phase 2: Aggregate Scores
+- **Agent**: scorer
+- **Input**: All 4 dimension results from Phase 1
+- **Output**: Score table (per-dimension + overall), severity-tagged finding list (P0–P3)
+- **Parallel**: no — requires all dimension results
+
+### Phase 3: Generate Report
+- **Agent**: orchestrator (self)
+- **Input**: Scored results from Phase 2
+- **Output**: Prioritized report with P0→P3 sections and per-dimension summaries
+- **Parallel**: no
+
+### Phase 4: Suggest Next Skill
+- **Agent**: orchestrator (self)
+- **Input**: Overall score and dominant failure dimension from Phase 3
+- **Output**: Recommended next skill (`/design-normalize`, `/design-critique`, `/design-polish`)
+- **Parallel**: no
+
+## DAG (Dependency Graph)
+
+```mermaid
+graph TD
+    A[Phase 1a: a11y-auditor] --> E[Phase 2: Scorer]
+    B[Phase 1b: performance-auditor] --> E
+    C[Phase 1c: responsive-auditor] --> E
+    D[Phase 1d: slop-detector] --> E
+    E --> F[Phase 3: Generate Report]
+    F --> G[Phase 4: Next Skill Suggestion]
+```
+
+## Error Handling
+
+| Phase | Failure Mode | Strategy |
+|-------|-------------|----------|
+| Phase 1 | Auditor finds no applicable items (e.g., no images for perf) | Return score 4 (N/A treated as pass) |
+| Phase 1 | Target file unreadable | Skip file, log warning, continue with others |
+| Phase 1 | design-context.json missing | Proceed with defaults, note missing context |
+| Phase 2 | <2 dimension scores returned | Warn user, compute partial overall score |
+| Phase 3 | 0 findings across all dimensions | Output "No issues found" report — do not suppress |
+| Phase 4 | Score at boundary of multiple next-skill suggestions | Present all applicable options ranked by score |
+
+## Scalability Modes
+
+| Mode | When | Agents Used |
+|------|------|-------------|
+| Full | Normal operation | All 4 auditors + scorer |
+| Reduced | Single-concern audit | Target auditor only (e.g., a11y-auditor alone) |
+| Single | Quick slop check | slop-detector only — fast AI-pattern scan |

package/skills/design-audit/rubrics/ai-slop-patterns.md

@@ -1,83 +1,83 @@
-# AI Slop Detection — Pattern Reference
-
-Patterns that indicate AI-generated defaults rather than deliberate design decisions. Each entry describes the visual signature and why it signals slop.
-
----
-
-## Pattern 1: Cyan/Neon-on-Dark Accent
-
-**Visual signature**: Electric cyan (`#00D8FF`, `#22D3EE`) or neon green/purple as the sole accent color on a dark gray or near-black background. Often applied to buttons, badges, and chart lines simultaneously.
-
-**Why it's slop**: This palette is the default "tech/SaaS" output for most AI image and code generators. It signals no brand research was done.
-
-**Legitimate exception**: Cyberpunk-themed games, developer tools with a deliberate retro-terminal aesthetic, or products with documented brand guidelines using these colors.
-
----
-
-## Pattern 2: Purple-to-Blue Gradient Hero
-
-**Visual signature**: A full-bleed hero section or page background using a diagonal or radial gradient from `#7C3AED` (purple) to `#2563EB` (blue). Often combined with white or light text and a "glow" effect.
-
-**Why it's slop**: The most overused AI-generated hero background across all categories and industries. Applied without regard for brand personality.
-
-**Legitimate exception**: Brand explicitly uses purple and blue as primary colors with documented rationale.
-
----
-
-## Pattern 3: Hero Metric Template
-
-**Visual signature**: An oversized number (60–80px font, often bold or gradient-colored) with a tiny label below it (`"Active Users"`, `"Revenue"`, `"Uptime"`). Three or four of these arranged in a row as the primary dashboard view.
-
-**Why it's slop**: It's a structural template, not a data visualization decision. Used regardless of whether the numbers are meaningful or whether the user needs them front and center.
-
-**Legitimate exception**: Real-time operational dashboards where these metrics are the primary user task.
-
----
-
-## Pattern 4: Identical 3-Up Card Grid
-
-**Visual signature**: Exactly three cards in a horizontal row, each containing an icon (top-left or centered), a short bold title, and 1–2 lines of description text. Repeated verbatim as a features section, benefits section, or team section.
-
-**Why it's slop**: The 3-up grid is the default content-filling pattern for every AI-generated landing page. It imposes a visual structure regardless of whether the content benefits from comparison.
-
-**Legitimate exception**: Content is genuinely comparative (pricing tiers, product variants), or the grid contains more than 3 genuinely distinct items.
-
----
-
-## Pattern 5: Default Glassmorphism
-
-**Visual signature**: Cards and panels with `backdrop-filter: blur(12px)`, a semi-transparent white or colored background (`rgba(255,255,255,0.1)`), and a subtle border (`rgba(255,255,255,0.2)`). Applied as the primary surface treatment across all cards.
-
-**Why it's slop**: Glassmorphism is a specific aesthetic that requires a layered background to function visually. AI applies it universally as a "modern" default, often on solid-color backgrounds where it produces no effect.
-
-**Legitimate exception**: OS-style UIs, media applications with rich background imagery, or products where glass surfaces are part of a coherent aesthetic system.
-
----
-
-## Pattern 6: Bounce/Elastic Functional Animation
-
-**Visual signature**: UI elements that overshoot their final position with `cubic-bezier` bounce or spring easing during state transitions — modals sliding in with elastic overshoot, buttons that wobble on hover, list items that bounce into view.
-
-**Why it's slop**: Bounce easing communicates playfulness. Applied to functional transitions (modals, form submissions, navigation) it creates a tonally inconsistent experience and feels unpolished in professional contexts.
-
-**Legitimate exception**: Mobile games, children's apps, or products with an explicitly playful brand personality where the animation reinforces brand voice.
-
----
-
-## Pattern 7: Inter/Roboto as Lazy Default
-
-**Visual signature**: Inter or Roboto used as both heading and body font across a product with no visible typography hierarchy differentiation. No font scale customization — using default weights and sizes from the framework.
-
-**Why it's slop**: These fonts are excellent but are chosen by AI because they are safe and system-default-adjacent. Font selection should reflect brand personality and audience expectations.
-
-**Legitimate exception**: Products that have explicitly evaluated their font options and chosen Inter/Roboto for legibility, neutrality, or performance reasons — with documented rationale.
-
----
-
-## Pattern 8: Gradient Text on Metrics/Statistics
-
-**Visual signature**: Key numbers, statistics, or headings rendered with a linear gradient applied to the text itself (`background-clip: text; -webkit-text-fill-color: transparent`), typically the same purple-to-blue or cyan-to-blue range.
-
-**Why it's slop**: Gradient text is visually noisy and reduces readability. It is applied wholesale by AI to make numbers "pop" without considering whether the visual effect serves the data's meaning.
-
-**Legitimate exception**: Brand wordmarks, decorative headings where legibility is secondary to visual impact, or hero statements where the gradient is part of a consistent typographic system.
+# AI Slop Detection — Pattern Reference
+
+Patterns that indicate AI-generated defaults rather than deliberate design decisions. Each entry describes the visual signature and why it signals slop.
+
+---
+
+## Pattern 1: Cyan/Neon-on-Dark Accent
+
+**Visual signature**: Electric cyan (`#00D8FF`, `#22D3EE`) or neon green/purple as the sole accent color on a dark gray or near-black background. Often applied to buttons, badges, and chart lines simultaneously.
+
+**Why it's slop**: This palette is the default "tech/SaaS" output for most AI image and code generators. It signals no brand research was done.
+
+**Legitimate exception**: Cyberpunk-themed games, developer tools with a deliberate retro-terminal aesthetic, or products with documented brand guidelines using these colors.
+
+---
+
+## Pattern 2: Purple-to-Blue Gradient Hero
+
+**Visual signature**: A full-bleed hero section or page background using a diagonal or radial gradient from `#7C3AED` (purple) to `#2563EB` (blue). Often combined with white or light text and a "glow" effect.
+
+**Why it's slop**: The most overused AI-generated hero background across all categories and industries. Applied without regard for brand personality.
+
+**Legitimate exception**: Brand explicitly uses purple and blue as primary colors with documented rationale.
+
+---
+
+## Pattern 3: Hero Metric Template
+
+**Visual signature**: An oversized number (60–80px font, often bold or gradient-colored) with a tiny label below it (`"Active Users"`, `"Revenue"`, `"Uptime"`). Three or four of these arranged in a row as the primary dashboard view.
+
+**Why it's slop**: It's a structural template, not a data visualization decision. Used regardless of whether the numbers are meaningful or whether the user needs them front and center.
+
+**Legitimate exception**: Real-time operational dashboards where these metrics are the primary user task.
+
+---
+
+## Pattern 4: Identical 3-Up Card Grid
+
+**Visual signature**: Exactly three cards in a horizontal row, each containing an icon (top-left or centered), a short bold title, and 1–2 lines of description text. Repeated verbatim as a features section, benefits section, or team section.
+
+**Why it's slop**: The 3-up grid is the default content-filling pattern for every AI-generated landing page. It imposes a visual structure regardless of whether the content benefits from comparison.
+
+**Legitimate exception**: Content is genuinely comparative (pricing tiers, product variants), or the grid contains more than 3 genuinely distinct items.
+
+---
+
+## Pattern 5: Default Glassmorphism
+
+**Visual signature**: Cards and panels with `backdrop-filter: blur(12px)`, a semi-transparent white or colored background (`rgba(255,255,255,0.1)`), and a subtle border (`rgba(255,255,255,0.2)`). Applied as the primary surface treatment across all cards.
+
+**Why it's slop**: Glassmorphism is a specific aesthetic that requires a layered background to function visually. AI applies it universally as a "modern" default, often on solid-color backgrounds where it produces no effect.
+
+**Legitimate exception**: OS-style UIs, media applications with rich background imagery, or products where glass surfaces are part of a coherent aesthetic system.
+
+---
+
+## Pattern 6: Bounce/Elastic Functional Animation
+
+**Visual signature**: UI elements that overshoot their final position with `cubic-bezier` bounce or spring easing during state transitions — modals sliding in with elastic overshoot, buttons that wobble on hover, list items that bounce into view.
+
+**Why it's slop**: Bounce easing communicates playfulness. Applied to functional transitions (modals, form submissions, navigation) it creates a tonally inconsistent experience and feels unpolished in professional contexts.
+
+**Legitimate exception**: Mobile games, children's apps, or products with an explicitly playful brand personality where the animation reinforces brand voice.
+
+---
+
+## Pattern 7: Inter/Roboto as Lazy Default
+
+**Visual signature**: Inter or Roboto used as both heading and body font across a product with no visible typography hierarchy differentiation. No font scale customization — using default weights and sizes from the framework.
+
+**Why it's slop**: These fonts are excellent but are chosen by AI because they are safe and system-default-adjacent. Font selection should reflect brand personality and audience expectations.
+
+**Legitimate exception**: Products that have explicitly evaluated their font options and chosen Inter/Roboto for legibility, neutrality, or performance reasons — with documented rationale.
+
+---
+
+## Pattern 8: Gradient Text on Metrics/Statistics
+
+**Visual signature**: Key numbers, statistics, or headings rendered with a linear gradient applied to the text itself (`background-clip: text; -webkit-text-fill-color: transparent`), typically the same purple-to-blue or cyan-to-blue range.
+
+**Why it's slop**: Gradient text is visually noisy and reduces readability. It is applied wholesale by AI to make numbers "pop" without considering whether the visual effect serves the data's meaning.
+
+**Legitimate exception**: Brand wordmarks, decorative headings where legibility is secondary to visual impact, or hero statements where the gradient is part of a consistent typographic system.

package/skills/design-audit/rubrics/scoring.md

@@ -1,63 +1,63 @@
-# Design Audit — Detailed Scoring Rubric
-
-Each dimension scored 0–4. Score the lowest applicable level that matches observed issues.
-
----
-
-## 1. Accessibility (a11y)
-
-| Score | Criteria |
-|-------|----------|
-| **4** | All interactive elements keyboard-reachable; ARIA roles correct; contrast ≥ 4.5:1 everywhere; all images have meaningful alt text; every form input has a label; focus indicators visible; `aria-live` on dynamic regions; skip-to-content present |
-| **3** | 1–2 minor issues: e.g., one icon missing `aria-label`, or skip link absent on a simple page |
-| **2** | Multiple issues but no complete blockers: e.g., some form inputs unlabeled, focus order inconsistent in one section |
-| **1** | Significant gaps: contrast failures on primary text, keyboard traps present, or no ARIA on custom widgets |
-| **0** | Critical failures: interactive elements unreachable by keyboard, no contrast at all on key text, or screen reader produces nonsense navigation |
-
----
-
-## 2. Performance
-
-| Score | Criteria |
-|-------|----------|
-| **4** | All below-fold images lazy-loaded with `srcset` and modern formats; ≤3 font files with `font-display: swap`; critical CSS inlined; JS code-split at routes; no layout shift on media; no duplicate deps |
-| **3** | 1–2 minor gaps: e.g., one non-critical image missing `loading="lazy"`, or a fourth font file loaded |
-| **2** | Several issues: missing lazy load on multiple images, no `font-display`, or a blocking script in `<head>` |
-| **1** | Major issues: no image optimization at all, large unneeded CSS framework fully loaded, or significant layout shifts |
-| **0** | Critical: blocking JS on `<head>` delays render, images 5× larger than necessary, LCP asset entirely unoptimized |
-
----
-
-## 3. Responsive
-
-| Score | Criteria |
-|-------|----------|
-| **4** | Mobile-first breakpoints; all touch targets ≥ 44×44px; no horizontal scroll at any viewport; typography scales cleanly; container queries used where appropriate; navigation adapts correctly |
-| **3** | 1–2 small gaps: e.g., one touch target slightly under 44px, or minor horizontal overflow on a niche breakpoint |
-| **2** | Several issues: some touch targets too small, typography doesn't scale, navigation doesn't adapt on mobile |
-| **1** | Layout broken at common breakpoints; horizontal scroll present; fixed-width elements causing overflow |
-| **0** | Completely non-responsive: desktop layout forced on mobile, content unreadable at 375px |
-
----
-
-## 4. Theming
-
-| Score | Criteria |
-|-------|----------|
-| **4** | All colors via CSS custom properties; dark mode supported or explicitly opted out with documentation; spacing, radius, and shadows all use design tokens; component variants use data attributes or classes only |
-| **3** | 1–3 hardcoded values in low-visibility areas; no inline styles on primary surfaces |
-| **2** | Multiple hardcoded values scattered through components; some spacing arbitrary; dark mode partial or inconsistent |
-| **1** | Most values hardcoded; design tokens exist but rarely used; inline styles prevalent |
-| **0** | No token system; all values inline or in scattered magic numbers; dark mode completely absent if required |
-
----
-
-## 5. AI Slop Detection
-
-| Score | Criteria |
-|-------|----------|
-| **4** | No AI template patterns; color scheme, typography, and layout reflect deliberate brand choices; animations serve function; design feels intentional and specific to this product |
-| **3** | 1 pattern present but with partial justification (e.g., gradient used sparingly, not as the dominant aesthetic) |
-| **2** | 2–3 patterns present; design leans on AI defaults without clear brand rationale |
-| **1** | 4–5 patterns present; the overall aesthetic is indistinguishable from generic AI-generated UI |
-| **0** | Full AI slop template: neon/cyan accents, purple-blue gradient hero, glassmorphism cards, 3-up icon grids, Inter font, gradient metric text — all present simultaneously |
+# Design Audit — Detailed Scoring Rubric
+
+Each dimension scored 0–4. Score the lowest applicable level that matches observed issues.
+
+---
+
+## 1. Accessibility (a11y)
+
+| Score | Criteria |
+|-------|----------|
+| **4** | All interactive elements keyboard-reachable; ARIA roles correct; contrast ≥ 4.5:1 everywhere; all images have meaningful alt text; every form input has a label; focus indicators visible; `aria-live` on dynamic regions; skip-to-content present |
+| **3** | 1–2 minor issues: e.g., one icon missing `aria-label`, or skip link absent on a simple page |
+| **2** | Multiple issues but no complete blockers: e.g., some form inputs unlabeled, focus order inconsistent in one section |
+| **1** | Significant gaps: contrast failures on primary text, keyboard traps present, or no ARIA on custom widgets |
+| **0** | Critical failures: interactive elements unreachable by keyboard, no contrast at all on key text, or screen reader produces nonsense navigation |
+
+---
+
+## 2. Performance
+
+| Score | Criteria |
+|-------|----------|
+| **4** | All below-fold images lazy-loaded with `srcset` and modern formats; ≤3 font files with `font-display: swap`; critical CSS inlined; JS code-split at routes; no layout shift on media; no duplicate deps |
+| **3** | 1–2 minor gaps: e.g., one non-critical image missing `loading="lazy"`, or a fourth font file loaded |
+| **2** | Several issues: missing lazy load on multiple images, no `font-display`, or a blocking script in `<head>` |
+| **1** | Major issues: no image optimization at all, large unneeded CSS framework fully loaded, or significant layout shifts |
+| **0** | Critical: blocking JS on `<head>` delays render, images 5× larger than necessary, LCP asset entirely unoptimized |
+
+---
+
+## 3. Responsive
+
+| Score | Criteria |
+|-------|----------|
+| **4** | Mobile-first breakpoints; all touch targets ≥ 44×44px; no horizontal scroll at any viewport; typography scales cleanly; container queries used where appropriate; navigation adapts correctly |
+| **3** | 1–2 small gaps: e.g., one touch target slightly under 44px, or minor horizontal overflow on a niche breakpoint |
+| **2** | Several issues: some touch targets too small, typography doesn't scale, navigation doesn't adapt on mobile |
+| **1** | Layout broken at common breakpoints; horizontal scroll present; fixed-width elements causing overflow |
+| **0** | Completely non-responsive: desktop layout forced on mobile, content unreadable at 375px |
+
+---
+
+## 4. Theming
+
+| Score | Criteria |
+|-------|----------|
+| **4** | All colors via CSS custom properties; dark mode supported or explicitly opted out with documentation; spacing, radius, and shadows all use design tokens; component variants use data attributes or classes only |
+| **3** | 1–3 hardcoded values in low-visibility areas; no inline styles on primary surfaces |
+| **2** | Multiple hardcoded values scattered through components; some spacing arbitrary; dark mode partial or inconsistent |
+| **1** | Most values hardcoded; design tokens exist but rarely used; inline styles prevalent |
+| **0** | No token system; all values inline or in scattered magic numbers; dark mode completely absent if required |
+
+---
+
+## 5. AI Slop Detection
+
+| Score | Criteria |
+|-------|----------|
+| **4** | No AI template patterns; color scheme, typography, and layout reflect deliberate brand choices; animations serve function; design feels intentional and specific to this product |
+| **3** | 1 pattern present but with partial justification (e.g., gradient used sparingly, not as the dominant aesthetic) |
+| **2** | 2–3 patterns present; design leans on AI defaults without clear brand rationale |
+| **1** | 4–5 patterns present; the overall aesthetic is indistinguishable from generic AI-generated UI |
+| **0** | Full AI slop template: neon/cyan accents, purple-blue gradient hero, glassmorphism cards, 3-up icon grids, Inter font, gradient metric text — all present simultaneously |

package/skills/design-audit/templates/report.md

@@ -1,88 +1,88 @@
-# Design Audit Report: {{TARGET}}
-
-**Date**: {{DATE}}
-**Auditor**: {{AUDITOR}}
-**Scope**: {{SCOPE_DESCRIPTION}}
-**Design Context**: {{CONTEXT_SOURCE}} (design-context.json / defaults)
-
----
-
-## Scores
-
-| Dimension | Score | Grade | Key Issues |
-|-----------|-------|-------|------------|
-| Accessibility | {{A11Y_SCORE}}/4 | {{A11Y_GRADE}} | {{A11Y_SUMMARY}} |
-| Performance | {{PERF_SCORE}}/4 | {{PERF_GRADE}} | {{PERF_SUMMARY}} |
-| Responsive | {{RESP_SCORE}}/4 | {{RESP_GRADE}} | {{RESP_SUMMARY}} |
-| Theming | {{THEME_SCORE}}/4 | {{THEME_GRADE}} | {{THEME_SUMMARY}} |
-| AI Slop | {{SLOP_SCORE}}/4 | {{SLOP_GRADE}} | {{SLOP_SUMMARY}} |
-| **Overall** | **{{TOTAL_SCORE}}/20** | **{{TOTAL_PCT}}%** | |
-
-Grade scale: 4=Excellent, 3=Good, 2=Moderate, 1=Major Issues, 0=Critical
-
----
-
-## Findings
-
-### P0 — Blocker (breaks functionality)
-
-{{#P0_FINDINGS}}
-- [{{DIMENSION}}] {{DESCRIPTION}} — `{{FILE}}:{{LINE}}`
-{{/P0_FINDINGS}}
-{{#NO_P0}}
-- None
-{{/NO_P0}}
-
-### P1 — Critical (significant UX impact)
-
-{{#P1_FINDINGS}}
-- [{{DIMENSION}}] {{DESCRIPTION}} — `{{FILE}}:{{LINE}}`
-{{/P1_FINDINGS}}
-{{#NO_P1}}
-- None
-{{/NO_P1}}
-
-### P2 — Important (noticeable quality gap)
-
-{{#P2_FINDINGS}}
-- [{{DIMENSION}}] {{DESCRIPTION}} — `{{FILE}}:{{LINE}}`
-{{/P2_FINDINGS}}
-{{#NO_P2}}
-- None
-{{/NO_P2}}
-
-### P3 — Minor (polish opportunity)
-
-{{#P3_FINDINGS}}
-- [{{DIMENSION}}] {{DESCRIPTION}} — `{{FILE}}:{{LINE}}`
-{{/P3_FINDINGS}}
-{{#NO_P3}}
-- None
-{{/NO_P3}}
-
----
-
-## Recommendations
-
-{{#RECOMMENDATIONS}}
-{{INDEX}}. {{RECOMMENDATION}}
-{{/RECOMMENDATIONS}}
-
----
-
-## Next Steps
-
-| Condition | Recommended Skill |
-|-----------|-------------------|
-| Design system inconsistencies found | `/design-normalize` |
-| UX/usability concerns noted | `/design-critique` |
-| Score ≥ 16/20, minor polish only | `/design-polish` |
-
----
-
-## Audit Metadata
-
-- Files scanned: {{FILE_COUNT}}
-- Total findings: {{TOTAL_FINDINGS}} (P0: {{P0_COUNT}}, P1: {{P1_COUNT}}, P2: {{P2_COUNT}}, P3: {{P3_COUNT}})
-- Platform: {{PLATFORM}}
-- Stack: {{STACK}}
+# Design Audit Report: {{TARGET}}
+
+**Date**: {{DATE}}
+**Auditor**: {{AUDITOR}}
+**Scope**: {{SCOPE_DESCRIPTION}}
+**Design Context**: {{CONTEXT_SOURCE}} (design-context.json / defaults)
+
+---
+
+## Scores
+
+| Dimension | Score | Grade | Key Issues |
+|-----------|-------|-------|------------|
+| Accessibility | {{A11Y_SCORE}}/4 | {{A11Y_GRADE}} | {{A11Y_SUMMARY}} |
+| Performance | {{PERF_SCORE}}/4 | {{PERF_GRADE}} | {{PERF_SUMMARY}} |
+| Responsive | {{RESP_SCORE}}/4 | {{RESP_GRADE}} | {{RESP_SUMMARY}} |
+| Theming | {{THEME_SCORE}}/4 | {{THEME_GRADE}} | {{THEME_SUMMARY}} |
+| AI Slop | {{SLOP_SCORE}}/4 | {{SLOP_GRADE}} | {{SLOP_SUMMARY}} |
+| **Overall** | **{{TOTAL_SCORE}}/20** | **{{TOTAL_PCT}}%** | |
+
+Grade scale: 4=Excellent, 3=Good, 2=Moderate, 1=Major Issues, 0=Critical
+
+---
+
+## Findings
+
+### P0 — Blocker (breaks functionality)
+
+{{#P0_FINDINGS}}
+- [{{DIMENSION}}] {{DESCRIPTION}} — `{{FILE}}:{{LINE}}`
+{{/P0_FINDINGS}}
+{{#NO_P0}}
+- None
+{{/NO_P0}}
+
+### P1 — Critical (significant UX impact)
+
+{{#P1_FINDINGS}}
+- [{{DIMENSION}}] {{DESCRIPTION}} — `{{FILE}}:{{LINE}}`
+{{/P1_FINDINGS}}
+{{#NO_P1}}
+- None
+{{/NO_P1}}
+
+### P2 — Important (noticeable quality gap)
+
+{{#P2_FINDINGS}}
+- [{{DIMENSION}}] {{DESCRIPTION}} — `{{FILE}}:{{LINE}}`
+{{/P2_FINDINGS}}
+{{#NO_P2}}
+- None
+{{/NO_P2}}
+
+### P3 — Minor (polish opportunity)
+
+{{#P3_FINDINGS}}
+- [{{DIMENSION}}] {{DESCRIPTION}} — `{{FILE}}:{{LINE}}`
+{{/P3_FINDINGS}}
+{{#NO_P3}}
+- None
+{{/NO_P3}}
+
+---
+
+## Recommendations
+
+{{#RECOMMENDATIONS}}
+{{INDEX}}. {{RECOMMENDATION}}
+{{/RECOMMENDATIONS}}
+
+---
+
+## Next Steps
+
+| Condition | Recommended Skill |
+|-----------|-------------------|
+| Design system inconsistencies found | `/design-normalize` |
+| UX/usability concerns noted | `/design-critique` |
+| Score ≥ 16/20, minor polish only | `/design-polish` |
+
+---
+
+## Audit Metadata
+
+- Files scanned: {{FILE_COUNT}}
+- Total findings: {{TOTAL_FINDINGS}} (P0: {{P0_COUNT}}, P1: {{P1_COUNT}}, P2: {{P2_COUNT}}, P3: {{P3_COUNT}})
+- Platform: {{PLATFORM}}
+- Stack: {{STACK}}