qa-design-review

Detect and fix UI inconsistencies, spacing, and hierarchy issues in source code.

Updated Nov 11, 2025

Search Tags:#design #ui #screenshots #design-system #visual-qa #design-review

Ready to run

npx skills add https://github.com/rshelekhov/dotfiles --skill qa-design-review-rshelekhov

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: qa-design-review
Source: https://github.com/rshelekhov/dotfiles/tree/main/claude/skills/gstack/qa-design-review
Command: npx skills add https://github.com/rshelekhov/dotfiles --skill qa-design-review-rshelekhov

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA for UI consistency catches misalignment, broken spacing, unclear visual hierarchy, AI-generated slop patterns, and slow interactions. It provides a structured workflow to identify and fix these issues directly in the source code, with atomic commits and verifications via before/after screenshots.

Core Features & Use Cases

Detect visual inconsistencies, spacing issues, and hierarchy problems that degrade the user experience.
Iteratively fix issues in source code and commit each fix atomically, re-verifying with before/after screenshots.
Generate a plan for non-intrusive assessments using report-only mode via /plan-design-review.

Quick Start

Follow the on-demand workflow to run a design review against the target UI and generate a design-audit report for the selected pages.

Frequently Asked Questions about qa-design-review

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

FAQPage Schema

How do I identify and fix visual UI inconsistencies in my source code?▼

Run a visual QA review to detect misalignment and spacing issues, then fix them directly in source code with atomic commits and verify improvements using before/after screenshots.

What is visual QA for UI consistency and when do I need it?▼

Visual QA for UI consistency is a structured review process that catches misalignment, broken spacing, and unclear hierarchy that degrade user experience, ensuring interfaces align with the project's design system.

Can I generate a design audit report without modifying my source code?▼

Yes, you can perform a non-intrusive assessment by using the plan-design-review command to operate in report-only mode, generating a design audit artifact without modifying source code.

How do I verify UI hierarchy and spacing fixes after applying them?▼

Verify UI hierarchy and spacing fixes by capturing before and after screenshots of the modified interface, ensuring the visual improvements align with the project's design system guidelines.

What types of visual hierarchy problems can a UI design review detect?▼

A UI design review detects visual hierarchy problems including misalignment, broken spacing, unclear visual structure, and AI-generated slop patterns that degrade the overall user experience.