design-review

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

Updated Mar 29, 2026
One-click install
npx skills add https://github.com/filipnyquist/caidos --skill design-review-filipnyquist
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/filipnyquist/caidos/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/filipnyquist/caidos --skill design-review-filipnyquist

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 in source code by committing atomic fixes with before/after verification.

Core Features & Use Cases

  • Visual QA across typography, spacing, color contrast, alignment, and component consistency.
  • Iterative fixes in source code with atomic commits and before/after verifications (screenshots).
  • Plan-mode guidance: use /plan-design-review for plan-mode reviews.
  • Use Case: Audit a dashboard with misaligned headers, inconsistent padding, and poor visual hierarchy, then apply fixes and re-verify.

Quick Start

Audit the live site visually, identify typography, spacing, and hierarchy issues, then implement one atomic fix and re-verify 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 fix visual design issues and UI inconsistencies on a live website?

Visual design issues on a live site are fixed by auditing typography, spacing, and hierarchy, then iteratively committing atomic source code fixes with before/after screenshot verification. This process systematically polishes UI layout and resolves visual inconsistencies.

What is visual QA for UI polish and how does the before/after verification process work?

Visual QA for UI polish is the process of auditing live pages for typography, spacing, and hierarchy problems. Before/after verification works by capturing screenshots before applying an atomic source fix and re-capturing after, ensuring visual inconsistencies are resolved.

Do I need a live URL and design guidelines to audit spacing and typography issues?

Yes, performing a visual design review requires access to a live URL and design guidelines. These inputs allow the audit to accurately identify typography, spacing, and hierarchy problems across pages and components before applying fixes to the source repository.

What's the best way to review a dashboard for misaligned headers and inconsistent padding?

The best way to review a dashboard with misaligned headers and inconsistent padding is a visual QA audit. This identifies hierarchy and spacing issues across components, followed by implementing atomic fixes in the source code and verifying with before/after screenshots.

Can I use plan mode to review visual hierarchy and component consistency before fixing?

Yes, you can use plan mode to review visual hierarchy and component consistency before fixing. By utilizing plan-mode guidance, you can audit typography and spacing issues across pages to establish a review plan before committing source code fixes.