design-review

Identify and fix visual design inconsistencies in UI designs.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual design inconsistencies and misaligned spacing degrade user experience. This skill provides a designer's eye QA to identify typography issues, spacing problems, visual hierarchy gaps, AI slop patterns, and slow interactions, then fixes them by iteratively applying source-code changes 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". Proactively suggest improvements when you mention a live site that needs polish. (gstack)

Core Features & Use Cases

  • Visual QA checks for typography, spacing, alignment, and visual hierarchy.
  • Iterative fixes in source code with atomic commits and before/after verification.
  • Plan-mode design review workflow using /plan-design-review.

Quick Start

Request a visual QA pass on a live page and let the skill propose fixes with before/after visuals.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I fix visual design inconsistencies and spacing issues in my web app UI?

Run a visual QA pass to identify typography, spacing, and visual hierarchy issues in your UI, then apply iterative source-code fixes with before/after screenshot verification to achieve pixel-perfect polish.

What is visual QA for front-end design and how does it improve perceived quality?

Visual QA for front-end design is the process of auditing live pages or component libraries to detect misaligned spacing and typography issues, resolving them to improve the overall perceived quality of the interface.

How do I check my live page for AI slop patterns and visual hierarchy gaps?

Check your live page for AI slop patterns by requesting a design polish audit, which scans the UI to identify visual hierarchy gaps and apply iterative source-code fixes for improved perceived quality.

Can I audit a component library for typography and alignment issues before implementation?

Yes, you can audit a component library before implementation by using the plan-mode design review workflow, which evaluates typography and alignment issues to propose targeted fixes before coding begins.

Does the design review process support before and after screenshot verification?

Yes, the design review process supports before and after verification by capturing screenshots after applying iterative source-code fixes, ensuring visual design inconsistencies are fully resolved.

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

Use a plan-mode design review to evaluate and propose improvements before implementation, and use a direct visual QA pass when ready to apply iterative source-code fixes to live pages.