What is the design-qa-checklist skill?
The design-qa-checklist skill is a SKILL.md in the design-ops plugin of Owl-Listener's designer-skills repository. It has an AI coding agent write a QA checklist covering visual accuracy, layout, interaction, content, accessibility and cross platform checks, then run a five step process to find and fix mismatches.
The design-qa-checklist skill belongs to the design-ops plugin in Owl-Listener's designer-skills pack. It casts the agent as an expert in systematic QA checklists, so a designer can verify that a finished build matches the design specification.
Its description points to implementation review as the moment to use it. For the spec that engineers build from in the first place, the description sends you to handoff-spec instead.
The six QA categories
- Visual accuracy: colors match design tokens (the design-token skill covers naming and tiers), typography and spacing match specs, radius, shadows and opacity are correct, icons and images have the right size and aspect ratio.
- Layout: grid alignment, responsive behavior at each breakpoint (see responsive design for breakpoint patterns), content reflow, no unexpected overflow or clipping, and minimum and maximum widths.
- Interaction: default, hover, focus, active and disabled states, transitions, 44px minimum touch targets, keyboard order and visible focus indicators.
- Content: real content fits, truncation works, and empty, error and loading states appear as designed.
- Accessibility: screen reader output, WCAG AA contrast, focus management, ARIA labels and reduced motion. For a full WCAG pass, use the accessibility audit skill.
- Cross platform: required browsers and devices, OS text size settings and different screen densities.
The QA process
- Self-review by the developer against the checklist.
- A designer visual QA pass.
- File bugs with screenshots comparing design against implementation.
- Prioritize bugs by severity.
- Verify the fixes.
Who the design-qa-checklist skill is for
Best for
- Designers and developers verifying a build against the design.
- Teams that want bugs filed with screenshots comparing design against implementation.
- Pages where states, content edge cases and keyboard behavior need checking, not just the happy path.
Not for
- Writing the spec engineers build from. That is the job of handoff-spec.
Use it with UiChemy
When the design lives in Figma and the build is a WordPress page, UiChemy Figma to WordPress converts the design into editable pages. Run this checklist on the result to confirm it matches. Click Get Started on uichemy.com.
How to install Design QA Checklist Skill: Verify a Build Against the Design
/plugin marketplace add Owl-Listener/designer-skillsAdd the marketplace
Enter the command above in your AI coding agent. It points the agent at the repository, and no plugin installs at this stage.
Install the plugin
Run
/plugin install design-ops@designer-skills. design-ops is the plugin that holds this skill, and the Discover tab under/pluginoffers the same choice.Gemini CLI route
Each plugin is also a Gemini CLI extension. Clone the repository to a temporary folder, create
.gemini/extensionsin your project root, and copy the repository's.gemini/extensionscontents into it.Ask for a checklist
Name the screen or component and its design file, and ask the agent for a QA checklist for implementation review.
Check that it loaded
Ask for a QA checklist for one screen. Expect the six categories, from visual accuracy to cross platform, followed by the five step QA process.
Key features
- Six QA categoriesVisual accuracy, layout, interaction, content, accessibility and cross platform each get their own group of checks.
- Token based visual checksThe visual list asks whether colors match design tokens, whether typography matches the specified styles and whether radius, shadows and opacity are correct.
- Responsive checksLayout checks cover behavior at each breakpoint, content reflow, overflow or clipping, and minimum and maximum widths.
- Full state coverageInteraction checks name default, hover, focus, active and disabled states, plus transitions and animations matching the specs.
- Touch and keyboard targetsClick and touch targets must be at least 44px, keyboard navigation must follow the correct order and focus indicators must be visible.
- Content edge casesNo placeholder text in production, truncation as specified, and empty, error and loading states shown as designed.
- Accessibility passScreen reader announcements, WCAG AA contrast, focus management, ARIA labels and roles, and respect for reduced motion.
- Five step QA processDeveloper self-review, designer visual QA, bugs filed with screenshots comparing design to implementation, severity ranking, then verification of fixes.
- Best practices baked inCheck against the design spec instead of memory, test with real content and data, cover edge cases and use browser dev tools to verify exact values.
Frequently asked questions
What is the design-qa-checklist skill?
It is a SKILL.md in the design-ops plugin of Owl-Listener's designer-skills repository. It has an AI coding agent build a checklist for verifying that an implementation matches the design, covering visuals, layout, interaction, content, accessibility and cross platform behavior, and it describes a five step QA process.
How do I install design-qa-checklist?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install design-ops@designer-skills. The skill is part of the design-ops plugin. You can also pick the plugin from the Discover tab under /plugin, and Gemini CLI users can copy the repository's extensions folder into their project.
When should I use design-qa-checklist?
Use it at implementation review, when a build exists and you want to confirm it matches the design. For the spec engineers build from, the skill's description points to handoff-spec instead. The checklist then covers visual accuracy, layout, interaction, content, accessibility and cross platform checks.
What does design-qa-checklist check?
It checks six areas: visual accuracy, layout, interaction, content, accessibility and cross platform behavior. Examples include colors matching design tokens, responsive behavior at each breakpoint, all states rendering correctly, WCAG AA contrast, and handling different text sizes and screen densities.
How does the design-qa-checklist QA process work?
The developer self-reviews against the checklist, then the designer does a visual QA pass. Bugs are filed with screenshots comparing design and implementation, prioritized by severity, and finally verified once fixed. The skill adds that QA should be done against the design spec, not memory.
What license does design-qa-checklist use?
It is MIT licensed, as is the whole Owl-Listener/designer-skills repository. The pack holds 273 skills and 76 commands across 33 plugins, and design-qa-checklist is one of the skills in the design-ops plugin. The nine design practice plugins, design-ops among them, ship from this repository.
Does design-qa-checklist cover accessibility?
Yes. Its accessibility group checks that screen readers announce content correctly, color contrast meets WCAG AA, focus management works, ARIA labels and roles are correct and reduced motion is respected. The interaction group adds visible focus indicators, a correct keyboard order and 44px minimum touch targets.