Is this skill only for designers?

No, it is designed for both designers conducting visual QA and developers performing self-review before handoff.

Can this help with accessibility compliance?

Yes, it includes specific checks for WCAG AA contrast, focus management, ARIA labels, and reduced motion preferences.

How does this improve the development lifecycle?

It provides a structured verification process that reduces visual bugs, ensures brand consistency, and streamlines the feedback loop between design and engineering.

What areas of design does this skill cover?

It covers visual accuracy, responsive layout, interaction states, content integrity, accessibility standards, and cross-platform compatibility.

Design QA Checklist

Name: Design QA Checklist
Author: sethdford

bysethdford

•

デザインツール

Generates comprehensive checklists to verify that frontend implementations perfectly match design specifications and accessibility standards.

The Design QA Checklist skill empowers designers and developers to maintain high visual fidelity by systematically auditing implementation against design specs. It automates the creation of detailed validation lists covering visual accuracy (tokens, typography, spacing), responsive layout behavior, interactive states, accessibility compliance (WCAG AA), and cross-platform consistency. By providing a structured framework for the handoff process, it reduces visual regressions and ensures that the final product adheres to the original design intent and UX standards.

主な機能

01Systematic visual accuracy verification for colors, typography, and spacing tokens

02Content integrity verification including edge cases, loading states, and error messaging

03Interactive state validation for hover, focus, and motion transitions

04Responsive layout auditing to ensure correct grid alignment and breakpoint behavior

055 GitHub stars

06Accessibility compliance checking against WCAG AA and ARIA standards

ユースケース

01Standardizing the design-to-development handoff process with objective pass/fail criteria

02Performing a final visual audit before a major production release to ensure brand consistency

03Verifying a new component library implementation against Figma specifications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sethdford/claude-skills design-qa-checklist

For use in Claude.ai and ChatGPT

主な機能

01Systematic visual accuracy verification for colors, typography, and spacing tokens

02Content integrity verification including edge cases, loading states, and error messaging

03Interactive state validation for hover, focus, and motion transitions

04Responsive layout auditing to ensure correct grid alignment and breakpoint behavior

055 GitHub stars

06Accessibility compliance checking against WCAG AA and ARIA standards

ユースケース

01Standardizing the design-to-development handoff process with objective pass/fail criteria

02Performing a final visual audit before a major production release to ensure brand consistency

03Verifying a new component library implementation against Figma specifications