What problem does it solve? Web interfaces often suffer from cluttered grouping, misaligned edges, controls that blend into content, and layouts that break under resizing, translation, or RTL mirroring. This Skill provides concrete layout principles and a structured review format to catch and fix these structural problems in frontend code. ## Core Features & Use Cases - Layout Principles: Ten core rules covering grouping with negative space, shared alignment edges, logical CSS properties for RTL, importance-based ordering, progressive disclosure affordances, safe-area handling, and content-driven breakpoints. - Structured Layout Reviews: Produces findings tables with severity levels (HIGH/MEDIUM/LOW), file-and-line locations, before/after fixes, verification steps, and a Block/Needs changes/Approve verdict. - Use Case: When building a settings page in React with Tailwind, apply the grouping rules to replace separator lines with 2x inter-group spacing, switch margin-left to margin-inline-start for RTL support, and verify controls stay inside layout margins at small viewports. ## Quick Start Review the layout of my dashboard component and report any grouping, alignment, or responsiveness issues with suggested fixes.
