How do I install the Design QA skill?

Run npx skillmds@latest add zereight/design-qa in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design QA safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design QA?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design QA free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design QA?

zereight (@zereight) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design QA by zereight — Agent Skill

Name: Design QA
Author: zereight

Design QA

Set up or run design QA gates — 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.

zereight e56b860 2.2 KB Updated Sep 17, 2026

File contents

Skill: Design QA

Stand up the automated + manual gates that stop quality from regressing.

Steps

Read 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 scripts/validate_tokens.py, python3 scripts/validate_contrast.py (batch WCAG over the token pairs), and python3 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 scripts/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 — 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.

Kit location

This skill is part of ux-ui-agent-skills v2.4.0.

Resolve every relative path in the steps above against:

.agents/ux-ui-agent-skills/

(from repo root: /Users/tao.exe/Documents/skill/.agents/ux-ui-agent-skills)

Load .agents/ux-ui-agent-skills/CLAUDE.md when you need the full agent persona or Request Router.

---name: design-qadescription: Set up or run design QA gates — 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 QAStand up the automated + manual gates that stop quality from regressing.## Steps1. Read `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 scripts/validate_tokens.py`, `python3 scripts/validate_contrast.py` (batch WCAG over the token pairs), and `python3 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 scripts/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 — `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.---## Kit locationThis skill is part of **ux-ui-agent-skills v2.4.0**.Resolve every relative path in the steps above against:`.agents/ux-ui-agent-skills/`(from repo root: `/Users/tao.exe/Documents/skill/.agents/ux-ui-agent-skills`)Load `.agents/ux-ui-agent-skills/CLAUDE.md` when you need the full agent persona or Request Router.

Frequently asked questions