SkillsAdd

plugin87/ux-ui-agent-skills

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.

First seen Jun 8, 2026

Installation

$ npx skills add plugin87/ux-ui-agent-skills --skill design-qa
View on skills.sh ↗ GitHub repository ↗

Summary

  • 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.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

agent-browser Shared topics
vercel-labs/agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…

810.4K installs
supabase-postgres-best-practices Shared topics
supabase/agent-skills

Postgres best practices maintained by Supabase, for Postgres running anywhere. Load this skill …

391.6K installs
vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
web-design-guidelines Shared topics
vercel-labs/agent-skills

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

617.3K installs
microsoft-foundry Shared topics
microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …

576.5K installs
azure-diagnostics Shared topics
microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …

568.9K installs

Also in this package

Other skills from plugin87/ux-ui-agent-skills · top by installs.

npx skills add plugin87/ux-ui-agent-skills
image-to-code 375 design-review 273 a11y-audit 242 redesign 236 design-tokens 232 design-code 229 apply-aesthetic 226 ux-writing 225 brandkit 224 design-component 217

Browse all from plugin87/ux-ui-agent-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 902
License MIT License
Default branch main
Open issues 1
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,969 B
  • docs SUMMARY.md 314 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 218 installs

SKILL.md

Skill: Design QA

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

Steps

  1. 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/validatetokens.py, python3 scripts/validatecontrast.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.