How do I install the Design QA skill?

Run npx skillmds@latest add plugin87/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. Capability flags: reads secrets. 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?

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

Design QA by plugin87 — Agent Skill

Name: Design QA
Rating: 4.2 (5 reviews)
Author: plugin87

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.

plugin87 8205579 1.9 KB Updated Sep 9, 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.

Frequently asked questions