skills.rest
gfires
gfiresCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit live interfaces for visual inconsistencies and apply atomic fixes.

Updated Aug 23, 2026
Search Tags:#typography#layout#frontend#spacing#design-review#ui-polish#visual-audit
One-click install
npx skills add https://github.com/gfires/motion-analysis --skill design-review-gfires
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/gfires/motion-analysis/tree/main/design-review
Command: npx skills add https://github.com/gfires/motion-analysis --skill design-review-gfires

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual inconsistencies, spacing issues, and weak visual hierarchy in live interfaces slow down product iteration and degrade user experience. This skill provides a systematic design QA workflow to catch these issues early and propose concrete fixes.

Core Features & Use Cases

  • Visual QA of live interfaces to ensure consistency in typography, spacing, alignment, and color usage.
  • Plan-mode design review for before-implementation assessment using /plan-design-review.
  • Iterative fixes with atomic commits and re-verification using before/after screenshots.
  • Proactive polish suggestions when the user mentions visual inconsistencies or wants to improve the look of a live site.

Quick Start

Audit the target page visually and commit atomic fixes 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 visual inconsistencies and spacing issues in a live frontend interface?▼

To audit visual inconsistencies in a live frontend interface, you systematically identify typography, spacing, alignment, and hierarchy problems, apply atomic fixes iteratively, and verify the results using before and after screenshots.

Can I review UI design before implementation using a plan-mode workflow?▼

Yes, you can conduct a pre-implementation design assessment using plan-mode workflows. This allows you to proactively evaluate visual hierarchy and polish suggestions before writing any frontend code.

What is the best way to fix weak visual hierarchy on a live website?▼

The best way to fix weak visual hierarchy on a live website is to perform a visual QA audit, propose concrete polish fixes iteratively with atomic commits, and re-verify the layout alignment using before and after screenshots.

Does this visual QA workflow support iterative commits and before/after screenshot verification?▼

Yes, the visual QA workflow supports iterative fixes by applying atomic commits and re-verifying the visual typography and spacing corrections using before and after screenshots to ensure the layout is polished.

When do I need a design review for my live site's typography and layout?▼

You need a design review for your live site's typography and layout when you notice visual inconsistencies or want to proactively polish the user interface to prevent spacing and hierarchy problems from degrading the user experience.

Related Skills

Explore More Design & Creative Skills→
vib795vib795

design-review

Audit live sites for visual inconsistencies in typography, spacing, and hierarchy.

Community
Advanced
mulyovedmulyoved

design-review

Audit live sites for visual inconsistencies and spacing issues.

Community
Advanced
svengrazianisvengraziani
2

ui-design-principles

Guide CSS/HTML styling with visual hierarchy, spacing, typography, and depth principles.

Community
Intermediate
smarmen86smarmen86

design-review

Audit live web interfaces for layout and spacing issues and apply atomic CSS fixes.

Community
Advanced