skills.rest
olaafrossi
olaafrossiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-review

Audit live interfaces for visual consistency and patch issues via atomic commits.

10|3|Updated Mar 25, 2026
Search Tags:#typography#layout#design-review#visual QA#UI-polish
One-click install
npx skills add https://github.com/olaafrossi/FoamPilot --skill design-review-olaafrossi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/olaafrossi/FoamPilot/tree/main/.claude/skills/design-review
Command: npx skills add https://github.com/olaafrossi/FoamPilot --skill design-review-olaafrossi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designer's eye QA: finds visual inconsistency, 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.

Core Features & Use Cases

  • Visual QA across live sites to catch spacing, typography, color, hierarchy, and alignment issues.
  • Atomic fixes: commits small, reviewable changes with clear before/after evidence.
  • Plan-mode review: pre-implementation audits with mockups and review notes via /plan-design-review.

Quick Start

Audit the current UI on the target page and generate 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 run a visual QA audit on a live UI?▼

Visual QA audits live interfaces for spacing, typography hierarchy, color inconsistencies, and interaction latency, then patches issues via atomic commits verified with before/after screenshots.

What is the best way to fix visual inconsistency and spacing issues in source code?▼

Fix visual inconsistency by iteratively patching source code with small, reviewable atomic commits, re-verifying each change with before/after screenshots to ensure the spacing issue is resolved.

Can I check UI polish and typography hierarchy before implementation?▼

Yes, you can check UI polish before implementation by using the plan-mode design review, which provides pre-implementation audits with mockups and review notes.

Does design review work on live sites or only static mockups?▼

Design review works on live sites to catch visual inconsistencies and slow interactions, while also supporting plan-mode review for static mockups and pre-implementation analysis.

When do I need to use a plan-mode design review instead of a live audit?▼

Use a plan-mode design review when you need pre-implementation audits with mockups and review notes, and use a live visual QA audit when you need to patch issues in active source code.

Related Skills

Explore More Design & Creative Skills→
mulyovedmulyoved

canary

Monitor deployed URLs for console errors, performance regressions, and visual changes.

Community
Advanced
zzxtbetazzxtbeta

design-review

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

Community
Advanced
wrsmith108wrsmith108
5

Verification & Quality Assurance

Automate verification and rollback of faulty deployments across CI/CD pipelines.

Community
Intermediate
act70255act70255

ui-visual-validator

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

Community
Advanced