descriptionSet up or run design QA gates for token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manual a11y checklist. Use when the user wants CI quality gates, to prevent design regressions, or to QA a component/screen before shipping. Skill: Design QA
Requirements
This skill needs the full UX/UI Agent Skills kit: the gates, the references and
the design-system library. Install it with npx [email protected] init
or as the Claude Code plugin. npx [email protected] add copies the skill folder and
nothing else. Installed that way, this skill runs in guidance-only mode: no gate
runs, so it gives no verdict.
Step 0: is the kit here? Check once:
ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING
On KIT_MISSING, open your reply with: "Guidance-only mode: the UX/UI Agent
Skills kit is not installed here, so no gate ran and nothing below is
measured." Then work from this file and general practice, under three rules.
Do not guess or cite the contents of a kit file you could not open. State no
measured number (no contrast ratio, no N/N, no "passes WCAG"): write "not
verified" where one would go. End with a line Skipped (kit not installed):
that names every gate script this file tells you to run, then the install
command above.
Stand up the automated + manual gates that stop quality from regressing.
Steps
- Read
${CLAUDE_SKILL_DIR}/../../../workflows/design-qa.md (the QA pyramid: token/lint gates → automated a11y → visual regression → manual a11y).
- Wire the fast gates first (every commit/PR):
python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py, python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py (batch WCAG over the token pairs), and python3 ${CLAUDE_SKILL_DIR}/../../../scripts/lint_hardcodes.py <src> (no raw hex/px/timing in component code). The repo's .github/workflows/ci.yml runs these.
- Add automated a11y (axe-core / Pa11y) over each component's states (error/loading/disabled/expanded/selected), zero serious/critical to merge. Run the real-render contrast gate
node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs measure_render.mjs <file.html> (and --dark). It opens the page in headless Chromium, disables transitions, and measures the true computed-style + alpha-composited contrast of every text element (catches what static token checks miss).
- Add visual regression snapshots across variants × sizes × states × light/dark + key breakpoints + RTL; freeze animations + deterministic data.
- Sign off the manual a11y checklist per release (keyboard, screen reader, 400% reflow, 200% text-spacing, reduced-motion, forced-colors;
${CLAUDE_SKILL_DIR}/../../../accessibility/*).
Verification (definition of done)
- An unreviewed PR cannot introduce an unresolved token alias, a contrast failure, a raw hex/px, or an axe violation: a gate blocks each.
- Snapshots cover dark mode + RTL + the semantic-changing states, not just the happy path.
- Manual a11y checklist signed off for the release.
Set up or run design QA gates for token + hardcoded-value lint, automated a11y (axe), contrast, visual regression across variants/states/themes/RTL, and the manual a11y checklist. Use when the user wa