design-review

Name: design-review
Availability: InStock
Author: cattboy

Audit and fix visual design issues with atomic commits and before/after verification.

1|Updated Mar 13, 2026

Search Tags:#consistency #design-review #visual QA #design-iteration #before-after #UI polish

Ready to run

npx skills add https://github.com/cattboy/lil_bro --skill design-review-cattboy

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/cattboy/lil_bro/tree/main/.claude/skills/design-review
Command: npx skills add https://github.com/cattboy/lil_bro --skill design-review-cattboy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designer's eye QA: finds visual inconsistency, 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 QA: detects misalignments, spacing inconsistencies, and hierarchy gaps across UI.
Atomic fixes & verifications: commits each change atomically and re-checks with before/after screenshots.
Plan-mode reviews: supports plan-design-review workflow for early design direction.

Quick Start

Describe a design issue you want audited and I will perform a visual QA pass and propose fixes.

Frequently Asked Questions about design-review

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

FAQPage Schema

How do I fix visual inconsistency and spacing issues in my UI?▼

Visual QA detects misalignments, spacing inconsistencies, and hierarchy problems across your UI, then proposes targeted fixes. It iteratively resolves visual inconsistency by committing each change atomically and re-verifying the results with before and after screenshots.

Can I review design direction before implementation starts?▼

Yes, you can review design direction before implementation using the plan-mode design review workflow. This allows you to evaluate live sites, design systems, and mockups early to validate visual choices before writing any code.

What is the best way to verify UI polish after fixing design gaps?▼

The best way to verify UI polish is through an atomic commit workflow with before and after verification. After fixing design gaps in source code, each change is committed individually and re-checked using screenshots to ensure the visual issue is resolved.

Does visual QA work on design systems and mockups or only live sites?▼

Visual QA works across live sites, design systems, and mockups. It audits spacing, hierarchy, and consistency problems across components and pages, ensuring visual consistency regardless of whether the target is a deployed site or a static mockup.

How do I spot AI slop patterns and hierarchy gaps in my components?▼

To spot AI slop patterns and hierarchy gaps, run a visual QA pass on your components. The audit detects misalignments, slow interactions, and visual inconsistency, then iteratively fixes the identified issues directly in your source code.