design-review

Audit UI spacing, alignment, hierarchy, and interactions, then fix issues iteratively.

1|Updated May 5, 2026
One-click install
npx skills add https://github.com/yashs33244/my-mac-claude --skill design-review-yashs33244
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/yashs33244/my-mac-claude/tree/main/skills/gstack/design-review
Command: npx skills add https://github.com/yashs33244/my-mac-claude --skill design-review-yashs33244

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Fixes visual inconsistency, spacing, and hierarchy issues in a user interface so the design feels cohesive, intentional, and fast to understand.

Core Features & Use Cases

  • Visual QA for live and planned UI: Audits a design for common “AI slop” patterns, alignment problems, spacing drift, and weak information hierarchy.
  • Iterative code fixes with verification: Applies fixes in source code, then re-verifies with before/after screenshots to ensure changes actually improve the UI.
  • Plan-mode design review support: Performs review before implementation by using /plan-design-review for early feedback and safer iteration.

Quick Start

Tell me to run a visual audit of the current UI and fix any spacing, hierarchy, and inconsistency issues, verifying with 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 run a visual audit to fix UI spacing and hierarchy inconsistencies?

A visual audit fixes UI spacing and hierarchy inconsistencies by scanning the interface for alignment drift and weak information hierarchy. This Skill applies iterative source-code edits and verifies improvements using before and after screenshots.

What is design QA and how does iterative screenshot verification work?

Design QA is the process of polishing visual quality by auditing a UI for spacing, alignment, and interaction issues. Iterative screenshot verification works by applying code fixes and re-screenshots in an atomic loop to ensure changes improve the UI.

Can I review and fix UI design issues before implementation?

Yes, you can review and fix UI design issues before implementation by using the dedicated plan-mode flow. Running /plan-design-review provides early visual audit feedback and enables safer iteration on pre-implementation plans.

What's the best way to automate visual polish for a live site?

The best way to automate visual polish for a live site is executing an atomic fix-and-verify loop. This approach audits for common AI slop patterns and spacing drift, applies source-code fixes, and validates the results with screenshot verification.

Does this visual audit tool work without external dependencies?

Yes, the visual audit tool works without external dependencies. It operates independently to detect spacing consistency issues and interaction inconsistencies, relying solely on screenshots and source-code edits to execute the iterative fixing loop.

Why does my UI look inconsistent and how do I fix spacing drift?

Your UI looks inconsistent due to spacing drift, alignment problems, and weak information hierarchy. You fix these visual issues by running an iterative design QA that audits the interface, applies targeted source-code fixes, and verifies the results with before and after screenshots.