design-qa-checklist

Automate systematic QA verification of design implementations against specifications.

Updated Mar 16, 2026

Search Tags:#design #checklist #accessibility #qa #quality-assurance #visual-qa #design-review

Ready to run

npx skills add https://github.com/soeiroo/multifunctional-web --skill design-qa-checklist-soeiroo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-qa-checklist
Source: https://github.com/soeiroo/multifunctional-web/tree/main/.agents/skills/design-qa-checklist
Command: npx skills add https://github.com/soeiroo/multifunctional-web --skill design-qa-checklist-soeiroo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design handoffs often result in misinterpretations between designers and developers. This Skill provides a structured QA checklist to systematically verify that implementations align with design specifications.

Core Features & Use Cases

Visual Accuracy: verify colors, typography, spacing, borders, shadows, and assets against design tokens.
Layout & Responsiveness: ensure grid alignment, breakpoints behavior, and content reflow.
Interaction & Accessibility: validate states, focus, keyboard navigation, ARIA labels, and reduced motion.
Cross-Platform Consistency: confirm behavior across required browsers and devices.
QA Process & Best Practices: self-review, designer QA pass, bug logging with screenshots, prioritization, and regression checks.

Quick Start

Run a design QA pass against the latest mockups using the checklist to verify visual accuracy, layout, accessibility, and interactions.

Frequently Asked Questions about design-qa-checklist

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I run a visual QA check against design specifications after handoff?▼

Run a visual QA check by verifying colors, typography, spacing, borders, shadows, and assets against design tokens using a structured checklist. This ensures implementations align with design specifications.

What is included in a design QA checklist for UI components?▼

A design QA checklist covers Visual Accuracy, Layout, Interaction, Content, Accessibility, and Cross-Platform categories. It validates grid alignment, breakpoints, states, keyboard navigation, and ARIA labels.

How do I validate accessibility and keyboard navigation during a design review?▼

Validate accessibility during a design review by checking focus, keyboard navigation, ARIA labels, and reduced motion. The QA checklist ensures interaction and accessibility specifications are met.

Does this design QA process work for both web and mobile platforms?▼

Yes, this design QA process applies to both web and mobile platforms. It confirms cross-platform consistency by checking behavior across required browsers and devices.

What is the best way to structure a UI component review for cross-platform consistency?▼

The best way to structure a UI component review is using a repeatable QA process. This involves self-review, a designer QA pass, bug logging with screenshots, prioritization, and regression checks.

Why does my design implementation break during content reflow at different breakpoints?▼

Design implementations break during content reflow when layout and responsiveness checks are skipped. The QA checklist verifies grid alignment, breakpoints behavior, and content reflow to prevent this.