add SKILL

.claude/skills/a11y-audit/SKILL.md

@@ -0,0 +1,64 @@
+---
+name: a11y-audit
+description: Run a WCAG 2.2 AA accessibility audit on a component or page. Checks semantic HTML, ARIA, keyboard navigation, color contrast, and screen reader compatibility.
+disable-model-invocation: true
+argument-hint: "[file-or-directory]"
+context: fork
+agent: frontend-architect
+---
+
+# Accessibility Audit
+
+Audit `$ARGUMENTS` for WCAG 2.2 Level AA compliance.
+
+## Steps
+
+1. **Read the target code** — understand the component/page structure
+2. **Check against this checklist:**
+
+### Semantic HTML
+- [ ] Correct heading hierarchy (h1 → h2 → h3, no skips)
+- [ ] Landmark elements used (`nav`, `main`, `aside`, `footer`)
+- [ ] Lists use `ul`/`ol`/`li`, not styled divs
+- [ ] Buttons are `<button>`, links are `<a>`, not divs with onClick
+
+### ARIA
+- [ ] Interactive elements have accessible names (label, aria-label, aria-labelledby)
+- [ ] Form inputs have associated labels
+- [ ] Dynamic content updates use `aria-live` regions
+- [ ] Decorative images have `aria-hidden="true"` or empty alt
+- [ ] No redundant ARIA (e.g., `role="button"` on `<button>`)
+
+### Keyboard
+- [ ] All interactive elements are focusable and operable via keyboard
+- [ ] Focus order follows visual order
+- [ ] Focus is trapped in modals/dialogs
+- [ ] Skip-to-content link present (page-level)
+- [ ] No keyboard traps
+
+### Visual
+- [ ] Text contrast ratio >= 4.5:1 (normal), >= 3:1 (large)
+- [ ] Focus indicators visible on all interactive elements
+- [ ] `prefers-reduced-motion` respected for animations
+- [ ] `prefers-color-scheme` supported if applicable
+- [ ] Content readable at 200% zoom
+
+### States
+- [ ] Loading states announced (`aria-busy`)
+- [ ] Error messages programmatically associated with inputs (`aria-describedby`)
+- [ ] Disabled states use `disabled` attribute, not just styling
+
+3. **Report format:**
+
+```
+## Accessibility Audit: [component/file name]
+
+### Issues Found
+1. [CRITICAL/HIGH/MEDIUM/LOW] — description + file:line + fix
+
+### Passes
+- [What's done well]
+
+### Recommendations
+- [Improvements beyond minimum compliance]
+```