skills.rest
andersoncollab
andersoncollabCOMMUNITY
Explore all skills by this author →
GitHub

design-qa

Capture baseline screenshots and perform pixel-level diffs to detect visual regressions.

Updated Aug 23, 2026
Search Tags:#visual regression#pixel perfect#figma to code#cross-browser testing#design checklist#screenshot diff#responsive QA
One-click install
npx skills add https://github.com/andersoncollab/design-agent --skill design-qa-andersoncollab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-qa
Source: https://github.com/andersoncollab/design-agent/tree/main/skills/design-qa
Command: npx skills add https://github.com/andersoncollab/design-agent --skill design-qa-andersoncollab

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Unnoticed UI regressions, cross-browser rendering differences, and layout issues that only appear at certain viewport sizes can derail product launches and cause rework after deployment.

Core Features & Use Cases

  • Visual regression testing: Capture baseline screenshots and automatically diff new renders to flag pixel-level changes for review.
  • Cross-browser and responsive QA: Validate critical UI behaviors across desktop and mobile browsers using a structured test matrix and breakpoint spot-checks.
  • Pre-launch design checklists: Run repeatable, documentation-friendly verification across states, accessibility, typography, spacing, contrast, and dark mode.
  • Figma-to-code comparison workflow: Verify design token values (spacing, typography, color, radii, shadows) match what is computed in the browser.

Quick Start

Run design QA for your release by triggering the skill with the prompt: "design QA for the launch screenshots and responsive breakpoints."

Frequently Asked Questions about design-qa

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

FAQPage Schema
How do I automate visual regression testing for UI changes?▼

Automate visual regression testing by capturing baseline screenshots and performing pixel-level diffs to detect visual regressions before release. This workflow applies to web and product UI validation across cross-browser and responsive scenarios.

What is the best way to verify a Figma to code design token conversion?▼

Verify Figma to code design token conversion by checking that computed browser values for spacing, typography, color, radii, and shadows match the design file. This ensures pixel-perfect validation before launch.

How do I run cross-browser testing and responsive QA for my web app?▼

Run cross-browser testing and responsive QA by validating critical UI behaviors across desktop and mobile browsers using a structured test matrix and breakpoint spot-checks to identify layout issues at specific viewport sizes.

Can I use a design checklist for dark mode and component state validation?▼

Use a pre-launch design checklist to run repeatable verification across component states, accessibility, typography, spacing, contrast, and dark mode. This documentation-friendly process ensures comprehensive UI validation.

Why does my layout break only at certain viewport sizes?▼

Layout issues that only appear at certain viewport sizes occur due to responsive breakpoint rendering differences. Perform breakpoint spot-checks and screenshot diffing across a browser and OS test matrix to catch these pixel-level changes.

What do I need to perform pixel perfect screenshot diffing for a release?▼

Pixel perfect screenshot diffing requires a repeatable workflow with baseline screenshot capture, pixel-level comparison, a defined browser and OS test matrix, breakpoint spot-checks, and checklist-driven sign-off to ensure validation.

Related Skills

Explore More Design & Creative Skills→
drhazemibclcdrhazemibclc

design-implementation-reviewer

Identify pixel deviations between live UI implementations and Figma designs.

Community
Advanced
Generous-CorpGenerous-Corp
13

screenshot

Capture and validate headless Pulp UI renders against reference images.

Official
Advanced
dylantarredylantarre
38

token-docs

Generate structured Markdown documentation from CSS, JSON, or JS design tokens.

Community
Intermediate
jshsakurajshsakura
22

browser-debugger

Automates browser-based reproduction and evidence collection for UI bugs.

Community
Advanced