design-qa

Solid

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.

Web & Frontend 731 stars 77 forks Updated today

Install

View on GitHub

Quality Score: 83/100

Stars 20%
95
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
80
Issue Health 10%
50
License 10%
0
Description 5%
100

Skill Content

# 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/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 sem...

Details

Author
plugin87
Repository
plugin87/ux-ui-agent-skills
Created
5 months ago
Last Updated
today
Language
JavaScript
License
None

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

design-qa

Runs a pre-ship design QA gate on a screenshot, URL, or PR HTML/CSS - checks states, WCAG 2.2 contrast, touch targets, breakpoints, and keyboard paths, then returns a pass/fail table and fix list. Trigger phrases - "QA this screen", "is this ready to ship", "check this PR for accessibility issues", "audit before launch". Skip for style critique - use design-review instead; this checks only verifiable gate criteria.

1 Updated 1 weeks ago
humbleteam
AI & Automation Listed

qa-gates

Use to run the multi-lens QA model that gates every feature and the final ship. Trigger before closing any feature ("is this feature done", "QA this", "feature check") and before shipping ("ship check", "final QA", "ready to release"). Per feature, dispatch security-engineer + code-quality-reviewer + adversarial-tester + qa-engineer (plus ux-design-reviewer for any UI feature and performance-engineer for perf-sensitive ones) in PARALLEL — all applicable lenses must pass. Final gate adds a best-practices pass + UAT + smoke before ship.

1 Updated 3 weeks ago
StielChancellor
Web & Frontend Listed

design-qa

Use this skill when Tyler asks to QA the current state after a manual edit, verify the pipeline ran cleanly, check whether a recent change resolves a compliance issue, or confirm the 5 PDF sheets are fresh relative to the current spec. Produces a verdict: PASS, PASS_WITH_WARNINGS, or BLOCKED. DO NOT invoke for a full review (use design:review) or the iterative loop (use design:loop).

8 Updated yesterday
tstapler