skills.rest
fray-cloud
fray-cloudCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Identify and fix visual design inconsistencies, spacing, hierarchy, and slow interactions across UI.

Updated Mar 23, 2026
Search Tags:#typography#spacing#hierarchy#design-review#visual QA#before-after#ui polish
One-click install
npx skills add https://github.com/fray-cloud/coin --skill design-review-fray-cloud
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/fray-cloud/coin/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/fray-cloud/coin --skill design-review-fray-cloud

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA for design work, catching visual inconsistencies, spacing issues, hierarchy problems, and slow interactions, then guiding fixes that improve the user experience.

Core Features & Use Cases

  • Systematic visual audits surface spacing, typography, alignment, and contrast issues.
  • Iterative fixes are committed atomically with before/after verification.
  • Plan-mode reviews enable design polish before implementation and live-site improvements after release.

Quick Start

Start a design audit by selecting a page and running a visual check to surface issues and generate fixes.

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 UI?▼

Run a visual QA design review to systematically identify spacing, typography, alignment, and hierarchy issues across your UI, then apply atomic fixes with before-and-after verification.

What is the best way to audit UI hierarchy and typography before implementation?▼

Plan-mode design reviews audit UI hierarchy and typography before implementation by surfacing visual inconsistencies, ensuring spacing and contrast rules are met before code is written.

How do I polish live-site UI components across multiple pages?▼

Run visual checks across pages to surface inconsistencies, then commit iterative fixes atomically with before/after verification to validate improvements on your live site.

Can I review slow interactions and visual issues at the same time?▼

Yes, design reviews surface visual inconsistencies like spacing and hierarchy problems alongside slow interactions, guiding fixes that improve the overall user experience simultaneously.

Does design review work without external dependencies or components?▼

Yes, visual QA design review operates with no external dependencies or components, using internal tooling workflows to route prompts and guide atomic fixes for visual polish.

When should I not use an automated visual QA workflow?▼

Avoid automated visual QA when addressing complex functional logic or backend performance issues, as it specifically targets visual design inconsistencies, spacing, hierarchy, and interaction speed.

Related Skills

Explore More Design & Creative Skills→
CarbeneAICarbeneAI
9

design-review

Detect visual QA issues in live UI and document atomic fixes.

Community
Advanced
romiluz13romiluz13
161

ui-design

Design UI layouts with visual hierarchy, spacing, color, and state design.

Community
Basic
zzxtbetazzxtbeta

design-review

Audit live UI designs for visual inconsistencies and fix them with atomic commits.

Community
Advanced
apeejay-educationapeejay-education

design-review

Audit UI designs for visual inconsistencies and spacing issues.

Official
Advanced