skills.rest
geoffreywoo
geoffreywooCOMMUNITY
Explore all skills by this author →
Website𝕏@geoffreywooGitHub

design-review

Identify and fix visual design flaws across sites and component libraries.

1|Updated Feb 27, 2026
Search Tags:#typography#design#consistency#screenshots#spacing#visual-qa
One-click install
npx skills add https://github.com/geoffreywoo/clawfable --skill design-review-geoffreywoo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/geoffreywoo/clawfable/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/geoffreywoo/clawfable --skill design-review-geoffreywoo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual inconsistencies, spacing issues, and slow interactions undermine user experience. This design-review workflow provides a disciplined QA pass that spots these flaws, fixes them in source, and verifies changes with before/after screenshots.

Core Features & Use Cases

  • Visual QA: identify typography, spacing, alignment, and hierarchy issues across pages and components.
  • Design polish: propose and apply micro-adjustments to spacing, color, and interactions to improve perceived usability.
  • Plan-mode reviews: audit designs before implementation using plan-design-review, with structured notes for stakeholders.

Quick Start

Provide a live site URL and scope, then trigger a design audit to surface visual issues and recommended fixes.

Frequently Asked Questions about design-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run a visual QA audit on a live website to fix spacing and typography issues?▼

To run a visual QA audit, provide a live site URL and trigger the design review to identify typography, spacing, and hierarchy flaws. The skill applies atomic fixes directly in source and verifies results using before/after screenshots.

What is the best way to identify visual design flaws in a component library?▼

The best way to identify visual design flaws in a component library is applying a disciplined QA pass that reads visual rules to spot spacing and alignment issues. It proposes micro-adjustments to spacing and color to improve perceived usability.

Can I audit designs for visual consistency before implementation begins?▼

Yes, you can audit designs before implementation using plan-mode reviews. This structured review process surfaces visual issues and generates structured notes for stakeholders to ensure design polish prior to development.

Does this visual review process work without external dependencies?▼

Yes, the visual review process works without external dependencies. It operates autonomously to read and apply visual QA rules across pages and components, requiring only a live site URL and scope to begin the audit.

How do you verify interaction polish and visual fixes after applying source changes?▼

You verify interaction polish and visual fixes by capturing before and after screenshots. This verification step ensures the applied atomic source fixes successfully resolved the identified typography and spacing inconsistencies.

Related Skills

Explore More Design & Creative Skills→
curielmccurielmc

design-review

Audit live UI for visual consistency, spacing, hierarchy, and interaction latency.

Community
Advanced
zzxtbetazzxtbeta

design-review

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

Community
Advanced
alanzoppaalanzoppa
1

impeccable

Critique and polish frontend UI design for visual appeal, accessibility, and responsiveness.

Community
Advanced
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced