What problem does it solve? Interfaces often fail because of weak layout structure: controls that look like static text, misaligned edges, breakpoints copied from device presets, and buttons clipped at viewport edges. This Skill audits and fixes layout code against concrete principles for grouping, alignment, spacing, progressive disclosure, and adaptability, including RTL mirroring and localization growth. ## Core Features & Use Cases - Layout audits with severity ratings: Classifies findings as HIGH, MEDIUM, or LOW, grouped by violated principle, with file and line locations and a Block/Approve verdict. - Concrete CSS and HTML recipes: Provides reference patterns for spacing scales, logical properties, container queries, safe-area insets, peeking scrollers, and full-bleed content grids. - Stress-testing guidance: Covers RTL mirroring, pseudo-localization for string growth, 200% zoom, and smallest/largest viewport checks. - Use Case: A developer finishing a settings page asks for a layout review; the Skill flags physical margin-left properties that break in RTL, a primary action clipped at a modal's bottom edge, and uniform spacing that hides grouping, then supplies corrected CSS. ## Quick Start Review the layout of my settings page component and report any grouping, alignment, or adaptivity issues with fixes.
