＋ Add to collection

Install (CLI)

npx skillmds add owl-listener/design-qa-checklist

Or Copy and Paste in Your Agent chat

Please install the Agent Skill "owl-listener/design-qa-checklist" for me from skillmd.com. A SkillMD skill is a SKILL.md file — plain markdown — that you save into my skills directory. Use whichever fetch route fits your setup: (1) if you have a terminal, run npx -y skillmds add owl-listener/design-qa-checklist; (2) otherwise fetch https://api.skillmd.com/api/skills/owl-listener/design-qa-checklist/raw (served as text/markdown) and save it as design-qa-checklist/SKILL.md in your skills directory; (3) if the SkillMD MCP tools are connected, call skillmd_download with slug "owl-listener/design-qa-checklist" and save the returned files under design-qa-checklist/. Show me the SKILL.md before saving if you'd like me to review it. If your skills directory is read-only (e.g. the Claude desktop app), save the files to a working folder instead and tell me — I'll add them through my app's skills settings.

README badge

Show this skill's registry status in your repo:

[![SkillMD](https://skillmd.com/badge/owl-listener/design-qa-checklist.svg)](https://skillmd.com/skills/owl-listener/design-qa-checklist)

design-qa-checklist

Name: design-qa-checklist
Rating: 4.2 (5 reviews)
Author: Owl Listener

owl-listener/design-qa-checklist · Agent Skill

by Owl Listener · single

Published Jul 5, 2026 · Last updated Jul 6, 2026

Create systematic QA checklists to verify that design implementations match specifications across visual accuracy, layout, interaction, content, accessibility, and cross-platform categories.

SKILL.md

Design QA Checklist

You are an expert in creating systematic QA checklists for verifying design implementation.

What You Do

You create checklists that help designers systematically verify that implementations match design specifications.

QA Categories

Visual Accuracy

Colors match design tokens
Typography matches specified styles
Spacing and sizing match specs
Border radius, shadows, opacity correct
Icons are correct size and color
Images are correct aspect ratio and quality

Layout

Grid alignment is correct
Responsive behavior matches specs at each breakpoint
Content reflows properly
No unexpected overflow or clipping
Minimum and maximum widths respected

Interaction

All states render correctly (default, hover, focus, active, disabled)
Transitions and animations match specs
Click/touch targets are adequate size (44px minimum)
Keyboard navigation works in correct order
Focus indicators are visible

Content

Real content fits the layout (no lorem ipsum in production)
Truncation works as specified
Empty states display correctly
Error messages are correct
Loading states appear as designed

Accessibility

Screen reader announces correctly
Color contrast meets WCAG AA
Focus management works
ARIA labels and roles are correct
Reduced motion is respected

Cross-Platform

Works in required browsers
Works on required devices
Handles different text sizes (OS accessibility settings)
Handles different screen densities

QA Process

Self-review by developer against checklist
Designer visual QA pass
File bugs with screenshots comparing design vs implementation
Prioritize bugs by severity
Verify fixes

Best Practices

QA against the design spec, not memory
Test with real content and data
Check edge cases, not just happy paths
Use browser dev tools to verify exact values
Document recurring issues for prevention

---
name: design-qa-checklist
description: Create systematic QA checklists to verify that design implementations match specifications across visual accuracy, layout, interaction, content, accessibility, and cross-platform categories.
---
# Design QA Checklist
You are an expert in creating systematic QA checklists for verifying design implementation.
## What You Do
You create checklists that help designers systematically verify that implementations match design specifications.
## QA Categories
### Visual Accuracy
- Colors match design tokens
- Typography matches specified styles
- Spacing and sizing match specs
- Border radius, shadows, opacity correct
- Icons are correct size and color
- Images are correct aspect ratio and quality
### Layout
- Grid alignment is correct
- Responsive behavior matches specs at each breakpoint
- Content reflows properly
- No unexpected overflow or clipping
- Minimum and maximum widths respected
### Interaction
- All states render correctly (default, hover, focus, active, disabled)
- Transitions and animations match specs
- Click/touch targets are adequate size (44px minimum)
- Keyboard navigation works in correct order
- Focus indicators are visible
### Content
- Real content fits the layout (no lorem ipsum in production)
- Truncation works as specified
- Empty states display correctly
- Error messages are correct
- Loading states appear as designed
### Accessibility
- Screen reader announces correctly
- Color contrast meets WCAG AA
- Focus management works
- ARIA labels and roles are correct
- Reduced motion is respected
### Cross-Platform
- Works in required browsers
- Works on required devices
- Handles different text sizes (OS accessibility settings)
- Handles different screen densities
## QA Process
1. Self-review by developer against checklist
2. Designer visual QA pass
3. File bugs with screenshots comparing design vs implementation
4. Prioritize bugs by severity
5. Verify fixes
## Best Practices
- QA against the design spec, not memory
- Test with real content and data
- Check edge cases, not just happy paths
- Use browser dev tools to verify exact values
- Document recurring issues for prevention

Owl-Listener/designer-skills/tree/main/design-ops/skills/design-qa-checklist commit · acc3e574b3

▌
frontend-design-review · microsoft bundle
Review UI implementations against design quality standards and design system compliance, or create distinctive, production-grade frontend interfaces from scratch.

2.7k
repo stars
▌
muapi-ui-design · samuraigpt bundle
Generates high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles, translating product requirements into design specifications with platform-specific layouts and design tokens.

3.7k
repo stars
▌
data-visualization · owl-listener
Design clear, accessible data visualizations with appropriate chart selection and styling.

1.7k
repo stars
▌
ui-ux-pro-max · auto-skiller bundle
Generates design systems and UI/UX recommendations for React Native projects, with domain-specific searches for styles, colors, typography, and best practices.

1
repo stars
▌
design-chain-audit · joshuashepherd
Audits a codebase against a multi-layer design system, checking token, primitive, component, and layout drift with automated grep checks and severity ratings.

1
repo stars
▌
handoff-spec · owl-listener
Create developer handoff specifications with measurements, behaviors, assets, and edge cases.

1.7k
repo stars

Frequently asked questions

How do I install the design-qa-checklist skill?

Run npx skillmds add owl-listener/design-qa-checklist in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the design-qa-checklist skill do?

Create systematic QA checklists to verify that design implementations match specifications across visual accuracy, layout, interaction, content, accessibility, and cross-platform categories. It is listed under Design & Media, Coding & Dev Tools, Productivity, Design Systems, UI Design on SkillMD.

Is design-qa-checklist safe to use?

SkillMD's automated safety review verdict for this skill is PASS. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with design-qa-checklist?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is design-qa-checklist free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published design-qa-checklist?

Owl Listener (@owl-listener) published this skill. Their other Agent Skills are listed on their SkillMD profile.