design-review

Audit live sites for visual inconsistencies and polish opportunities.

Updated Oct 15, 2025
One-click install
npx skills add https://github.com/vibrationalforce/Echoelmusic --skill design-review-vibrationalforce
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/vibrationalforce/Echoelmusic/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/vibrationalforce/Echoelmusic --skill design-review-vibrationalforce

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—and iteratively fixes them with atomic commits and before/after verification. 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".

Core Features & Use Cases

  • Comprehensive visual audits of pages and components against a design system.
  • Guided fix iterations with before/after verification and atomic commits.
  • Supports plan-mode reviews and generation of actionable feedback for developers.

Quick Start

Start a quick audit on the target URL to identify visual polish opportunities and capture before/after references.

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 audit on a live site to find spacing and hierarchy issues?

Run a visual audit on a live site by targeting a URL to identify visual polish opportunities. The review enforces a design-system alignment phase and a pixel-level audit to find spacing, hierarchy, and interaction state inconsistencies across your defined scope.

What is the best way to fix visual inconsistencies found during a design review?

The best way to fix visual inconsistencies is through iterative source code corrections with atomic commits. After each fix, the workflow re-verifies the changes using before and after screenshots to ensure the visual polish is achieved without regressions.

Can I check if my live site matches my design system before pushing a feature branch?

Yes, you can check live site alignment using diff-aware audits on a feature branch. The review process includes a design-system alignment phase that checks typography and spacing against your defined scope before integration.

Does visual QA work for plan-mode design reviews before implementation?

Visual QA supports plan-mode design reviews before implementation. You can generate actionable feedback for developers by using the dedicated plan-mode review workflow, which evaluates proposed designs without modifying source code.

When should I use a pixel-perfect design review instead of a general visual check?

Use a pixel-perfect design review when you need to catch AI slop patterns, slow interactions, and subtle visual inconsistencies. It enforces a structured workflow with before/after verification reports, going beyond general checks to iteratively fix issues in source code.

Why does my live site design review require before and after verification screenshots?

Before and after verification screenshots are required to validate iterative fixes in source code. This workflow commits each fix atomically and re-verifies the visual output, ensuring that design polish improvements are documented and regressions are caught immediately.