design-review

Audit live sites for visual inconsistencies and propose atomic fixes.

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

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. Use when asked to "audit the design", "visual QA", "check if it looks good", or "design polish".

Core Features & Use Cases

  • Audits live sites for typography, spacing, hierarchy, and interaction polish.
  • Provides iterative fixes with atomic commits and before/after verification.
  • Supports plan-mode design review workflow for pre-implementation audits.

Quick Start

Navigate to the target URL, run a live design audit, and deliver before/after visual evidence.

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 fix UI inconsistencies?

Run a visual audit on a live site by scanning pages and components for spacing, typography, and hierarchy issues. The tool identifies visual inconsistencies and slow interactions, then proposes atomic source code fixes with before/after verification.

What is the best way to find and fix layout consistency problems in my web project?

Finding layout consistency problems involves checking alignment, spacing, and hierarchy across components. This Skill iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots to demonstrate improved clarity.

Can I check accessibility touchpoints during a design review of my live site?

Yes, you can check accessibility touchpoints during a design review. The audit focuses on design polish, hierarchy, and alignment while specifically evaluating a11y touchpoints across pages and components to propose targeted fixes.

Does the visual QA process commit fixes directly to my source code?

Yes, the visual QA process requires implementing fixes directly in source code. It commits each fix atomically and provides before/after evidence that demonstrates improved usability and clarity for the audited pages.

How do I review UI polish and hierarchy before implementation begins?

To review UI polish before implementation, use the plan-mode design review workflow. This pre-implementation audit evaluates design hierarchy, spacing, and interaction polish prior to writing any source code fixes.

What typographic missteps and spacing issues can a visual audit detect?

A visual audit detects typographic missteps, spacing irregularities, hierarchy problems, and AI slop patterns on live sites. It evaluates these visual inconsistencies and proposes atomic fixes to improve overall clarity and usability.