skills.rest
Buckeyes22
Buckeyes22COMMUNITY
Explore all skills by this author →
GitHub

design-review

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

Updated Aug 23, 2026
Search Tags:#spacing#hierarchy#visual-qa#design-audit#before-after#ui-polish#plan-design-review
One-click install
npx skills add https://github.com/Buckeyes22/weather-app --skill design-review-buckeyes22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/Buckeyes22/weather-app/tree/main/docs/corpora/gstack/design-review
Command: npx skills add https://github.com/Buckeyes22/weather-app --skill design-review-buckeyes22

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.

Core Features & Use Cases

  • Visual audits of layouts, typography, spacing, and hierarchy
  • Atomic commits of fixes with before/after verification via screenshots
  • Plan-mode prep to align designs before implementation

Quick Start

Run a visual audit on the current page to identify inconsistencies, then apply fixes and verify with updated screenshots

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I find and fix visual inconsistencies in my UI code?▼

Run a visual audit to identify spacing issues, hierarchy problems, and AI slop patterns in your UI code. The tool iteratively fixes these inconsistencies and commits each fix atomically with before and after screenshots for verification.

What is plan-mode design review and when do I need it?▼

Plan-mode design review aligns visual hierarchy and spacing before implementation begins. Use the /plan-design-review command to prepare and route design decisions, ensuring UI polish is established prior to writing source code.

How do I audit spacing and hierarchy problems on a live site?▼

Apply the visual QA process to live sites to detect spacing and hierarchy problems. It identifies visual inconsistencies and slow interactions, then applies fixes directly to the source code with before and after screenshots.

Can I verify UI polish fixes with before and after screenshots?▼

Yes, visual QA verifies UI polish by capturing before and after screenshots. Each fix is committed atomically, allowing you to iteratively re-verify that visual inconsistencies and spacing issues are resolved.

What's the best way to remove AI slop patterns from generated UI code?▼

Use a visual design audit to detect and remove AI slop patterns from UI code. The tool iteratively fixes these issues in the source, committing each change atomically and verifying the layout with screenshots.

Does the design review workflow support iterative visual polish?▼

Yes, the design review workflow supports iterative visual polish. It repeatedly identifies visual inconsistencies, applies fixes to the source code, and verifies the results with updated screenshots until the UI is consistent.

Related Skills

Explore More Design & Creative Skills→
studyzystudyzy

design-review

Identify visual inconsistencies, spacing issues, and hierarchy problems in live designs.

Community
Advanced
olaafrossiolaafrossi
10

design-review

Audit live interfaces for visual consistency and patch issues via atomic commits.

Community
Advanced
NaKMiersNaKMiers
1

design-review

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

Community
Advanced
filipnyquistfilipnyquist

design-review

Audit and fix visual design issues on live sites with atomic commits.

Community
Advanced