What problem does it solve? Web interfaces often suffer from unclear visual hierarchy, inconsistent spacing, misaligned edges, and layouts that break under resizing, translation, or RTL mirroring. This Skill provides concrete layout principles and a structured review format so pages and components communicate structure through position and spacing rather than decoration. ## Core Features & Use Cases - Grouping and alignment guidance: Apply rules for negative space, shared alignment edges, logical CSS properties, and importance-based reading order. - Spacing and adaptivity rules: Set control clearances, layout margins, safe-area handling, progressive disclosure cues, container queries, and content-driven breakpoints. - Structured review output: Produce findings tables with severity levels, before/after fixes, verification steps, and a Block/Needs changes/Approve verdict. - Use Case: When reviewing a settings page where every row has a separator line and buttons touch the viewport edge, apply the grouping and inset rules to replace lines with spacing and inset actions within layout margins. ## Quick Start Review the layout of my checkout page component and report findings with severity, before/after fixes, and a verdict.
