gstack-design-review

Audit live site visuals for spacing, typography, and hierarchy issues.

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

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

  • Visual QA audits of layouts, typography, spacing, and hierarchy to ensure a polished UI
  • Iterative fixes with atomic commits and before/after verification using screenshots
  • Plan-mode design reviews via /plan-design-review for pre-implementation polish

Quick Start

Provide the live site URL and optional scope, and the tool will perform a visual audit, propose fixes, and document changes for atomic application.

Frequently Asked Questions about gstack-design-review

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

FAQPage Schema
How do I run a visual QA audit on my live website to fix spacing and typography issues?

Run a visual QA audit by providing your live site URL and optional scope. The tool audits layouts, typography, spacing, and hierarchy, then iteratively fixes issues in source code with atomic commits and before/after screenshot verification.

What is a plan-mode design review and when do I need it for UI polish?

A plan-mode design review evaluates visual polish before implementation begins. Use the /plan-design-review command to audit spacing, typography, and hierarchy issues proactively, ensuring UI consistency prior to active development.

Can I use automated screenshot verification to document UI fixes and hierarchy changes?

Yes, you can use automated screenshot verification to document UI fixes. The tool generates before/after screenshots for each iterative fix, applying atomic commits to ensure full traceability for spacing and typography changes.

What's the best way to catch AI slop patterns and visual inconsistencies in a web application?

The best way to catch AI slop patterns and visual inconsistencies is through deterministic visual checks. The tool audits live sites to identify hierarchy problems, slow interactions, and layout issues, then proposes and documents targeted fixes.

Does this design review tool work on specific components or does it require auditing the entire page?

The design review tool works on both specific components and entire pages. You can define an optional scope when providing the live site URL, allowing targeted visual QA audits across different sections of your active project.

Why should I use atomic commits when iteratively fixing visual design issues?

Atomic commits isolate each visual design fix, ensuring traceability and safe rollbacks. By committing changes individually with before/after screenshot verification, you maintain source code integrity while resolving spacing and typography problems.