📋
QualityMarkdown

Design QA Checklist

by Owl-Listener

Design QA Checklist is a Quality skill for Claude Code, published by Owl-Listener in designer-skills.

2.1K stars335 forkson Owl-Listener/designer-skillsAdded 2026/08/18+2% in starsRepository updated 2026/08/08
View source on GitHubDownload repo ZIP
agenticagentic-aiaiai-toolsclaude-codedesign-systemdesign-systemsprompt-engineeringskillsux-design
Install in seconds
Install Design QA Checklist
Copy Design QA Checklist into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/Owl-Listener/designer-skills/tree/main/design-ops/skills/design-qa-checklist ~/.claude/skills/design-qa-checklist

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/Owl-Listener/designer-skills.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file
design-ops/skills/design-qa-checklist/SKILL.md in Owl-Listener/designer-skills
Installs to
~/.claude/skills/design-qa-checklist
Collection
One of 25 skills cataloged from this repository
Category
Quality — 1354 skills

What Design QA Checklist does

Design QA Checklist builds a systematic checklist for verifying that a build matches the design specification, used at implementation review.

Design QA Checklist is cataloged under Quality on DirSkills. Design QA Checklist comes from a repository tagged agentic, agentic-ai, ai, ai-tools and claude-code.

Documentation

README

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

Frequently asked about Design QA Checklist

  • What else does Owl-Listener publish alongside Design QA Checklist?

    Design QA Checklist is one of 25 skills that DirSkills catalogs from Owl-Listener/designer-skills, the repository it ships in. Its siblings there include Accessibility Audit, Affinity Diagram and Card Sort Analysis. Each one is a separate skill with its own page in this directory, installs the same way Design QA Checklist does, and is maintained by Owl-Listener in that same repository. The rest of the collection is listed on the Owl-Listener/designer-skills page.

  • How does Design QA Checklist compare to other Quality skills?

    Design QA Checklist ranks #558 by stars among the 1354 Quality skills in this catalog. The most-starred ones next to it are Benchmark, Benchmark Optimization Loop and API Design Patterns. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Design QA Checklist against them. Open each page to compare what they document and how they install.

More from Owl-Listener/designer-skills

Design QA Checklist is one of 25 skills cataloged on DirSkills from Owl-Listener/designer-skills.

See all 25 skills →
♿
2w ago

Accessibility Audit

Accessibility Audit examines an existing interface against WCAG criteria, identifies barriers, and provides severity-rated findings with remediation steps. Use it when you have a design or build to assess now, not for planning future assistive-technology testing sessions.
Quality
2.1K335
🗂️
2w ago

Affinity Diagram

Affinity Diagram clusters qualitative data points into themes and insight statements. Use it when synthesising across multiple sessions or sources to create a structured hierarchy with supporting evidence.
Data
2.1K335
🗂️
2w ago

Card Sort Analysis

Card Sort Analysis analyzes open or closed card sort results into a proposed grouping and label set. Use it after running a sort study to inform navigation and content organization.
Frontend
2.1K335
🧩
2w ago

Component Spec

Component Spec specifies one component's props, states, variants, accessibility, and usage rules. Use when defining a library component.
Frontend
2.1K335
💬
2w ago

Design Critique

Design Critique facilitates structured team critique sessions, guiding framing, feedback rules, and actionable outcomes. Use it when running a session with people in the room to keep feedback constructive and aligned.
Frontend
2.1K335
🔍
2w ago

Design Debt Audit

Design Debt Audit inventories and prioritizes accumulated design inconsistencies across a product so teams can plan remediation. Use it before redesigns or when UI drift, accessibility gaps, and structural debt have built up.
Frontend
2.1K335

More Quality skills

Design QA Checklist is one of 1354 Quality skills cataloged on DirSkills, ranked #558 by stars among them.

Browse all Quality skills →
⏱️
3w ago

Benchmark

Benchmark measures performance baselines, detects regressions before and after PRs, and compares stack alternatives for pages, APIs, and builds.
Quality
239.8K36.4K
⏱️
3w ago

Benchmark Optimization Loop

Benchmark Optimization Loop turns vague performance goals into a bounded, measured optimization process. Use it when asked to make something faster, benchmark latency/throughput/cost, or choose the best implementation by repeated measured tests.
Quality
239.8K36.4K
🔌
3w ago

API Design Patterns

API Design Patterns provides conventions and best practices for designing consistent REST APIs. Use it when creating endpoints, reviewing contracts, handling pagination, error responses, status codes, filtering, or versioning.
Quality
239.8K36.4K