Design QA skill

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 ux-ui-agent-skills@3.1.0 init or as the Claude Code plugin. npx skills@1.7.6 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

1. Read ${CLAUDE_SKILL_DIR}/../../../workflows/design-qa.md (the QA pyramid: token/lint gates → automated a11y → visual regression → manual a11y).
2. 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.
3. 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).
4. Add visual regression snapshots across variants × sizes × states × light/dark + key breakpoints + RTL; freeze animations + deterministic data.
5. 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.