@su-record/vibe 2.9.18 → 2.9.20

package/skills/design-audit/agents/scorer.md

@@ -1,47 +1,47 @@
----
-name: design-scorer
-role: Aggregates audit findings from all design agents and produces a final scored report
-tools: [Read]
----
-
-# Design Scorer
-
-## Role
-Collects findings from all four design audit agents and produces a unified score, priority ranking, and action plan. Weights issues by user impact and implementation effort to help the team focus on the highest-value improvements first.
-
-## Responsibilities
-- Collect and read findings from a11y-auditor, performance-auditor, responsive-auditor, and slop-detector
-- Calculate a score per category (0-100) based on fail/warn/pass ratio
-- Compute an overall design health score (weighted: a11y 35%, performance 30%, responsive 25%, quality 10%)
-- Rank all failures by impact × effort using a 2x2 matrix (high impact + low effort = do first)
-- Produce an actionable prioritized fix list with effort estimates
-- Generate a one-line status badge per category for quick reference
-
-## Input
-Findings markdown documents from all four audit agents.
-
-## Output
-Final scored report:
-```markdown
-## Design Audit Report
-
-| Category        | Score | Status  |
-|-----------------|-------|---------|
-| Accessibility   | 72/100 | Warning |
-| Performance     | 85/100 | Good    |
-| Responsive      | 60/100 | Needs Work |
-| Design Quality  | 90/100 | Good    |
-| **Overall**     | **76/100** | **Warning** |
-
-### Priority Fix List
-1. [High Impact, Low Effort] src/components/IconButton.tsx — add aria-label (5 min)
-2. [High Impact, Low Effort] src/styles/fonts.css — add font-display: swap (2 min)
-3. [High Impact, High Effort] Responsive table layout — needs full mobile redesign (2 hrs)
-```
-
-## Communication
-- Reports final report to: orchestrator / user
-- Receives findings from: a11y-auditor, performance-auditor, responsive-auditor, slop-detector
-
-## Domain Knowledge
-Issue weighting: WCAG A violations = Critical (blocks legal compliance); WCAG AA = High; Core Web Vitals failures = High (SEO impact); responsive failures on primary breakpoints = High; design quality = Medium. Effort estimates: attribute change = trivial, CSS addition = minor, component restructure = moderate, full redesign = major.
+---
+name: design-scorer
+role: Aggregates audit findings from all design agents and produces a final scored report
+tools: [Read]
+---
+
+# Design Scorer
+
+## Role
+Collects findings from all four design audit agents and produces a unified score, priority ranking, and action plan. Weights issues by user impact and implementation effort to help the team focus on the highest-value improvements first.
+
+## Responsibilities
+- Collect and read findings from a11y-auditor, performance-auditor, responsive-auditor, and slop-detector
+- Calculate a score per category (0-100) based on fail/warn/pass ratio
+- Compute an overall design health score (weighted: a11y 35%, performance 30%, responsive 25%, quality 10%)
+- Rank all failures by impact × effort using a 2x2 matrix (high impact + low effort = do first)
+- Produce an actionable prioritized fix list with effort estimates
+- Generate a one-line status badge per category for quick reference
+
+## Input
+Findings markdown documents from all four audit agents.
+
+## Output
+Final scored report:
+```markdown
+## Design Audit Report
+
+| Category        | Score | Status  |
+|-----------------|-------|---------|
+| Accessibility   | 72/100 | Warning |
+| Performance     | 85/100 | Good    |
+| Responsive      | 60/100 | Needs Work |
+| Design Quality  | 90/100 | Good    |
+| **Overall**     | **76/100** | **Warning** |
+
+### Priority Fix List
+1. [High Impact, Low Effort] src/components/IconButton.tsx — add aria-label (5 min)
+2. [High Impact, Low Effort] src/styles/fonts.css — add font-display: swap (2 min)
+3. [High Impact, High Effort] Responsive table layout — needs full mobile redesign (2 hrs)
+```
+
+## Communication
+- Reports final report to: orchestrator / user
+- Receives findings from: a11y-auditor, performance-auditor, responsive-auditor, slop-detector
+
+## Domain Knowledge
+Issue weighting: WCAG A violations = Critical (blocks legal compliance); WCAG AA = High; Core Web Vitals failures = High (SEO impact); responsive failures on primary breakpoints = High; design quality = Medium. Effort estimates: attribute change = trivial, CSS addition = minor, component restructure = moderate, full redesign = major.

package/skills/design-audit/agents/slop-detector.md

@@ -1,47 +1,47 @@
----
-name: design-slop-detector
-role: Detects AI-generated design anti-patterns — generic aesthetics, placeholder content, and low-polish UI
-tools: [Read, Glob, Grep]
----
-
-# Slop Detector
-
-## Role
-Identifies UI code patterns that suggest low-effort or AI-generated design: generic color palettes, Lorem Ipsum text, placeholder-style components, overuse of shadow-lg/rounded-lg, and other signals of "default aesthetic" that reduce product quality and distinctiveness.
-
-## Responsibilities
-- Detect Lorem Ipsum or generic placeholder text strings in rendered content
-- Flag generic Tailwind class overuse patterns: repeated `shadow-lg`, `rounded-xl`, `bg-gray-100` without custom design tokens
-- Identify "default card" patterns: white background + border + shadow + padding with no visual hierarchy
-- Check for excessive gradient overuse (more than 2-3 gradients in a component)
-- Detect icon-heavy UIs with no text labels (icon soup)
-- Flag `TODO: replace with real content` style comments in UI components
-
-## Input
-- Target file paths or glob pattern (TSX, JSX, HTML, CSS)
-- Optional: design token file to distinguish intentional use of shared classes
-
-## Output
-Slop findings report:
-```markdown
-### Design Quality Audit
-
-**Placeholder Content**
-- src/pages/Dashboard.tsx:34 — hardcoded "Lorem ipsum dolor sit amet" [FAIL]
-
-**Generic Aesthetics**
-- src/components/Card.tsx — shadow-lg + rounded-xl + bg-white pattern repeated 8× [WARN]
-- src/components/Hero.tsx:5 — gradient-to-r from-blue-500 to-purple-600 (default AI gradient) [WARN]
-
-**Missing Polish**
-- src/components/UserTable.tsx:12 — empty state uses generic "No data found" with no illustration or action [WARN]
-
-Score: {passed}/{total} checks
-```
-
-## Communication
-- Reports findings to: `design-scorer`
-- Receives instructions from: design-audit orchestrator (SKILL.md)
-
-## Domain Knowledge
-AI-slop signals: purple-to-blue gradients, hero sections with "Transform your workflow" copy, cards with identical shadow/radius, no empty states, no loading skeletons, no error states. Nielsen's Heuristic 1 (visibility of system status) and Heuristic 8 (aesthetic and minimalist design) apply. Distinct design requires intentional deviation from framework defaults.
+---
+name: design-slop-detector
+role: Detects AI-generated design anti-patterns — generic aesthetics, placeholder content, and low-polish UI
+tools: [Read, Glob, Grep]
+---
+
+# Slop Detector
+
+## Role
+Identifies UI code patterns that suggest low-effort or AI-generated design: generic color palettes, Lorem Ipsum text, placeholder-style components, overuse of shadow-lg/rounded-lg, and other signals of "default aesthetic" that reduce product quality and distinctiveness.
+
+## Responsibilities
+- Detect Lorem Ipsum or generic placeholder text strings in rendered content
+- Flag generic Tailwind class overuse patterns: repeated `shadow-lg`, `rounded-xl`, `bg-gray-100` without custom design tokens
+- Identify "default card" patterns: white background + border + shadow + padding with no visual hierarchy
+- Check for excessive gradient overuse (more than 2-3 gradients in a component)
+- Detect icon-heavy UIs with no text labels (icon soup)
+- Flag `TODO: replace with real content` style comments in UI components
+
+## Input
+- Target file paths or glob pattern (TSX, JSX, HTML, CSS)
+- Optional: design token file to distinguish intentional use of shared classes
+
+## Output
+Slop findings report:
+```markdown
+### Design Quality Audit
+
+**Placeholder Content**
+- src/pages/Dashboard.tsx:34 — hardcoded "Lorem ipsum dolor sit amet" [FAIL]
+
+**Generic Aesthetics**
+- src/components/Card.tsx — shadow-lg + rounded-xl + bg-white pattern repeated 8× [WARN]
+- src/components/Hero.tsx:5 — gradient-to-r from-blue-500 to-purple-600 (default AI gradient) [WARN]
+
+**Missing Polish**
+- src/components/UserTable.tsx:12 — empty state uses generic "No data found" with no illustration or action [WARN]
+
+Score: {passed}/{total} checks
+```
+
+## Communication
+- Reports findings to: `design-scorer`
+- Receives instructions from: design-audit orchestrator (SKILL.md)
+
+## Domain Knowledge
+AI-slop signals: purple-to-blue gradients, hero sections with "Transform your workflow" copy, cards with identical shadow/radius, no empty states, no loading skeletons, no error states. Nielsen's Heuristic 1 (visibility of system status) and Heuristic 8 (aesthetic and minimalist design) apply. Distinct design requires intentional deviation from framework defaults.

package/skills/design-audit/frameworks/core-web-vitals.md

@@ -1,107 +1,107 @@
----
-name: core-web-vitals
-type: framework
-applies-to: [design-audit]
----
-
-# Core Web Vitals — Reference Card
-
-## The Three Metrics
-
-| Metric | Measures | Good | Needs Improvement | Poor |
-|--------|----------|------|-------------------|------|
-| **LCP** — Largest Contentful Paint | Loading performance | ≤2.5s | 2.5s–4.0s | >4.0s |
-| **INP** — Interaction to Next Paint | Responsiveness (replaces FID) | ≤200ms | 200ms–500ms | >500ms |
-| **CLS** — Cumulative Layout Shift | Visual stability | ≤0.1 | 0.1–0.25 | >0.25 |
-
-> **INP replaced FID** as a Core Web Vital in March 2024.
-
-## LCP — Largest Contentful Paint
-
-**What triggers LCP**: `<img>`, `<video>` poster, background-image via CSS, block-level text.
-
-### Common Causes of Poor LCP
-
-| Cause | Fix |
-|-------|-----|
-| Render-blocking resources | Move scripts to `defer`/`async`, inline critical CSS |
-| Slow server response (TTFB >600ms) | CDN, edge caching, preconnect hints |
-| LCP image not preloaded | Add `<link rel="preload" as="image">` for hero image |
-| LCP image lazy-loaded | Remove `loading="lazy"` from above-fold images |
-| Large uncompressed images | Use WebP/AVIF, set `srcset`, compress ≤200KB for hero |
-
-```html
-<!-- Good: preload LCP image, no lazy loading above fold -->
-<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
-<img src="/hero.webp" alt="Hero" fetchpriority="high" width="1200" height="600">
-```
-
-## INP — Interaction to Next Paint
-
-**What triggers INP**: Click, tap, keyboard input — measures time until next frame paint.
-
-### Common Causes of Poor INP
-
-| Cause | Fix |
-|-------|-----|
-| Long JS tasks (>50ms) blocking main thread | Break into chunks with `scheduler.yield()` |
-| Heavy event handlers | Debounce input, defer non-critical work |
-| Synchronous layout thrash | Batch DOM reads/writes, use `requestAnimationFrame` |
-| Large React re-renders on interaction | `useMemo`, `useCallback`, virtualize long lists |
-
-```ts
-// Good: yield back to browser between chunks
-async function processLargeList(items: Item[]): Promise<void> {
-  for (const chunk of chunkArray(items, 50)) {
-    processChunk(chunk);
-    await scheduler.yield(); // let browser paint between chunks
-  }
-}
-```
-
-## CLS — Cumulative Layout Shift
-
-**What causes shifts**: Elements inserted above existing content, images/iframes without dimensions, fonts swapping.
-
-### Common Causes of Poor CLS
-
-| Cause | Fix |
-|-------|-----|
-| Images without `width`/`height` | Always set explicit dimensions or `aspect-ratio` |
-| Dynamic content injection (ads, banners) | Reserve space with `min-height` placeholders |
-| Web fonts causing FOUT/FOIT | Use `font-display: swap` + preload key fonts |
-| Animations using `top`/`left`/`margin` | Use `transform` instead (compositor-only) |
-
-```css
-/* Good: reserve space before image loads */
-.hero-image {
-  aspect-ratio: 16 / 9;
-  width: 100%;
-}
-
-/* Good: compositor-only animation (no layout shift) */
-.slide-in {
-  transform: translateX(-100%);
-  transition: transform 0.3s ease;
-}
-```
-
-## Measurement Tools
-
-| Tool | Purpose |
-|------|---------|
-| Chrome DevTools → Performance | Record and analyze LCP/CLS waterfall |
-| Lighthouse | Automated audit with recommendations |
-| PageSpeed Insights | Field data (CrUX) + lab data combined |
-| Web Vitals extension | Real-time metric overlay in browser |
-| `web-vitals` npm package | Measure in production JS |
-
-## Audit Checklist
-
-- [ ] LCP element identified (DevTools → Performance → Timings)
-- [ ] LCP image preloaded and not lazy-loaded
-- [ ] All images have explicit `width` + `height` (or `aspect-ratio`)
-- [ ] No layout-shifting animations using positional properties
-- [ ] Fonts preloaded with `font-display: swap`
-- [ ] No long tasks >50ms in interaction handlers
-- [ ] Third-party scripts loaded with `async`/`defer`
+---
+name: core-web-vitals
+type: framework
+applies-to: [design-audit]
+---
+
+# Core Web Vitals — Reference Card
+
+## The Three Metrics
+
+| Metric | Measures | Good | Needs Improvement | Poor |
+|--------|----------|------|-------------------|------|
+| **LCP** — Largest Contentful Paint | Loading performance | ≤2.5s | 2.5s–4.0s | >4.0s |
+| **INP** — Interaction to Next Paint | Responsiveness (replaces FID) | ≤200ms | 200ms–500ms | >500ms |
+| **CLS** — Cumulative Layout Shift | Visual stability | ≤0.1 | 0.1–0.25 | >0.25 |
+
+> **INP replaced FID** as a Core Web Vital in March 2024.
+
+## LCP — Largest Contentful Paint
+
+**What triggers LCP**: `<img>`, `<video>` poster, background-image via CSS, block-level text.
+
+### Common Causes of Poor LCP
+
+| Cause | Fix |
+|-------|-----|
+| Render-blocking resources | Move scripts to `defer`/`async`, inline critical CSS |
+| Slow server response (TTFB >600ms) | CDN, edge caching, preconnect hints |
+| LCP image not preloaded | Add `<link rel="preload" as="image">` for hero image |
+| LCP image lazy-loaded | Remove `loading="lazy"` from above-fold images |
+| Large uncompressed images | Use WebP/AVIF, set `srcset`, compress ≤200KB for hero |
+
+```html
+<!-- Good: preload LCP image, no lazy loading above fold -->
+<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
+<img src="/hero.webp" alt="Hero" fetchpriority="high" width="1200" height="600">
+```
+
+## INP — Interaction to Next Paint
+
+**What triggers INP**: Click, tap, keyboard input — measures time until next frame paint.
+
+### Common Causes of Poor INP
+
+| Cause | Fix |
+|-------|-----|
+| Long JS tasks (>50ms) blocking main thread | Break into chunks with `scheduler.yield()` |
+| Heavy event handlers | Debounce input, defer non-critical work |
+| Synchronous layout thrash | Batch DOM reads/writes, use `requestAnimationFrame` |
+| Large React re-renders on interaction | `useMemo`, `useCallback`, virtualize long lists |
+
+```ts
+// Good: yield back to browser between chunks
+async function processLargeList(items: Item[]): Promise<void> {
+  for (const chunk of chunkArray(items, 50)) {
+    processChunk(chunk);
+    await scheduler.yield(); // let browser paint between chunks
+  }
+}
+```
+
+## CLS — Cumulative Layout Shift
+
+**What causes shifts**: Elements inserted above existing content, images/iframes without dimensions, fonts swapping.
+
+### Common Causes of Poor CLS
+
+| Cause | Fix |
+|-------|-----|
+| Images without `width`/`height` | Always set explicit dimensions or `aspect-ratio` |
+| Dynamic content injection (ads, banners) | Reserve space with `min-height` placeholders |
+| Web fonts causing FOUT/FOIT | Use `font-display: swap` + preload key fonts |
+| Animations using `top`/`left`/`margin` | Use `transform` instead (compositor-only) |
+
+```css
+/* Good: reserve space before image loads */
+.hero-image {
+  aspect-ratio: 16 / 9;
+  width: 100%;
+}
+
+/* Good: compositor-only animation (no layout shift) */
+.slide-in {
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+}
+```
+
+## Measurement Tools
+
+| Tool | Purpose |
+|------|---------|
+| Chrome DevTools → Performance | Record and analyze LCP/CLS waterfall |
+| Lighthouse | Automated audit with recommendations |
+| PageSpeed Insights | Field data (CrUX) + lab data combined |
+| Web Vitals extension | Real-time metric overlay in browser |
+| `web-vitals` npm package | Measure in production JS |
+
+## Audit Checklist
+
+- [ ] LCP element identified (DevTools → Performance → Timings)
+- [ ] LCP image preloaded and not lazy-loaded
+- [ ] All images have explicit `width` + `height` (or `aspect-ratio`)
+- [ ] No layout-shifting animations using positional properties
+- [ ] Fonts preloaded with `font-display: swap`
+- [ ] No long tasks >50ms in interaction handlers
+- [ ] Third-party scripts loaded with `async`/`defer`

package/skills/design-audit/frameworks/wcag-checklist.md

@@ -1,64 +1,64 @@
----
-name: wcag-checklist
-type: framework
-applies-to: [design-audit]
-standard: WCAG 2.1 AA
----
-
-# WCAG 2.1 AA — Key Criteria Reference Card
-
-## Perceivable
-
-| Criterion | Level | Requirement | Test |
-|-----------|-------|-------------|------|
-| 1.1.1 Non-text Content | A | All images have `alt` text | Check `<img>` for `alt` attribute |
-| 1.3.1 Info and Relationships | A | Structure conveyed via markup (headings, lists, labels) | Heading hierarchy is logical |
-| 1.3.3 Sensory Characteristics | A | Instructions don't rely on shape/color/location alone | "Click the red button" → add label |
-| 1.4.1 Use of Color | A | Color not the only means of conveying information | Error state uses icon + color |
-| 1.4.3 Contrast (Minimum) | AA | Text ≥ 4.5:1, large text ≥ 3:1 | Use contrast checker |
-| 1.4.4 Resize Text | AA | Text resizable to 200% without loss of content | Test at 200% browser zoom |
-| 1.4.10 Reflow | AA | Content reflows at 320px width without horizontal scroll | Test at 320px viewport |
-| 1.4.11 Non-text Contrast | AA | UI components ≥ 3:1 against adjacent colors | Buttons, inputs, focus rings |
-| 1.4.12 Text Spacing | AA | No content loss with: line-height 1.5, letter-spacing 0.12em | Apply via user stylesheet |
-| 1.4.13 Content on Hover | AA | Hover/focus content dismissible, hoverable, persistent | Tooltips must stay on hover |
-
-## Operable
-
-| Criterion | Level | Requirement | Test |
-|-----------|-------|-------------|------|
-| 2.1.1 Keyboard | A | All functionality available via keyboard | Tab through all interactions |
-| 2.1.2 No Keyboard Trap | A | Focus not trapped (except modals — must have escape) | Press Escape in all overlays |
-| 2.4.1 Bypass Blocks | A | Skip-to-content link or landmark navigation | First focusable = skip link |
-| 2.4.3 Focus Order | A | Focus order preserves meaning and operability | Tab order matches visual flow |
-| 2.4.4 Link Purpose | A | Link purpose clear from link text or context | Avoid "click here", "read more" |
-| 2.4.6 Headings and Labels | AA | Headings and labels are descriptive | No generic "Section 1" headings |
-| 2.4.7 Focus Visible | AA | Keyboard focus indicator is visible | No `outline: none` without replacement |
-
-## Understandable
-
-| Criterion | Level | Requirement | Test |
-|-----------|-------|-------------|------|
-| 3.1.1 Language of Page | A | `lang` attribute on `<html>` | Check `<html lang="en">` |
-| 3.2.1 On Focus | A | Focus doesn't trigger context change | No auto-submit on focus |
-| 3.2.2 On Input | A | Input change doesn't auto-navigate without warning | Select menus don't auto-submit |
-| 3.3.1 Error Identification | A | Errors identified and described in text | Not just red border — include message |
-| 3.3.2 Labels or Instructions | A | Labels or instructions for user input | All form fields labeled |
-| 3.3.3 Error Suggestion | AA | Suggest fixes when known (e.g., format hints) | "Use format MM/DD/YYYY" |
-| 3.3.4 Error Prevention | AA | Legal/financial submissions reversible or confirmable | Confirm before delete |
-
-## Robust
-
-| Criterion | Level | Requirement | Test |
-|-----------|-------|-------------|------|
-| 4.1.1 Parsing | A | Valid HTML (no duplicate IDs, proper nesting) | Run HTML validator |
-| 4.1.2 Name, Role, Value | A | UI components have accessible name, role, state | All custom widgets have ARIA |
-| 4.1.3 Status Messages | AA | Status messages programmatically determinable | `role="status"` or `aria-live` |
-
-## Quick Color Contrast Thresholds
-
-| Text Type | Minimum Ratio |
-|-----------|--------------|
-| Normal text (<18pt / <14pt bold) | 4.5:1 |
-| Large text (≥18pt / ≥14pt bold) | 3:1 |
-| UI components (borders, icons) | 3:1 |
-| Decorative / disabled elements | No requirement |
+---
+name: wcag-checklist
+type: framework
+applies-to: [design-audit]
+standard: WCAG 2.1 AA
+---
+
+# WCAG 2.1 AA — Key Criteria Reference Card
+
+## Perceivable
+
+| Criterion | Level | Requirement | Test |
+|-----------|-------|-------------|------|
+| 1.1.1 Non-text Content | A | All images have `alt` text | Check `<img>` for `alt` attribute |
+| 1.3.1 Info and Relationships | A | Structure conveyed via markup (headings, lists, labels) | Heading hierarchy is logical |
+| 1.3.3 Sensory Characteristics | A | Instructions don't rely on shape/color/location alone | "Click the red button" → add label |
+| 1.4.1 Use of Color | A | Color not the only means of conveying information | Error state uses icon + color |
+| 1.4.3 Contrast (Minimum) | AA | Text ≥ 4.5:1, large text ≥ 3:1 | Use contrast checker |
+| 1.4.4 Resize Text | AA | Text resizable to 200% without loss of content | Test at 200% browser zoom |
+| 1.4.10 Reflow | AA | Content reflows at 320px width without horizontal scroll | Test at 320px viewport |
+| 1.4.11 Non-text Contrast | AA | UI components ≥ 3:1 against adjacent colors | Buttons, inputs, focus rings |
+| 1.4.12 Text Spacing | AA | No content loss with: line-height 1.5, letter-spacing 0.12em | Apply via user stylesheet |
+| 1.4.13 Content on Hover | AA | Hover/focus content dismissible, hoverable, persistent | Tooltips must stay on hover |
+
+## Operable
+
+| Criterion | Level | Requirement | Test |
+|-----------|-------|-------------|------|
+| 2.1.1 Keyboard | A | All functionality available via keyboard | Tab through all interactions |
+| 2.1.2 No Keyboard Trap | A | Focus not trapped (except modals — must have escape) | Press Escape in all overlays |
+| 2.4.1 Bypass Blocks | A | Skip-to-content link or landmark navigation | First focusable = skip link |
+| 2.4.3 Focus Order | A | Focus order preserves meaning and operability | Tab order matches visual flow |
+| 2.4.4 Link Purpose | A | Link purpose clear from link text or context | Avoid "click here", "read more" |
+| 2.4.6 Headings and Labels | AA | Headings and labels are descriptive | No generic "Section 1" headings |
+| 2.4.7 Focus Visible | AA | Keyboard focus indicator is visible | No `outline: none` without replacement |
+
+## Understandable
+
+| Criterion | Level | Requirement | Test |
+|-----------|-------|-------------|------|
+| 3.1.1 Language of Page | A | `lang` attribute on `<html>` | Check `<html lang="en">` |
+| 3.2.1 On Focus | A | Focus doesn't trigger context change | No auto-submit on focus |
+| 3.2.2 On Input | A | Input change doesn't auto-navigate without warning | Select menus don't auto-submit |
+| 3.3.1 Error Identification | A | Errors identified and described in text | Not just red border — include message |
+| 3.3.2 Labels or Instructions | A | Labels or instructions for user input | All form fields labeled |
+| 3.3.3 Error Suggestion | AA | Suggest fixes when known (e.g., format hints) | "Use format MM/DD/YYYY" |
+| 3.3.4 Error Prevention | AA | Legal/financial submissions reversible or confirmable | Confirm before delete |
+
+## Robust
+
+| Criterion | Level | Requirement | Test |
+|-----------|-------|-------------|------|
+| 4.1.1 Parsing | A | Valid HTML (no duplicate IDs, proper nesting) | Run HTML validator |
+| 4.1.2 Name, Role, Value | A | UI components have accessible name, role, state | All custom widgets have ARIA |
+| 4.1.3 Status Messages | AA | Status messages programmatically determinable | `role="status"` or `aria-live` |
+
+## Quick Color Contrast Thresholds
+
+| Text Type | Minimum Ratio |
+|-----------|--------------|
+| Normal text (<18pt / <14pt bold) | 4.5:1 |
+| Large text (≥18pt / ≥14pt bold) | 3:1 |
+| UI components (borders, icons) | 3:1 |
+| Decorative / disabled elements | No requirement |