skills.rest
idy-00
idy-00COMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-qa

Set up design QA gates covering token lint, accessibility, contrast, and visual regression testing.

Updated Jul 20, 2026
Search Tags:#accessibility#design tokens#visual regression#axe-core#design qa#ci gates#wcag contrast
One-click install
npx skills add https://github.com/idy-00/paytrack --skill design-qa-idy-00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-qa
Source: https://github.com/idy-00/paytrack/tree/main/backend/.agents/skills/design-qa
Command: npx skills add https://github.com/idy-00/paytrack --skill design-qa-idy-00

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Design quality regresses silently when teams ship components without automated gates — hardcoded hex values creep in, contrast fails WCAG, and accessibility issues reach production. This Skill establishes the full QA pyramid so every PR is blocked from introducing token, contrast, a11y, or visual regressions. ## Core Features & Use Cases - Fast CI Gates: Run token validation, batch WCAG contrast checks over token pairs, and hardcoded-value linting (no raw hex/px/timing) on every commit or pull request. - Automated Accessibility: Integrate axe-core or Pa11y across component states (error, loading, disabled, expanded, selected) with zero serious/critical violations allowed to merge, plus a real-render contrast gate using headless Chromium that measures computed-style, alpha-composited contrast. - Visual Regression & Manual Sign-off: Snapshot components across variants, sizes, states, light/dark themes, breakpoints, and RTL with frozen animations, then complete the manual a11y checklist (keyboard, screen reader, 400% reflow, 200% text-spacing, reduced-motion, forced-colors) per release. - Use Case: Before shipping a new component library, wire these gates into your CI workflow so an unreviewed PR cannot introduce an unresolved token alias, contrast failure, raw hex value, or axe violation. ## Quick Start Set up the design QA gates for my component library and run the token, contrast, and hardcoded-value checks on the current source directory.

Frequently Asked Questions about design-qa

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up design QA gates in CI for a component library?▼

Start with the fast gates on every commit: run token validation, batch WCAG contrast checks over token pairs, and a hardcoded-value lint that rejects raw hex, px, and timing values in component code. Then add automated a11y and visual regression layers.

How to catch contrast failures that static token checks miss?▼

Use the real-render contrast gate, which opens the page in headless Chromium, disables transitions, and measures the true computed-style, alpha-composited contrast of every text element. Run it with a dark-mode flag to cover both themes.

What accessibility testing tools work for component states?▼

axe-core or Pa11y can run automated accessibility audits over each component's states including error, loading, disabled, expanded, and selected. The gate should block merges on any serious or critical violation.

Does visual regression testing cover dark mode and RTL layouts?▼

Yes, snapshots should span variants, sizes, states, light and dark themes, key breakpoints, and RTL. Animations must be frozen and data made deterministic so snapshots stay stable across runs.

What does the manual accessibility checklist include before release?▼

The manual checklist covers keyboard navigation, screen reader behavior, 400% reflow, 200% text-spacing, reduced-motion, and forced-colors modes. It must be signed off per release since automated tools cannot catch these issues.

Related Skills

Explore More Design & Creative Skills→
MozurokMozurok
6

color-contrast-architect

Audits design token foreground/background pairs against WCAG 2.2 contrast thresholds across themes.

Community
Advanced
storybook-astrostorybook-astro
54

release-manager

Automate Storybook Astro package releases with version bumps, changelogs, and npm publishing.

Official
Advanced
PrasadTelasulaPrasadTelasula

component-testing

Test React components with React Testing Library and Playwright for frontend correctness.

Community
Intermediate
uiverifyuiverify
21

economical-visual-tests

Consolidates component variants and states into gallery stories to reduce billed visual snapshots.

Official
Basic