skills.rest
rshelekhov
rshelekhovCOMMUNITY
Explore all skills by this author →
GitHub

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

Related Skills

Explore More Design & Creative Skills→
pastjeanpastjean
8

design-system-analyzer

Extract design tokens and CSS snippets from UI screenshots.

Community
Intermediate
louisfghbvclouisfghbvc
4

design-review

Audit live interfaces and fix visual inconsistencies with atomic commits.

Community
Advanced
tan-yong-shengtan-yong-sheng
1

gstack-design-review

Audit live UIs for visual inconsistencies and spacing issues.

Community
Advanced
ShmurdocShmurdoc

design-review

Automates UI visual audits and fixes identified issues in source code.

Community
Advanced