claude-code-workflow 7.2.26 → 7.2.28

package/.claude/skills/team-visual-a11y/roles/focus-auditor/role.md

@@ -0,0 +1,222 @@
+---
+role: focus-auditor
+prefix: FOCUS
+inner_loop: false
+message_types: [state_update]
+---
+
+# Focus & Keyboard Accessibility Auditor
+
+Focus-visible completeness audit. Tab order, focus indicator visibility (3:1 contrast), skip link, focus traps, ARIA live regions, keyboard operability. Produce detailed focus audit report with element-by-element analysis.
+
+## Phase 2: Context & Environment Detection
+
+| Input | Source | Required |
+|-------|--------|----------|
+| Task description | From task subject/description | Yes |
+| Session path | Extracted from task description | Yes |
+| Target (URL or file paths) | From task description CONTEXT | Yes |
+| WCAG level (AA/AAA) | From task description CONTEXT | Yes |
+| .msg/meta.json | <session>/.msg/meta.json | No |
+| Previous audit (re-audit) | <session>/audits/focus/focus-audit-*.md | Only for FOCUS-002+ |
+
+1. Extract session path, target, and WCAG level from task description
+2. Determine audit type from subject: FOCUS-001 -> initial audit, FOCUS-002+ -> re-audit (verification)
+3. Identify target:
+   - URL -> use Chrome DevTools for interactive focus testing
+   - File paths -> read HTML/JSX/Vue/Svelte files for interactive elements
+   - Full site -> enumerate pages from navigation/routes
+4. For re-audit: read previous audit report and fix summary for comparison baseline
+5. Read focus patterns from specs/focus-patterns.md for reference
+
+## Phase 3: Focus Audit Execution
+
+### Step 1: Interactive Element Inventory
+
+**Static analysis** (always):
+- Glob for HTML/JSX/TSX/Vue/Svelte files
+- Extract all interactive elements:
+  - Native focusable: `<a href>`, `<button>`, `<input>`, `<select>`, `<textarea>`, `<details>`
+  - Custom focusable: elements with `tabindex`, `role="button"`, `role="link"`, `role="tab"`, etc.
+  - Modals/dialogs: `role="dialog"`, `role="alertdialog"`, `<dialog>`
+  - Dynamic content areas: `aria-live`, `role="status"`, `role="alert"`
+- Record source location (file:line) and context for each element
+
+**Runtime analysis** (if Chrome DevTools available):
+- `mcp__chrome-devtools__navigate_page({ url: "<target-url>" })`
+- `mcp__chrome-devtools__evaluate_script({ expression: "..." })` to:
+  - Enumerate all focusable elements in DOM order
+  - Check `tabindex` values (0, -1, positive)
+  - Detect focus traps (elements that prevent Tab from escaping)
+
+### Step 2: Tab Order Audit
+
+| Check | Criterion | Standard |
+|-------|-----------|----------|
+| Logical sequence | Tab order follows visual/reading order | WCAG 2.4.3 |
+| No positive tabindex | `tabindex > 0` is an anti-pattern | Best practice |
+| No tab traps | Tab can escape all containers (except modals) | WCAG 2.1.2 |
+| Skip link first | First focusable element is skip-to-content link | WCAG 2.4.1 |
+| All interactive reachable | Every interactive element reachable via Tab | WCAG 2.1.1 |
+
+Flag:
+- `tabindex > 0` (disrupts natural tab order)
+- `tabindex="-1"` on elements that should be focusable
+- Missing `tabindex="0"` on custom interactive elements
+- `outline: none` or `outline: 0` without alternative focus indicator
+
+### Step 3: Focus Indicator Visibility
+
+Per specs/focus-patterns.md:
+
+| Check | Requirement | Standard |
+|-------|-------------|----------|
+| Outline present | At least 2px outline on :focus-visible | WCAG 2.4.7 |
+| Outline contrast | >= 3:1 against adjacent colors | WCAG 2.4.11 |
+| :focus-visible used | Keyboard focus distinct from mouse click | Best practice |
+| Not obscured | Focus indicator not hidden by overlays, sticky headers | WCAG 2.4.11 |
+| Consistent style | Same focus style across similar elements | Best practice |
+
+**CSS analysis**:
+- Search for `:focus`, `:focus-visible`, `:focus-within` rules
+- Check for `outline: none` / `outline: 0` without alternative (box-shadow, border)
+- Verify `:focus:not(:focus-visible) { outline: none; }` pattern (mouse click suppression)
+- Calculate focus indicator contrast against adjacent background
+
+### Step 4: Skip Link Audit
+
+| Check | Requirement |
+|-------|-------------|
+| Exists | `<a href="#main">` or similar as first focusable element |
+| Visually hidden until focus | `position: absolute; left: -9999px` pattern |
+| Visible on focus | Repositions on `:focus` to visible area |
+| Target exists | `#main` or target ID exists in DOM |
+| Functional | Focus moves to main content on activation |
+
+### Step 5: Focus Trap Audit (Modals/Dialogs)
+
+Per specs/focus-patterns.md:
+
+| Check | Requirement | Standard |
+|-------|-------------|----------|
+| Focus moves to dialog | On open, focus moves to first focusable or dialog itself | ARIA Practices |
+| Tab cycles within | Tab/Shift+Tab stay within dialog focusable elements | ARIA Practices |
+| Escape closes | Escape key closes dialog | ARIA Practices |
+| Focus restores | On close, focus returns to trigger element | ARIA Practices |
+| Background inert | Background content not focusable while dialog open | Best practice |
+| Scroll lock | Background scroll locked while dialog open | Best practice |
+
+### Step 6: ARIA Audit
+
+| Element Type | Required ARIA | Standard |
+|-------------|--------------|----------|
+| Buttons | `role="button"` (if not `<button>`), `aria-pressed` (toggle), `aria-expanded` (disclosure) | WCAG 4.1.2 |
+| Dialogs | `role="dialog"`, `aria-modal="true"`, `aria-labelledby` | ARIA Practices |
+| Navigation | `role="navigation"` (if not `<nav>`), `aria-label` for multiple nav regions | WCAG 4.1.2 |
+| Live regions | `aria-live="polite"` (status), `aria-live="assertive"` (errors) | WCAG 4.1.3 |
+| Forms | `aria-required`, `aria-invalid`, `aria-describedby` for errors | WCAG 4.1.2 |
+| Tabs | `role="tablist"`, `role="tab"`, `role="tabpanel"`, `aria-selected` | ARIA Practices |
+| Accordions | `aria-expanded`, `aria-controls` | ARIA Practices |
+
+### Step 7: Keyboard Operability
+
+| Element | Expected Keys | Standard |
+|---------|--------------|----------|
+| Links/buttons | Enter activates | WCAG 2.1.1 |
+| Buttons | Space activates | WCAG 2.1.1 |
+| Checkboxes | Space toggles | WCAG 2.1.1 |
+| Radio groups | Arrow keys navigate within group | ARIA Practices |
+| Tabs | Arrow keys switch tabs, Tab moves to panel | ARIA Practices |
+| Menus | Arrow keys navigate, Enter selects, Escape closes | ARIA Practices |
+| Sliders | Arrow keys adjust value | ARIA Practices |
+
+### Input Method Awareness
+
+| Check | Requirement |
+|-------|-------------|
+| Hover guard | `:hover` styles wrapped in `@media(hover:hover)` — touch devices don't hover |
+| Pointer detection | `@media(pointer:coarse)` used for larger touch targets (48px+) |
+| Focus-visible distinction | `:focus-visible` for keyboard only, not mouse clicks |
+| Touch target sizing | All interactive elements >= 44x44px on `pointer:coarse` devices |
+
+### Step 8: Target Size (WCAG 2.5.8)
+
+| Check | Requirement | Standard |
+|-------|-------------|----------|
+| Interactive elements | Minimum 24x24px CSS pixels | WCAG 2.5.8 AA |
+| Inline links | Exempt if within text paragraph | Exception |
+| Spacing | At least 24px between targets OR targets themselves >= 24px | WCAG 2.5.8 |
+
+## Phase 4: Report Generation & Output
+
+1. Write audit report to `<session>/audits/focus/focus-audit-{NNN}.md` (or `<session>/re-audit/focus-audit-{NNN}.md` for re-audits):
+
+```markdown
+# Focus & Keyboard Accessibility Audit - {NNN}
+[focus-auditor]
+
+## Summary
+- **Total interactive elements**: {count}
+- **Pass**: {pass_count} | **Fail**: {fail_count}
+- **WCAG Level**: {AA|AAA}
+- **Critical issues**: {count}
+- **High issues**: {count}
+
+## Tab Order
+| # | Element | Type | tabindex | Logical | Status |
+|---|---------|------|----------|---------|--------|
+| 1 | Skip link | <a> | 0 | Yes | PASS |
+| 2 | Logo link | <a> | 0 | Yes | PASS |
+| ... | ... | ... | ... | ... | ... |
+
+## Focus Indicators
+| Element | :focus-visible | Outline | Contrast | Obscured | Status |
+|---------|---------------|---------|----------|----------|--------|
+| ... | yes/no | Xpx solid | X:1 | no | PASS/FAIL |
+
+## Skip Link
+| Check | Status | Details |
+|-------|--------|---------|
+| Exists | PASS/FAIL | ... |
+| Hidden until focus | PASS/FAIL | ... |
+| Target exists | PASS/FAIL | ... |
+
+## Focus Traps (Modals/Dialogs)
+| Dialog | Focus on open | Tab cycles | Escape closes | Focus restores | Status |
+|--------|-------------|-----------|--------------|---------------|--------|
+| ... | yes/no | yes/no | yes/no | yes/no | PASS/FAIL |
+
+## ARIA Coverage
+| Element | Role | Label | States | Status |
+|---------|------|-------|--------|--------|
+| ... | ... | ... | ... | PASS/FAIL |
+
+## Keyboard Operability
+| Element | Enter | Space | Arrows | Escape | Status |
+|---------|-------|-------|--------|--------|--------|
+| ... | yes/no | yes/no | n/a | n/a | PASS/FAIL |
+
+## Target Size
+| Element | Size | Min 24x24 | Status |
+|---------|------|----------|--------|
+| ... | WxH | yes/no | PASS/FAIL |
+
+## Issues (by severity)
+### Critical
+- ...
+### High
+- ...
+### Medium
+- ...
+```
+
+2. For re-audit (FOCUS-002+), add before/after comparison section:
+```markdown
+## Before/After Comparison
+| Element | Before | After | Status |
+|---------|--------|-------|--------|
+| ... | FAIL (no outline) | PASS (2px solid) | FIXED |
+```
+
+3. Update `<session>/.msg/meta.json` under `focus-auditor` namespace:
+   - Read existing -> merge `{ "focus-auditor": { audit_id, total_elements, pass_count, fail_count, critical_count, high_count, skip_link_present, focus_traps_valid, timestamp } }` -> write back

package/.claude/skills/team-visual-a11y/roles/remediation-planner/role.md

@@ -0,0 +1,206 @@
+---
+role: remediation-planner
+prefix: REMED
+inner_loop: false
+message_types: [state_update]
+---
+
+# Remediation Planner
+
+Synthesize findings from all 3 audit reports (color, typography, focus) into a prioritized remediation plan with code-level fix guidance. Map each issue to WCAG success criterion, estimate effort, and group by file/component for efficient fixing.
+
+## Phase 2: Context & Artifact Loading
+
+| Input | Source | Required |
+|-------|--------|----------|
+| Task description | From task subject/description | Yes |
+| Session path | Extracted from task description | Yes |
+| Color audit report | <session>/audits/color/color-audit-001.md | Yes |
+| Typography audit report | <session>/audits/typography/typo-audit-001.md | Yes |
+| Focus audit report | <session>/audits/focus/focus-audit-001.md | Yes |
+| WCAG level (AA/AAA) | From task description CONTEXT | Yes |
+| .msg/meta.json | <session>/.msg/meta.json | Yes |
+
+1. Extract session path and WCAG level from task description
+2. Read ALL 3 audit reports -- all must exist (REMED-001 is blocked by all 3 auditors)
+3. Parse each report for:
+   - Issues by severity (Critical/High/Medium)
+   - Specific elements and file:line locations
+   - Current values vs required values
+4. Read meta.json for auditor summary stats
+
+## Phase 3: Remediation Plan Synthesis
+
+### Step 1: Issue Collection & Deduplication
+
+Collect all issues from 3 audit reports:
+
+| Source | Issue Types |
+|--------|------------|
+| Color audit | Contrast failures, OKLCH range violations, color blindness risks, dark mode gaps |
+| Typography audit | Size violations, line-height issues, reading width, clamp() failures, font loading |
+| Focus audit | Missing focus indicators, tab order issues, missing ARIA, keyboard gaps, skip link, target size |
+
+Deduplicate:
+- Same element flagged by multiple auditors -> merge into single issue with multiple aspects
+- Same CSS rule causing multiple failures -> group under single fix
+
+### Step 2: Severity Classification
+
+| Severity | Criteria | Examples |
+|----------|----------|---------|
+| Critical | Blocks usage for impaired users, WCAG A violation | No keyboard access, contrast < 2:1, focus trap with no escape |
+| High | Degrades experience significantly, WCAG AA violation | Contrast 3:1-4.5:1 on body text, missing skip link, no focus indicator |
+| Medium | Non-compliance but usable, WCAG AAA-only violation | Contrast between AA and AAA thresholds, suboptimal reading width |
+| Low | Enhancement, best practice | Font loading optimization, letter-spacing refinement |
+
+### Step 3: Prioritization & Grouping
+
+Group by file/component for efficient fixing:
+
+```
+File: src/styles/globals.css
+  [CRITICAL] Color: --text-primary contrast 3.2:1 (need 4.5:1) -> WCAG 1.4.3
+  [HIGH]     Focus: No :focus-visible on buttons -> WCAG 2.4.7
+  [MEDIUM]   Typography: line-height 1.4 on body (need 1.5) -> WCAG 1.4.12
+
+File: src/components/Modal.tsx
+  [CRITICAL] Focus: No focus trap in modal -> WCAG 2.1.2
+  [HIGH]     ARIA: Missing aria-modal="true" -> WCAG 4.1.2
+```
+
+Priority order within each file: Critical -> High -> Medium -> Low.
+
+### Step 4: Code-Level Fix Guidance
+
+For each issue, provide specific fix:
+
+**Color fixes**:
+```css
+/* Before: contrast 3.2:1 */
+--text-primary: oklch(55% 0 0);
+/* After: contrast 5.1:1 -- adjust lightness down */
+--text-primary: oklch(35% 0 0);
+```
+
+**Focus fixes**:
+```css
+/* Add :focus-visible to interactive elements */
+button:focus-visible,
+a:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+button:focus:not(:focus-visible) {
+  outline: none;
+}
+```
+
+**ARIA fixes**:
+```html
+<!-- Before -->
+<div class="modal">
+<!-- After -->
+<div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
+```
+
+**Typography fixes**:
+```css
+/* Before: fixed font-size */
+body { font-size: 14px; }
+/* After: responsive with floor */
+body { font-size: clamp(1rem, 1vw + 0.875rem, 1.25rem); line-height: 1.625; }
+```
+
+### Step 5: Effort Estimation
+
+| Effort | Criteria |
+|--------|----------|
+| Trivial (< 5 min) | Single CSS property change (contrast, outline) |
+| Small (5-15 min) | Multiple CSS changes in one file, add ARIA attributes |
+| Medium (15-60 min) | Focus trap implementation, skip link, keyboard navigation |
+| Large (1-4 hours) | Responsive typography overhaul, dark mode color parity |
+
+### Step 6: WCAG Criterion Mapping
+
+Map every issue to specific WCAG success criterion:
+
+| Issue Domain | Common Criteria |
+|-------------|----------------|
+| Color contrast | 1.4.3 (AA), 1.4.6 (AAA), 1.4.11 (non-text) |
+| Typography | 1.4.4 (resize), 1.4.12 (text spacing) |
+| Focus indicators | 2.4.7 (visible), 2.4.11 (not obscured) |
+| Keyboard | 2.1.1 (keyboard), 2.1.2 (no trap) |
+| Tab order | 2.4.3 (focus order) |
+| Skip link | 2.4.1 (bypass blocks) |
+| ARIA | 4.1.2 (name/role/value) |
+| Target size | 2.5.8 (target size) |
+| Live regions | 4.1.3 (status messages) |
+
+## Phase 4: Validation & Output
+
+1. Validate plan completeness:
+
+| Check | Requirement |
+|-------|-------------|
+| All critical issues addressed | Every critical issue has a fix |
+| All high issues addressed | Every high issue has a fix |
+| File grouping complete | Every fix maps to specific file:line |
+| WCAG mapping complete | Every fix maps to WCAG criterion |
+| No orphan issues | Every audit issue appears in plan |
+
+2. Write remediation plan to `<session>/remediation/remediation-plan.md`:
+
+```markdown
+# Remediation Plan
+[remediation-planner]
+
+## Executive Summary
+- **Total issues**: {count} (Critical: {n}, High: {n}, Medium: {n}, Low: {n})
+- **Files affected**: {count}
+- **Estimated total effort**: {hours}
+- **WCAG target**: {AA|AAA}
+
+## Priority Matrix
+| # | Severity | Domain | WCAG | File | Issue | Fix | Effort |
+|---|----------|--------|------|------|-------|-----|--------|
+| 1 | Critical | Color | 1.4.3 | globals.css:12 | Contrast 3.2:1 | L 55% -> 35% | Trivial |
+| 2 | Critical | Focus | 2.1.2 | Modal.tsx:45 | No focus trap | Add trap logic | Medium |
+| ... | ... | ... | ... | ... | ... | ... | ... |
+
+## Fixes by File
+
+### `src/styles/globals.css`
+#### Fix 1: Color contrast (Critical, WCAG 1.4.3)
+- **Current**: `--text-primary: oklch(55% 0 0);` (contrast 3.2:1)
+- **Target**: `--text-primary: oklch(35% 0 0);` (contrast 5.1:1)
+- **Effort**: Trivial
+
+#### Fix 2: Focus indicators (High, WCAG 2.4.7)
+- **Current**: No :focus-visible rules
+- **Target**: Add :focus-visible with 2px outline
+- **Effort**: Small
+
+### `src/components/Modal.tsx`
+#### Fix 3: Focus trap (Critical, WCAG 2.1.2)
+- **Current**: No focus management
+- **Target**: Implement focus trap (store activeElement, cycle Tab, Escape to close)
+- **Effort**: Medium
+
+## Implementation Order
+1. All Critical fixes (blocks usage)
+2. All High fixes (degrades experience)
+3. Medium fixes (non-compliance)
+4. Low fixes (enhancements)
+
+## Verification Checklist
+- [ ] All color combinations pass WCAG {level} contrast
+- [ ] All interactive elements have visible focus indicators
+- [ ] Tab order is logical with no traps (except modals)
+- [ ] Skip link present and functional
+- [ ] All ARIA roles and states correct
+- [ ] Typography meets minimum sizes at all breakpoints
+```
+
+3. Update `<session>/.msg/meta.json` under `remediation-planner` namespace:
+   - Read existing -> merge `{ "remediation-planner": { total_issues, critical, high, medium, low, files_affected, estimated_effort, timestamp } }` -> write back

package/.claude/skills/team-visual-a11y/roles/typo-auditor/role.md

@@ -0,0 +1,185 @@
+---
+role: typo-auditor
+prefix: TYPO
+inner_loop: false
+message_types: [state_update]
+---
+
+# Typography Readability Auditor
+
+Typography accessibility audit across all viewports. Font sizes at breakpoints, line-height ratios, clamp() validation, reading width measurement, font loading strategy assessment. Produce detailed typography report with breakpoint-by-breakpoint analysis.
+
+## Phase 2: Context & Environment Detection
+
+| Input | Source | Required |
+|-------|--------|----------|
+| Task description | From task subject/description | Yes |
+| Session path | Extracted from task description | Yes |
+| Target (URL or file paths) | From task description CONTEXT | Yes |
+| WCAG level (AA/AAA) | From task description CONTEXT | Yes |
+| .msg/meta.json | <session>/.msg/meta.json | No |
+
+1. Extract session path, target, and WCAG level from task description
+2. Identify target:
+   - URL -> use Chrome DevTools for rendered typography (navigate_page, resize_page, screenshot)
+   - File paths -> read CSS/SCSS files directly for typography definitions
+   - Full site -> enumerate stylesheets from HTML entry points
+3. Read typography standards from specs/typography-scale.md for reference thresholds
+
+## Phase 3: Typography Audit Execution
+
+### Step 1: Typography Definition Extraction
+
+**Static analysis** (always):
+- Glob for CSS/SCSS/Tailwind files -> extract typography definitions
+- Extract: font-family, font-size, line-height, letter-spacing, font-weight, font-display
+- Parse clamp() functions: `clamp(min, preferred, max)` -> validate min/max bounds
+- Parse @media queries for responsive breakpoints
+- Record source location (file:line) for each rule
+
+**Runtime analysis** (if Chrome DevTools available):
+- Navigate to target URL
+- For each breakpoint (320px, 768px, 1024px, 1400px):
+  - `mcp__chrome-devtools__resize_page({ width: <breakpoint>, height: 900 })`
+  - `mcp__chrome-devtools__evaluate_script({ expression: "..." })` to measure:
+    - Computed font-size on body, headings (h1-h6), paragraphs, captions
+    - Computed line-height on same elements
+    - Container width and character count per line
+  - `mcp__chrome-devtools__take_screenshot({})` -> save to `<session>/evidence/typo-{breakpoint}px.png`
+
+### Step 2: Font Size Audit
+
+| Breakpoint | Element | Minimum Size | Standard |
+|-----------|---------|-------------|----------|
+| 320px (mobile) | Body text | 16px | WCAG 1.4.4 |
+| 320px (mobile) | Small/caption | 14px | Best practice |
+| 768px (tablet) | Body text | 16px | WCAG 1.4.4 |
+| 1024px (desktop) | Body text | 16px | WCAG 1.4.4 |
+| 1400px (wide) | Body text | 16px | WCAG 1.4.4 |
+
+**clamp() validation**:
+- Minimum value >= 14px (absolute floor)
+- Maximum value reasonable for element type (headings: max ~72px, body: max ~20px)
+- Preferred value uses viewport unit (vw) for fluid scaling
+- Check: `clamp(min, preferred, max)` where min >= 14px for any text
+
+**200% zoom check** (WCAG 1.4.4):
+- At 200% zoom, no content should be clipped or lost
+- Text should reflow without horizontal scrolling
+
+### Step 3: Line Height Audit
+
+| Element Type | Expected Range | Standard |
+|-------------|---------------|----------|
+| Body text | 1.5 - 1.75 | WCAG 1.4.12, readability |
+| Headings | 1.1 - 1.3 | Visual impact |
+| Code blocks | 1.5 - 1.7 | Scanning readability |
+| Buttons/labels | 1.2 - 1.5 | UI element |
+
+Check for unitless line-height (preferred over px/em for inheritance).
+
+### Step 4: Letter Spacing Audit
+
+| Element Type | Expected Range | Standard |
+|-------------|---------------|----------|
+| Display headings | -0.02em to 0 | Tight for visual |
+| Body text | 0 (default) | Normal |
+| Uppercase labels | 0.05em - 0.1em | Legibility |
+| Monospace code | 0.08em - 0.15em | Wide for scanning |
+
+**WCAG 1.4.12 override test**: Text must remain readable when user overrides:
+- Line height to at least 1.5x font size
+- Letter spacing to at least 0.12em
+- Word spacing to at least 0.16em
+
+### Step 5: Reading Width Audit
+
+Measure characters per line for body text containers:
+
+| Metric | Optimal | Acceptable | Flag |
+|--------|---------|-----------|------|
+| Characters per line | 66ch | 45-75ch | < 45 or > 75 |
+| Max container width | 65ch-75ch | Up to 900px | > 900px without column |
+
+Check: `max-width` or `width` on body text containers.
+
+### Step 6: Font Loading Strategy
+
+| Property | Good | Acceptable | Poor |
+|----------|------|-----------|------|
+| Body font | `font-display: swap` | `font-display: fallback` | `font-display: block` or missing |
+| Display font | `font-display: optional` | `font-display: swap` | `font-display: block` |
+| Preload | Critical fonts preloaded | Some preloaded | None preloaded |
+| Fallback stack | System font fallback defined | Generic fallback | No fallback |
+
+Check for FOUT (Flash of Unstyled Text) / FOIT (Flash of Invisible Text) risks.
+
+## Phase 4: Report Generation & Output
+
+1. Write audit report to `<session>/audits/typography/typo-audit-{NNN}.md`:
+
+```markdown
+# Typography Accessibility Audit - {NNN}
+[typo-auditor]
+
+## Summary
+- **Total typography rules audited**: {count}
+- **Pass**: {pass_count} | **Fail**: {fail_count}
+- **WCAG Level**: {AA|AAA}
+- **Critical issues**: {count}
+- **High issues**: {count}
+
+## Font Size by Breakpoint
+| Breakpoint | Element | Computed Size | Min Required | Status |
+|-----------|---------|--------------|-------------|--------|
+| 320px | body | Xpx | 16px | PASS/FAIL |
+| 320px | h1 | Xpx | -- | OK |
+| ... | ... | ... | ... | ... |
+
+## clamp() Validation
+| Rule | clamp() Value | Min | Max | Status |
+|------|--------------|-----|-----|--------|
+| .body | clamp(1rem, 2vw, 1.25rem) | 16px | 20px | PASS/FAIL |
+| ... | ... | ... | ... | ... |
+
+## Line Height Audit
+| Element | Current | Expected Range | Status |
+|---------|---------|---------------|--------|
+| body | 1.6 | 1.5-1.75 | PASS |
+| h1 | 1.2 | 1.1-1.3 | PASS |
+| ... | ... | ... | ... |
+
+## Letter Spacing Audit
+| Element | Current | Expected Range | Status |
+|---------|---------|---------------|--------|
+| ... | ... | ... | ... |
+
+## Reading Width
+| Container | Width | Chars/Line | Optimal (45-75) | Status |
+|-----------|-------|-----------|-----------------|--------|
+| .content | 700px | ~68ch | Yes | PASS |
+| ... | ... | ... | ... | ... |
+
+## Font Loading
+| Font | font-display | Preload | Fallback | Status |
+|------|-------------|---------|----------|--------|
+| ... | swap | yes/no | system | PASS/FAIL |
+
+## Text Spacing Override Test (WCAG 1.4.12)
+| Override | Applied | Content Readable | Status |
+|---------|---------|-----------------|--------|
+| line-height: 1.5x | Yes | Yes/No | PASS/FAIL |
+| letter-spacing: 0.12em | Yes | Yes/No | PASS/FAIL |
+| word-spacing: 0.16em | Yes | Yes/No | PASS/FAIL |
+
+## Issues (by severity)
+### Critical
+- ...
+### High
+- ...
+### Medium
+- ...
+```
+
+2. Update `<session>/.msg/meta.json` under `typo-auditor` namespace:
+   - Read existing -> merge `{ "typo-auditor": { audit_id, total_rules, pass_count, fail_count, critical_count, high_count, breakpoints_tested, timestamp } }` -> write back