skills.rest
Yaugourt
YaugourtCOMMUNITY
Explore all skills by this author →
𝕏@YaugourtGitHub

design-review

Audits live UI builds for typography, spacing, and hierarchy issues and proposes fixes.

2|2|Updated Dec 1, 2024
Search Tags:#typography#ui#design-system#spacing#design-review#visual-audit
One-click install
npx skills add https://github.com/Yaugourt/LiquidTerminal_Back --skill design-review-yaugourt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/Yaugourt/LiquidTerminal_Back/tree/main/.agents/skills/gstack/design-review
Command: npx skills add https://github.com/Yaugourt/LiquidTerminal_Back --skill design-review-yaugourt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA for UI designs, catching inconsistencies in typography, spacing, and hierarchy, and guiding precise fixes to improve polish and readability.

Core Features & Use Cases

  • Visual audit of typography, spacing, alignment, color usage, and component consistency across pages and design systems.
  • Iterative fixes with atomic commits and before/after verification, including screenshots to confirm improvements.
  • Plan-mode design reviews to scope changes before implementation and to align with design tokens and style guides.

Quick Start

Audit the current page for typography and spacing issues, apply fixes, and verify 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 audit my live UI for visual polish and spacing inconsistencies?▼

A visual UI audit checks live builds for typography, spacing, alignment, and hierarchy inconsistencies. This design review process proposes precise fixes and verifies improvements using before and after screenshots.

What is a design review for a UI design system?▼

A design review for a UI design system is a visual audit that catches inconsistencies in typography, spacing, and hierarchy across pages and components. It scopes changes to align with design tokens and guides fixes to improve polish and readability.

Can I plan design changes before applying fixes to a live site?▼

Yes, you can use plan-mode design reviews to scope changes before implementation. This approach aligns updates with design tokens and style guides, ensuring structured iterative fixes with atomic commits.

How do I verify UI fixes after a visual audit?▼

You verify UI fixes after a visual audit by comparing before and after screenshots. This screenshot-based verification confirms that iterative fixes with atomic commits successfully improve the visual polish of the live site.

Does this design review process work with existing style guides and design tokens?▼

Yes, the design review process works with existing style guides and design tokens. It scopes visual audits and iterative fixes to align with your established component consistency and design system standards.

Related Skills

Explore More Design & Creative Skills→
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate
singhianand23045singhianand23045

design-review

Audit live sites for visual inconsistencies and apply fixes with atomic commits.

Community
Advanced
MeechYourGoalsMeechYourGoals
2

chravel-ui-consistency

Audit Chravel's user interface for visual consistency and design system adherence.

Community
Intermediate
summarybotngsummarybotng
2

visual-testing-advanced

Detect UI regressions via pixel-perfect screenshot comparison across viewports and browsers.

Official
Advanced