skills.rest
zzxtbeta
zzxtbetaCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit live UI designs for visual inconsistencies and fix them with atomic commits.

Updated Mar 29, 2026
Search Tags:#typography#spacing#design-review#visual QA#before-after#ui polish
One-click install
npx skills add https://github.com/zzxtbeta/design-handbook --skill design-review-zzxtbeta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/zzxtbeta/design-handbook/tree/main/.agents/skills/gstack/design-review
Command: npx skills add https://github.com/zzxtbeta/design-handbook --skill design-review-zzxtbeta

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA gaps cause subtle UI defects to slip through. This skill helps identify visual inconsistencies, spacing issues, typography problems, and hierarchy mistakes, then fixes them by applying atomic commits and re-verifying with before/after screenshots.

Core Features & Use Cases

  • Visual audit across pages and components to catch spacing, typography, and hierarchy issues.
  • Atomic commits that apply fixes and preserve a clean history.
  • Plan-mode design reviews via /plan-design-review to pre-validate changes before implementation.

Quick Start

Point the skill at the target site, run the audit to identify defects, and apply fixes with atomic commits after reviewing before/after screenshots.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I audit my live UI for visual inconsistencies and spacing issues?▼

To audit live UI for visual inconsistencies, point the skill at your target site to scan pages and components for spacing, typography, and hierarchy defects. It identifies these issues and applies fixes through atomic commits.

What is the best way to fix UI typography and spacing defects while keeping a clean git history?▼

The best way to fix UI typography and spacing defects while preserving clean history is applying atomic commits. This skill coordinates with source control to apply fixes incrementally and captures before/after screenshots to re-verify the changes.

Can I pre-validate UI polish changes in plan mode before implementation?▼

Yes, you can pre-validate UI polish changes using the /plan-design-review command. This plan-mode design review allows you to validate fixes for typography and spacing issues before applying the actual atomic commits.

How do before-after screenshots work during a visual QA design review?▼

Before-after screenshots work by capturing the live UI state before fixes are applied and after atomic commits are made. This visual QA mechanism re-verifies that spacing, typography, and hierarchy corrections resolve the identified defects.

Does this visual QA process work across multiple pages and components?▼

Yes, the visual QA process works across multiple pages and components. The skill audits live UI designs comprehensively to catch visual inconsistencies, spacing issues, and hierarchy mistakes throughout your entire target site.

What types of UI defects can a visual design review catch?▼

A visual design review catches subtle UI defects including visual inconsistencies, spacing issues, typography problems, hierarchy mistakes, and interaction slowness. It identifies these gaps across pages and components to prevent them from slipping through.

Related Skills

Explore More Design & Creative Skills→
martin-hsu-testmartin-hsu-test
1

design-review

Audit live pages for visual inconsistencies and fix them in source code.

Community
Advanced
Kevin-Liu-01Kevin-Liu-01
16

qa

Automate real-browser QA testing to discover bugs and generate regression tests.

Community
Advanced
romiluz13romiluz13
161

ui-design

Design UI layouts with visual hierarchy, spacing, color, and state design.

Community
Basic
mulyovedmulyoved

design-review

Audit live sites for visual inconsistencies and spacing issues.

Community
Advanced