skills.rest
xotong
xotongCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit UI designs for visual inconsistencies and implement fixes with before/after screenshots.

2|Updated May 8, 2026
Search Tags:#screenshots#aesthetic#visual-qa#design-review#before-after#ui-polish
One-click install
npx skills add https://github.com/xotong/claude-marketplace --skill design-review-xotong
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/xotong/claude-marketplace/tree/main/plugins/gstack/skills/design-review
Command: npx skills add https://github.com/xotong/claude-marketplace --skill design-review-xotong

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual polish gaps across UI—spacing, hierarchy, and consistency—are common and costly. This skill identifies these issues, proposes concrete fixes, and iterates until the design reads clearly, with atomic commits and before/after verification.

Core Features & Use Cases

  • Visual QA audits that detect spacing, alignment, typography, color, and component consistency across the interface.
  • Propose and implement fixes in source, then verify outcomes with before/after screenshots and incremental commits.
  • Plan-mode design review for upfront scoping using /plan-design-review before implementation.

Quick Start

Run the design-review skill on your project to audit visuals and commit fixes 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 identify and fix UI visual inconsistencies like spacing and hierarchy problems?▼

Visual QA audits detect UI inconsistencies in spacing, alignment, hierarchy, and color, then propose and implement concrete fixes in the source code to resolve these visual issues.

How do I verify UI polish changes with before and after screenshots?▼

Before and after screenshots verify UI polish changes by capturing the visual state before implementing fixes and comparing it to the outcome after source modifications are applied.

Can I scope a design review before implementing visual fixes?▼

Yes, you can use a plan-mode design review to scope visual QA upfront, allowing you to identify inconsistencies and plan fixes before applying them to the source code.

What is the best way to ensure UI fixes follow design system guidelines?▼

To ensure UI fixes follow design system guidelines, apply proposed corrections across relevant components and verify that changes maintain consistency with established design rules.

How do I safely apply visual fixes across multiple UI components?▼

To safely apply visual fixes across components, implement the proposed changes incrementally, use atomic commits for each fix, and verify outcomes with before and after screenshots.

Related Skills

Explore More Design & Creative Skills→
shanehollomanshaneholloman

design-review

Audit UI pages, components, and breakpoints against a design-review checklist.

Community
Advanced
himes19himes19

design-review

Audit frontend code for visual design issues and generate atomic fixes with before/after evidence.

Community
Advanced
cegit27cegit27
3

design-review

Detect and fix visual design inconsistencies in web interfaces via source code.

Official
Advanced
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced