design-review

Detect visual inconsistencies in web designs using browser debugging tools.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion, WebSearch, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill assists designers and developers in identifying and fixing visual inconsistencies, spacing issues, and other quality issues within designs. It ensures a consistent, high-quality product before release.

Core Features & Use Cases

  • Visual Inconsistency Detection: Finds visual errors, including alignment, hierarchy, and color issues.
  • Spacing Issues and Hierarchy Problems: Pinpoints issues like text spacing, margin width, and component alignment.
  • AI Slop Pattern and Interaction Slowdowns: Addresses problems arising from AI-generated elements, including inconsistency in design elements and responsiveness.
  • Iterative Fixes and Atomic Commits: Atomically applies fixes, keeping the history clean and verifiable.
  • Plan-Mode Review: Useful for design review before implementation with /plan-design-review.

Quick Start

To perform a visual QA on the 'features/homepage' branch, use the command: /design-review --branch features/homepage.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I detect visual inconsistencies in my web design before merging code?

You can detect visual inconsistencies by running a design QA process that iterates over design components and compares visual differences before and after corrections. This identifies layout, alignment, and spacing issues using browser debugging tools before code merges into the main branch.

How do I fix spacing issues and hierarchy problems in my web interface?

Fix spacing and hierarchy problems by pinpointing text spacing, margin width, and component alignment errors during a visual QA audit. The process atomically applies iterative fixes to the interface, keeping your version history clean and verifiable.

Can I review visual fixes for a specific Git branch before implementation?

Yes, you can review visual fixes for a specific Git branch by passing the branch name to the design review command. It also supports a plan-mode review to evaluate design components and visual consistency before implementation begins.

What is the best way to address AI slop patterns and interaction slowdowns in UI components?

Address AI slop patterns and interaction slowdowns by running a visual quality assurance check that identifies inconsistencies in AI-generated design elements and responsiveness. This ensures visual consistency and user experience quality before release.

Does visual quality assurance for web design require browser debugging tools?

Visual quality assurance typically operates using browser debugging tools to compare visual differences before and after corrections. This approach allows you to accurately detect and address layout and element inconsistencies within your web design.