skills.rest
2300031147
2300031147COMMUNITY
Explore all skills by this author →
GitHub

design-review

Inspect live-site UI and fix visual inconsistencies with source-code updates.

Updated Apr 12, 2026
Search Tags:#frontend#pixel-perfect#visual-design#design-audit#before-after#ui-polish
One-click install
npx skills add https://github.com/2300031147/clawopencode --skill design-review-2300031147
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/2300031147/clawopencode/tree/main/skills/design-review
Command: npx skills add https://github.com/2300031147/clawopencode --skill design-review-2300031147

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA and polish to fix visual inconsistencies, spacing issues, and hierarchy problems across UI implementations.

Core Features & Use Cases

  • Visual QA pass on live sites
  • Iterative fixes with before/after verification
  • Plan-mode design reviews and commit-ready changes

Quick Start

Inspect a page, identify layout gaps, and propose a fix ready for integration.

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 design audit on a live site?▼

A visual design audit identifies and fixes spacing, hierarchy, and consistency issues across UI implementations. It inspects live pages, detects visual inconsistencies, and generates source-code updates to achieve pixel-perfect polish.

How do I verify UI polish with before and after comparisons?▼

Before and after verification uses high-fidelity screenshots to compare UI states during iterative fixes. This process applies deterministic checks to ensure visual inconsistencies are resolved and layout changes are reproducible.

Can I generate commit-ready code changes from a design review?▼

Yes, plan-mode design reviews identify visual inconsistencies and propose fixes ready for integration. The workflow outputs source-code updates that resolve layout gaps and UI polish tasks directly.

What is pixel-perfect UI polish and when do I need it?▼

Pixel-perfect UI polish is the process of resolving visual design inconsistencies to match specifications exactly. You need it when live implementations show layout gaps, spacing errors, or hierarchy problems that break visual fidelity.

Does this visual QA process work for frontend source-code updates?▼

Yes, visual QA passes apply directly to frontend implementations. The process inspects live sites, identifies visual design inconsistencies, and delivers source-code updates to fix spacing and hierarchy problems.

Related Skills

Explore More Design & Creative Skills→
nimadorostkarnimadorostkar
25

visual-qa

Automate visual regression testing and responsive layout verification with Playwright.

Community
Advanced
HCMUTE-RTICHCMUTE-RTIC

ui-visual-validator

Validate UI modifications for design system compliance and accessibility via screenshot analysis.

Official
Advanced
mahou-labsmahou-labs
1

quieter

Reduces visual intensity in bold UI designs via desaturation and spacing adjustments.

Official
Advanced
abretonc7sabretonc7s

visual-testing

Capture screenshots before and after UI interactions to detect visual regressions.

Community
Intermediate