Layout Polish

Fine-tune layout, spacing, alignment, and visual rhythm for pixel-perfect interfaces — the final quality pass before shipping.

Features

• Spacing Audit — Detects inconsistent margins, padding, and gaps across components
• Alignment Check — Identifies misaligned elements and suggests grid-based corrections
• Visual Rhythm — Ensures consistent vertical rhythm and baseline alignment in typography
• Responsive Fixes — Patches layout breakages at common breakpoints (mobile, tablet, desktop)
• Component Consistency — Normalizes spacing tokens and sizing across similar components

Quick Start

claude skill install layout-polish

Usage

# Audit and fix layout issues in a page component
/layout-polish src/pages/Dashboard.tsx

# Fix spacing inconsistencies across the entire project
/layout-polish --scope src/components/ --fix

How It Works

Scans your component styles and markup to detect spacing inconsistencies, alignment issues, and visual rhythm breaks. Compares actual values against your design system's spacing scale and suggests corrections. Applies fixes using your existing utility classes or CSS custom properties to maintain consistency.

Compatibility

Works with Claude Code, Codex, Gemini CLI, Cursor, Windsurf, and Aider.