design-review

Audit live sites for visual consistency and fix issues with atomic commits.

1|3|Updated Mar 19, 2026
One-click install
npx skills add https://github.com/ekrishgupta/gemstack --skill design-review-ekrishgupta
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/ekrishgupta/gemstack/tree/main/design-review
Command: npx skills add https://github.com/ekrishgupta/gemstack --skill design-review-ekrishgupta

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 with atomic commits and re-verification using 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". Proactively suggest when the user mentions visual inconsistencies or wants to polish the look of a live site.

Core Features & Use Cases

  • Visual QA audit to surface spacing, typography, hierarchy, and AI-slop issues
  • Iterative fixes with atomic commits and before/after verification
  • Plan-mode design review for pre-implementation polish
  • Proactive design-polish recommendations on live sites

Quick Start

Run the design-review skill on your target page to perform a visual QA audit, receive actionable fixes, and verify changes with before/after screenshots.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I perform a visual QA audit on a live website?

A visual QA audit surfaces spacing, typography, hierarchy, and interaction issues on live sites, then fixes them iteratively using atomic commits and before/after screenshot verification to ensure polished UI.

What is included in a UI design review for pre-implementation?

A pre-implementation UI design review uses plan-mode to evaluate visual consistency, spacing, hierarchy, and interaction quality before coding begins, ensuring design polish and preventing AI slop patterns from reaching production.

How do I fix UI inconsistencies with before and after screenshots?

Fix UI inconsistencies by applying iterative atomic commits to the codebase, then re-verifying each change using before/after screenshots to confirm the visual hierarchy, spacing, and interaction quality meet polish standards.

Can I audit visual consistency and spacing issues without manual inspection?

Yes, you can audit visual consistency and spacing issues automatically by running the skill on a target page, which detects design flaws and AI slop patterns, then applies and verifies fixes with before/after screenshots.

What's the best way to ensure UI polish across multiple web pages?

The best way to ensure UI polish is running an end-to-end visual QA workflow that audits pages and components for visual consistency, applies commit-at-a-time fixes, and re-checks changes using before/after screenshots.

When should I use a plan-mode design review instead of a direct visual audit?

Use a plan-mode design review for pre-implementation polish before coding starts, and use a direct visual QA audit when fixing visual inconsistencies, spacing, and hierarchy problems on an already live site.