skills.rest
GTC6244
GTC6244COMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit UI pages for typography, spacing, color, and alignment inconsistencies.

Updated Apr 5, 2026
Search Tags:#typography#accessibility#design-system#spacing#visual-qa#design-review#ui-polish
One-click install
npx skills add https://github.com/GTC6244/ToolBridge --skill design-review-gtc6244
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/GTC6244/ToolBridge/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/GTC6244/ToolBridge --skill design-review-gtc6244

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA identifies and fixes visual inconsistencies across UI components, typography, spacing, color, and interactions to deliver cohesive designs and faster polish cycles.

Core Features & Use Cases

  • Visual Audit: scan pages for typography, spacing, color, alignment, and hierarchy issues.
  • Plan-Mode Fixes: propose atomic fixes, iterate with before/after screenshots, and commit changes.
  • Design-System Enforcement: check for adherence to tokens, components, and accessibility guidelines across the product.
  • Use Case: a designer requests a polish pass on the home page to align with the updated design system.

Quick Start

Audit the current UI page or component for visual polish by specifying the target (e.g., "checkout page").

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 inconsistencies in UI components across live web pages?▼

Fix visual inconsistencies by scanning live UI pages for typography, spacing, color, and alignment issues, then applying atomic fixes with before/after visuals to ensure cohesive designs.

What is visual QA for UI polish and when do I need it?▼

Visual QA for UI polish is the process of auditing design-system adherence across components to identify interaction and hierarchy issues, needed when aligning design handoffs or updating product pages.

How do I check my design system adherence for typography and spacing tokens?▼

Check design-system adherence by auditing UI components against typography and spacing tokens, verifying that visual hierarchy and interaction polish align with accessibility guidelines across desktop and mobile.

Can I use design review for both desktop and mobile interaction polish?▼

Yes, design review applies to both desktop and mobile, focusing on interaction polish, color consistency, and alignment to deliver atomic fixes and commit-ready diffs across responsive pages.

What's the best way to audit a checkout page for alignment and hierarchy issues?▼

The best way to audit a checkout page is to run a visual QA scan targeting typography, spacing, and hierarchy, generating before/after screenshots and commit-ready diffs for atomic fixes.

Why does my design handoff have spacing and color inconsistencies across components?▼

Spacing and color inconsistencies occur when components deviate from design-system tokens; a visual QA audit identifies these deviations and provides atomic fixes to enforce visual alignment.

Related Skills

Explore More Design & Creative Skills→
g4rcezg4rcez
48

plan-design-review

Analyze a live website and produce a prioritized design audit with annotated screenshots.

Community
Advanced
ZiadNagarZiadNagar

ui-designer

Apply visual design systems to produce UI guidelines and design tokens.

Community
Advanced
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
zinohomezinohome
1

visual-regression-tester

Capture and compare UI screenshots with Playwright and Chromatic.

Community
Advanced