skills.rest
sajalsuhane
sajalsuhaneCOMMUNITY
Explore all skills by this author →
Website𝕏@SajalSuhane1998GitHub

design-review

Audit UI designs for visual inconsistencies and apply atomic fixes with before/after verification.

Updated Dec 22, 2019
Search Tags:#typography#spacing#design-review#git-commit#before-after#ui-polish#visual-audit
One-click install
npx skills add https://github.com/sajalsuhane/sajalsuhane.github.io --skill design-review-sajalsuhane
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/sajalsuhane/sajalsuhane.github.io/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/sajalsuhane/sajalsuhane.github.io --skill design-review-sajalsuhane

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA for UI designs. Finds visual inconsistencies, spacing issues, hierarchy problems, and slow interactions, and fixes them iteratively with before/after verification.

Core Features & Use Cases

  • Visual QA: identify misalignments, inconsistent spacing, and typography issues across components.
  • Plan-design-review: for pre-implementation design reviews to define polish steps.
  • Iterative Fixes: commit each polish as atomic changes and verify with before/after screenshots.
  • Design-to-Dev Handoff: produce concrete, codified design polish guidance for developers.

Quick Start

Audit the current UI for visual inconsistencies and generate a plan for polish, then apply fixes with before/after verification.

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 and spacing issues in my UI design?▼

Visual inconsistencies and spacing issues are fixed through a visual audit that identifies misalignments and iteratively applies atomic fixes, verifying each polish with before and after screenshots.

What is the best way to review UI designs before implementation?▼

Pre-implementation UI reviews use a plan-design-review process to define polish steps, ensuring visual hierarchy and typography issues are caught and codified for developers before coding begins.

How do I automate design QA with before and after verification?▼

Design QA is automated by enforcing atomic fixes for layout issues and committing each change with clear git-commit messages, using before/after screenshots to verify the visual improvements.

Can I use this visual audit for both live product UI and component reviews?▼

Yes, the visual audit handles both live product UI reviews and ongoing design polish across individual components, removing visual inconsistencies and layout issues at any scale.

How does design-to-dev handoff work for UI polish guidance?▼

Design-to-dev handoff produces concrete, codified design polish guidance for developers, translating visual audit findings into actionable steps to fix typography, spacing, and hierarchy problems.

When should I avoid using an automated UI polish workflow?▼

Avoid automated UI polish workflows when dealing with non-visual backend logic or when a design system is not yet established, as the audit targets visual hierarchy, spacing, and typography inconsistencies.

Related Skills

Explore More Design & Creative Skills→
mulyovedmulyoved

design-review

Audit live sites for visual inconsistencies and spacing issues.

Community
Advanced
romiluz13romiluz13
161

ui-design

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

Community
Basic
Jia-Hong-PengJia-Hong-Peng

design-review

Detect visual design inconsistencies and commit atomic fixes with screenshots.

Community
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced