skills.rest
whd4
whd4COMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit UI alignment, typography, color, and spacing for visual inconsistencies.

Updated Apr 1, 2026
Search Tags:#typography#pixel-perfect#spacing#design-review#visual QA#UI polish
One-click install
npx skills add https://github.com/whd4/gstack --skill design-review-whd4
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/whd4/gstack/tree/main/design-review
Command: npx skills add https://github.com/whd4/gstack --skill design-review-whd4

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA and polish are essential to delivering pixel-perfect interfaces. This skill helps teams detect visual inconsistencies, spacing issues, and suboptimal interactions early, reducing rework and design debt.

Core Features & Use Cases

  • Visual audit for alignment, typography, color usage, and spacing across components.
  • Plan-mode design review to suggest fixes, commit atomic changes, and re-check with before/after visuals.
  • Proactive polish suggestions when stakeholders request a design polish or visual QA on a live site.

Quick Start

Describe a component or page you want audited and I will perform a visual QA pass and return a before/after plan.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I perform a visual QA audit for spacing and typography inconsistencies in a UI?▼

A visual QA audit identifies alignment, typography, color usage, and spacing issues across components to improve pixel-level fidelity. You describe a component or page, and the skill returns a before/after plan with suggested fixes.

What is pixel-perfect design review and when do I need it for a live web app?▼

Pixel-perfect design review detects visual inconsistencies and suboptimal interactions early to reduce rework and design debt. It is needed when polishing live web apps, dashboards, or design handoffs where typography, color, and spacing require fidelity.

Can I use an AI-assisted visual QA workflow to commit atomic UI fixes and re-verify them?▼

Yes, an AI-assisted visual QA workflow supports plan-mode design reviews to suggest fixes, commit atomic changes, and re-check results with before/after visuals. This ensures pixel-level fidelity is maintained throughout the polishing process.

Does automated design review work for design handoffs and dashboards?▼

Automated design review works for design handoffs, dashboards, and live web apps where typography, color, spacing, and interactions need polish. It performs a visual audit across components to detect visual inconsistencies and suboptimal interactions.

What's the best way to fix visual inconsistencies and spacing issues across UI components?▼

The best way to fix visual inconsistencies is through a visual QA pass that audits alignment, typography, and spacing across components, then returns a before/after plan with atomic commits of fixes and re-verification steps.

Related Skills

Explore More Design & Creative Skills→
rshelekhovrshelekhov

plan-design-review

Audit live websites for visual design gaps and generate a prioritized DESIGN.md report.

Community
Advanced
legotec73legotec73

design-review

Audit live websites for visual issues and apply atomic code fixes.

Community
Advanced
HuijiroHuijiro

impeccable-normalize

Audit and realign UI components to match design system tokens, spacing, and patterns.

Community
Advanced
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate