design-review

Audit typography, spacing, hierarchy, color, and interaction cues on live sites or prototypes.

3|3|Updated Mar 26, 2026

Search Tags:#typography #frontend #design-system #spacing #design-review #visual QA #ui-polish

Ready to run

npx skills add https://github.com/tsensei/ReelMistri --skill design-review-tsensei

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/tsensei/ReelMistri/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/tsensei/ReelMistri --skill design-review-tsensei

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 checks for typography, spacing, rhythm, hierarchy, color contrast, and alignment against a design system.
Iterative fixes with atomic commits and re-verification via before/after screenshots.
Plan-mode design reviews before implementation to catch issues early.
Proactive polish suggestions for live sites and tokens.

Quick Start

Provide a target URL and scope, and the design-review skill will audit, patch, and verify UI issues across the pages.

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 my UI for polish and consistency?▼

Visual QA audits your UI by checking typography, spacing, hierarchy, color contrast, and alignment against a design system. The skill patches source code iteratively, committing fixes atomically and verifying results with before/after screenshots.

Can I review design prototypes before implementation to catch visual issues early?▼

Yes, you can review design prototypes before implementation using plan-mode design reviews. This catches visual inconsistencies, spacing issues, and hierarchy problems early, before any code is actually written.

What is the best way to fix AI slop patterns and visual inconsistencies in frontend code?▼

The best way to fix visual inconsistencies and AI slop patterns is through iterative source code patching. The process applies atomic commits for each fix and re-verifies the UI using before/after screenshots to ensure the design system is adhered to.

How do you ensure design system adherence when auditing typography and spacing?▼

Design system adherence is ensured by auditing typography, spacing, rhythm, and color usage against the project's existing tokens and standards. Fixes are committed atomically and verified via screenshots to maintain strict visual consistency.

Does visual QA work with live sites or only design prototypes?▼

Visual QA works with both live sites and design prototypes. You provide a target URL and scope, and the skill audits, patches, and verifies UI issues across the specified pages with proactive polish suggestions.

Why should I use atomic commits for UI polish and visual fixes?▼

Atomic commits isolate each visual fix into a single, verifiable change. This ensures that typography, spacing, or hierarchy adjustments can be individually tracked and verified via before/after screenshots without breaking the broader UI.