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.