skills.rest
jerrywu001
jerrywu001COMMUNITY
Explore all skills by this author →
GitHub

design-review

Review web interfaces for visual inconsistencies and apply atomic code fixes.

6|2|Updated Oct 18, 2021
Search Tags:#typography#accessibility#responsive design#frontend engineering#visual QA#ui audit#design polish
One-click install
npx skills add https://github.com/jerrywu001/jerrywu001 --skill design-review-jerrywu001
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/jerrywu001/jerrywu001/tree/main/.claude/skills/design-review
Command: npx skills add https://github.com/jerrywu001/jerrywu001 --skill design-review-jerrywu001

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you catch and fix visual inconsistency and UX polish issues that make a UI feel sloppy, unbalanced, or AI-generated—even when the functionality works.

Core Features & Use Cases

  • Visual QA and hierarchy checks: detects spacing inconsistencies, typography problems, layout rhythm issues, and unclear information hierarchy.
  • Interaction & design-system calibration: verifies responsive behavior, interaction states, and inferred design system consistency (fonts, colors, spacing patterns).
  • Audit-to-fix loop: produces before/after screenshot evidence while applying atomic code commits and re-verifying the results.

Quick Start

Run /design-review and include the URL of the live page you want audited so it can screenshot, grade, and then fix the issues.

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?▼

A visual QA audit on a live website requires screenshotting the interface to detect visual inconsistencies, typography problems, spacing issues, and unclear hierarchy, then applying atomic code fixes and re-verifying the results.

What is the best way to fix responsive design and spacing inconsistencies?▼

Fixing responsive design and spacing inconsistencies involves verifying interaction states, extracting an inferred design system, and calibrating layout rhythm to resolve unbalanced UI elements.

Can I check color contrast and accessibility issues on live web pages?▼

Yes, checking color contrast and accessibility issues on live web pages is supported by extracting an inferred design system to verify color consistency and interaction polish across a scoped set of pages.

How do I automate UI audit fixes with before and after screenshots?▼

Automating UI audit fixes uses an audit-to-fix loop that generates before and after screenshot evidence while applying atomic code commits and logging completion status with telemetry support.

Does visual QA work for iterative frontend engineering reviews?▼

Yes, visual QA works for iterative frontend engineering reviews by performing image-based verification in plan-mode before or after implementation to catch UX polish issues that make a UI feel AI-generated.

Related Skills

Explore More Design & Creative Skills→
tsenseitsensei
3

canary

Monitor a live URL for console errors, performance changes, and page failures.

Community
Advanced
cegit27cegit27
3

design-review

Detect and fix visual design inconsistencies in web interfaces via source code.

Official
Advanced
opencodosopencodos
14

web-design

Audit HTML, CSS, and JS for web interface guideline compliance.

Official
Intermediate
YaugourtYaugourt
2

design-review

Audits live UI builds for typography, spacing, and hierarchy issues and proposes fixes.

Community
Advanced