skills.rest
soeiroo
soeirooCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/soeiroo/multifunctional-web --skill design-qa-checklist-soeiroo
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
htafollahtafolla
5

multimodal-looker

Analyze diagrams, screenshots, and UI mockups to extract information and assess design.

Community
Advanced
officebeatsofficebeats
8

bug-chaser

Triage bug reports into engineering tickets with validated reproduction steps.

Community
Advanced
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced
lucasloutayflucasloutayf

browser-testing-with-devtools

Diagnose browser-rendered issues by inspecting real-time DOM, console, and network data.

Community
Advanced