design-review

Audit design visuals for inconsistencies and document fixes with screenshots.

1|Updated May 6, 2026
One-click install
npx skills add https://github.com/yckkkk/reo --skill design-review-yckkkk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/yckkkk/reo/tree/main/.agents/skills/design-review
Command: npx skills add https://github.com/yckkkk/reo --skill design-review-yckkkk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designer's eye QA: finds visual inconsistencies, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots. For plan-mode design review (before implementation), use /plan-design-review. Use when asked to audit the design, visual QA, check if it looks good, or design polish. Proactively suggest when the user mentions visual inconsistencies or wants to polish the look of a live site. (gstack)

Core Features & Use Cases

  • Visual QA pass to detect alignment, spacing, typography, color contrast, and interaction latency.
  • Iterative fixes with atomic commits and screenshot verification.
  • Plan-mode design review workflow before implementation using /plan-design-review.

Quick Start

Audit the current UI and generate before/after screenshots to verify fixes.

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 QA pass to detect spacing and typography inconsistencies in my UI?

Visual QA audits a design's visuals to identify inconsistencies in spacing, typography, hierarchy, and interaction lag, then documents fixes. It applies to live sites and design drafts, using before and after screenshots to verify improvements.

Can I review and polish a design before implementation starts?

Yes, you can review a design before implementation using the plan-mode design review workflow. This evaluates planned designs for visual inconsistencies and hierarchy problems prior to writing any source code.

How do I iteratively fix visual inconsistencies and verify the results in source code?

To fix visual inconsistencies iteratively, the workflow applies each fix in source code with an atomic commit, then re-verifies the results using before and after screenshots to confirm the visual improvement.

What specific visual problems does a design audit find on a live site?

A design audit finds alignment issues, spacing problems, typography errors, color contrast flaws, hierarchy inconsistencies, AI slop patterns, and slow interaction latency on live sites, then documents and fixes them.

Does visual QA work with live sites or only design drafts?

Visual QA works with both live sites and design drafts. It audits visuals to identify inconsistencies in spacing, typography, hierarchy, and interaction lag, then documents fixes with before and after screenshots.

When should I use a plan-mode design review instead of a standard visual audit?

Use a plan-mode design review before implementation begins to evaluate planned designs for visual inconsistencies. Use a standard visual audit when you need to iteratively fix spacing and hierarchy issues in existing source code.