Stats
Actions
Tags
From design-system-ops-internal
Audit ONE component for accessibility across keyboard, focus management, screen-reader/ARIA, colour contrast, and motion, mapped to WCAG 2.1 AA, and report audit thoroughness AND accessibility as two separate labels. Triggers on 'is this component accessible', 'a11y check on X', 'audit accessibility of the dialog', 'WCAG check for this component'. Do NOT trigger for theme-wide contrast across all tokens — use theme-audit. Do NOT trigger for a multi-check release gate — use the component-to-release agent. Do NOT trigger for the whole library's coverage — use component-audit.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-system-ops-internal:accessibility-per-componentThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Audits a single component's accessibility against WCAG 2.1 AA, depth calibrated to its
Audits a single component's accessibility against WCAG 2.1 AA, depth calibrated to its Challenge Rating, and reports two separate labels — how thorough the audit could be and how accessible the component is. Static analysis has limits; this skill is explicit about them rather than implying certainty.
Reads (all optional): stack.component_roots; severity_overrides; accepted_findings.
None. Reads component source; recommends in-browser / assistive-tech verification for what static analysis can't confirm.
Assign the component's Challenge Rating (see component-bestiary-reference). CR7+ cannot be fully signed off statically — set the thoroughness ceiling accordingly and name the manual checks still required.
Map each to WCAG 2.1 AA success criteria:
## Accessibility — <component> (CR<n>)
**Audit thoroughness: <🟢/🟡/🟠/🔴>** · **Accessibility: <🟢/🟡/🟠/🔴>**
**Headline.** <The blocking issue + first fix, one sentence.>
| Surface | Result | WCAG | Note |
|---------|--------|------|------|
| Keyboard | ✅/⚠️/❌ | 2.1.1 | … |
| Focus | … | 2.4.7 | … |
| SR / ARIA | … | 4.1.2 | … |
| Contrast | … | 1.4.3 | … |
| Motion | … | 2.3.3 | … |
### Findings
**<🔴/🟠/🟡/⚪> <title>** (WCAG <SC>)
- Evidence: `src/components/ui/dialog.tsx:NN` — no focus restore on close
- Why it matters: <one line>
- Remediation: <the specific fix>
- Caveat: <one, or omit>
### Manual verification still required
<for CR5+: the keyboard/SR walkthroughs static analysis can't replace>
### Scope
- Inspected: <component source; static checks performed>
- Not inspected: live AT behaviour (listed above); theme-wide contrast (→ theme-audit)
- Assumed: contrast from token values; verify borderline pairs in-browser
- Mark accepted findings in `.ds-ops-config.yml › accepted_findings`.
A 🟢 accessibility at 🟠 thoroughness means "looks good on static checks — still walk it with a keyboard and a screen reader". Don't let a partial audit read as a clean bill.
Searches MemPalace before answering questions about past work, people, projects, or prior decisions. Returns verbatim stored content instead of guessing from model memory.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
npx claudepluginhub quadrivia-ai/design-system-ops-internal --plugin design-system-ops-internal