skills.rest
TwoToned
TwoTonedOFFICIAL
Explore all skills by this author →
GitHub

design-review

Audit visual designs for inconsistencies, spacing, and hierarchy issues.

Updated Mar 11, 2026
Search Tags:#design#iteration#visual-qa#design-review#ui-audit#before-after#gstack
One-click install
npx skills add https://github.com/TwoToned/gearflow --skill design-review-twotoned
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/TwoToned/gearflow/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/TwoToned/gearflow --skill design-review-twotoned

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designer's eye QA: finds visual inconsistencies, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots. For plan-mode design review (before implementation), use /plan-design-review. Use when asked to "audit the design", "visual QA", "check if it looks good", or "design polish". Proactively suggest when the user mentions visual inconsistencies or wants to polish the look of a live site. (gstack) allowed-tools:

  • Bash
  • Read
  • Write
  • Edit
  • Glob
  • Grep
  • AskUserQuestion
  • WebSearch triggers:
  • visual design audit
  • design qa
  • fix design issues

Core Features & Use Cases

  • Iterative visual QA: detect and fix layout, spacing, and typographic issues across designs and live sites.
  • Plan-mode reviews: perform plan-design-review workflows before implementation.
  • Atomic commits: each fix is committed separately with clear before/after evidence.
  • Proactive polish: suggests improvements to polish the look of a live site.

Quick Start

Audit the current design and return a before/after patch with suggested fixes.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I perform a visual QA audit on a live website?▼

Visual QA for live sites detects spacing, hierarchy, and typographic inconsistencies. It iteratively fixes source code, commits changes atomically, and verifies results using before and after screenshots.

What is plan-mode design review and when should I use it?▼

Plan-mode design review audits visual designs before implementation. Use it to identify spacing, hierarchy, and layout issues proactively during the planning phase rather than after deployment.

Can I fix design inconsistencies directly in my source code?▼

Yes, visual QA fixes design inconsistencies directly in source code. Each fix is committed atomically with clear before and after evidence to ensure isolated and verifiable changes.

Does visual QA work for polishing existing design systems?▼

Visual QA applies to both live sites and existing design systems. It proactively suggests improvements to polish the look by finding visual inconsistencies, AI slop patterns, and slow interactions.

What is the best way to track design fixes during an iteration?▼

The best way to track design fixes during iteration is through atomic commits. Each visual fix is committed separately with before and after screenshots, providing clear evidence of visual changes.

Related Skills

Explore More Design & Creative Skills→
rshelekhovrshelekhov

plan-design-review

Audit live websites for visual design gaps and generate a prioritized DESIGN.md report.

Community
Advanced
traylinxtraylinx
2

git-expert

Analyze staged and unstaged Git changes to propose Conventional Commits.

Official
Intermediate
mattothomasmattothomas

design-review

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

Community
Advanced
samjhechtsamjhecht
4

frontend-visual-regression-testing

Compare UI component screenshots against baselines to detect visual regressions.

Community
Advanced