skills.rest
vnmoorthy
vnmoorthyCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit and fix visual design issues in UI components with atomic commits.

2|1|Updated Mar 5, 2026
Search Tags:#automation#design#ui#qa#visual#design-review#before-after
One-click install
npx skills add https://github.com/vnmoorthy/Skylog --skill design-review-vnmoorthy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/vnmoorthy/Skylog/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/vnmoorthy/Skylog --skill design-review-vnmoorthy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA for UI polish: identifies spacing, hierarchy, alignment, and style inconsistencies, then fixes them with iterative, atomic changes and before/after verification.

Core Features & Use Cases

  • Visual QA audits to detect spacing, typographic, alignment, and hierarchy issues across UI components.
  • Iterative fixes committed atomically with before/after screenshots to verify improvements.
  • Plan-mode design review workflows via /plan-design-review and proactive design polish on live sites.

Quick Start

Run a design-review session on your UI to audit visuals, fix issues, and commit atomic changes 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 automate visual QA audits for UI design consistency?▼

Automate visual QA audits by scanning UI components to detect spacing, typographic, alignment, and hierarchy inconsistencies. The process iteratively fixes issues in source code and commits each change atomically with before/after screenshots to verify visual improvements.

What is a design review workflow for live-site UI polish?▼

A design review workflow for live-site UI polish proactively audits visual elements, identifies inconsistencies, and applies iterative fixes. It uses plan-mode reviews to structure the process and verifies each atomic code change with before/after screenshots.

How do I fix spacing and alignment issues in source code with visual verification?▼

Fix spacing and alignment issues by iteratively adjusting source code and committing each fix atomically. Visual verification is achieved by capturing before/after screenshots to ensure the UI improvements resolve the detected inconsistencies.

Can I run plan-mode design reviews for UI components?▼

Yes, you can run plan-mode design reviews for UI components using the /plan-design-review command. This workflow audits visual design issues, applies iterative fixes, and verifies results with before/after screenshots.

What's the best way to verify UI design fixes during a visual audit?▼

The best way to verify UI design fixes during a visual audit is by capturing before/after screenshots. This method iteratively confirms that atomic source code changes successfully resolve spacing, hierarchy, and alignment inconsistencies.

Why does my UI design review fail to catch visual inconsistencies?▼

UI design reviews often fail to catch visual inconsistencies without a structured visual QA audit. Detecting spacing and hierarchy issues requires iteratively auditing components, fixing source code atomically, and verifying changes with before/after screenshots.

Related Skills

Explore More Design & Creative Skills→
az9713az9713

dark-code-suite-init

Initialize a project with dark code prevention directories, CLAUDE.md section, and baseline audit.

Community
Intermediate
mattothomasmattothomas

design-review

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

Community
Advanced
hidonguyenhidonguyen

ck:test

Execute unit, integration, e2e, and UI tests across JavaScript/TypeScript, Python, Go, Rust, and Flutter projects.

Community
Advanced
LschulzesLschulzes

web-design-guidelines

Evaluate UI code against Web Interface Guidelines to detect deviations.

Community
Intermediate