design-review

Audit live web interfaces for layout and spacing issues and apply atomic CSS fixes.

Updated Jun 5, 2026
One-click install
npx skills add https://github.com/smarmen86/claude-code-kit --skill design-review-smarmen86
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/smarmen86/claude-code-kit/tree/main/skills/design-review
Command: npx skills add https://github.com/smarmen86/claude-code-kit --skill design-review-smarmen86

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill addresses visual inconsistencies, spacing errors, and hierarchy issues in live web projects, ensuring high-quality UI standards without manual oversight.

Core Features & Use Cases

  • Visual Audit: Automatically detects layout shifts, spacing issues, and AI-generated design patterns.
  • Iterative Correction: Fixes identified issues atomically and verifies them with before-and-after screenshots.
  • Use Case: Use this during a design polish phase to audit a live site for visual bugs and automatically apply CSS or structural fixes to improve the user experience.

Quick Start

Invoke the design-review skill to perform a full visual audit of the current project and apply necessary fixes.

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 for spacing and layout inconsistencies on my live website?

Automated visual QA identifies layout inconsistencies, spacing errors, and hierarchy problems in web interfaces, applies atomic code fixes, and verifies them using visual regression. This ensures high-quality UI standards without requiring manual oversight during the design polish phase.

What's the best way to detect and fix AI-generated design patterns in my frontend?

Detecting and fixing AI-generated design patterns is handled by running an automated visual audit on your live site. The audit identifies these visual bugs and automatically applies CSS or structural fixes to correct the layout shifts and improve the user experience.

Do I need Bash and Git to run an automated visual audit on my web project?

Yes, you need Bash, Git, and standard web development tools to execute automated visual design audits and commit changes. These tools allow the process to operate within the development lifecycle to apply fixes and verify them with before-and-after screenshots.

Can I use visual regression to verify atomic CSS fixes during development?

Yes, visual regression verifies atomic CSS fixes by capturing before-and-after screenshots. The automated visual quality assurance process iteratively corrects identified spacing and hierarchy issues and confirms the structural fixes through visual regression checks.

When should I perform a visual audit on my web interface?

You should perform a visual audit during a design polish phase to check a live site for visual bugs. This automated quality assurance step identifies layout shifts and hierarchy problems, applying necessary fixes before deployment without manual oversight.

Why does my live web project have visual inconsistencies and spacing errors?

Visual inconsistencies and spacing errors often occur in live web projects due to layout shifts or AI-generated design patterns. An automated visual quality audit identifies these specific hierarchy problems and iteratively applies structural or CSS fixes to resolve them.