What problem does it solve? Interfaces often suffer from unclear visual hierarchy, misaligned elements, cramped controls, and layouts that break under resizing, translation, or RTL mirroring. This Skill audits and fixes layout structure so grouping, reading order, and adaptivity hold up across viewports and locales. ## Core Features & Use Cases - Grouping and Alignment Review: Enforces spacing-based grouping (2× inter-group gaps), shared alignment edges, and logical CSS properties like margin-inline-start instead of physical left/right values. - Adaptive Layout Stress-Testing: Checks content-driven breakpoints, container queries, safe-area handling, string expansion, and clipping of critical actions. - Structured Reporting: Produces severity-ranked findings (HIGH/MEDIUM/LOW) in a table with file locations, before/after states, and a final Block or Approve verdict. - Use Case: Before shipping a responsive settings page, run this Skill to catch fixed-width buttons that overflow in German, physical margin properties that break RTL, and a primary action clipped at the bottom of a modal. ## Quick Start Review the layout of my settings page component and report any grouping, alignment, spacing, or adaptivity issues with severity ratings.
