Design QA Agent Skill

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.

487 tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

482

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill design-qa

The instruction itself

3 sections, as written by the author

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.

Other skills for the same job

different authors, same section of the catalogue

UI Visual Validator

by ComeOnOliver

×2

Rigorous visual validation expert specializing in UI testing, design system compliance, and accessibility verification. Masters screenshot analysis, visual regression testing, and component validation. Use PROACTIVELY to verify UI modifications have achieved their intended goals through comprehensive visual analysis.

Use when you need a deterministic inspection of a WordPress repository (plugin/theme/block theme/WP core/Gutenberg/full site) including tooling/tests/version hints, and a structured JSON report to guide workflows and guardrails.

6k tokens scripts

Frontend Accessibility

by ComeOnOliver

×1

Implement accessible user interfaces with semantic HTML, keyboard navigation, sufficient color contrast, screen reader support, ARIA attributes, and proper focus management. Use this skill when creating or editing React components (.tsx, .jsx files), when implementing forms with labels and inputs, when building interactive elements (buttons, modals, menus, dialogs), when implementing keyboard navigation, when choosing colors and ensuring contrast ratios, when adding ARIA attributes, when testing with screen readers, when implementing focus states and focus management, or when creating heading structures and page landmarks.

Build mobile-first responsive layouts with fluid containers, relative units, standard breakpoints, and touch-friendly design that adapts seamlessly across devices. Use this skill when creating or modifying layouts, implementing media queries, defining breakpoints, choosing sizing units, optimizing for mobile devices, or testing UI across screen sizes. Apply when working with responsive design, mobile layouts, tablet views, desktop views, viewport configuration, or any styling that needs to adapt to different screen sizes and device capabilities.

3k tokens

Visual QA

by code-yeongyu

MUST USE after building/changing any UI or when asked whether a page, component, or TUI looks right. Rigorous visual QA across web/page and terminal UIs. Prefer browser:control-in-app-browser for unauthenticated browser/page QA in Codex, then Playwright/agent-browser/dev-browser. Captures screenshot/TUI evidence with bundled diff scripts, runs design-system/functional and visual-fidelity/CJK reviewer passes, then synthesizes a good/bad verdict. Triggers: visual QA, screenshot/pixel diff, UI looks wrong, reference fidelity, design system check, responsive check, CJK text clipping, TUI alignment, box-drawing drift.

19k tokens scripts

Flutter Add Widget Preview

by flutter

vendor

Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.

29 production-ready scripts for iOS app testing, building, and automation. Provides semantic UI navigation, build automation, accessibility testing, and simulator lifecycle management. Optimized for AI agents with minimal token output.

137k tokens scripts

How to use it

Copy the folder

Take plugin87/design-qa from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.