better-layout

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 review criteria so pages and components communicate structure through position and spacing rather than decoration. ## Core Features & Use Cases - Grouping and Alignment Guidance: Apply rules for grouping with negative space instead of separator lines, aligning to shared edges, using CSS logical properties for RTL-safe layouts, and ordering content by importance. - Spacing and Adaptivity Rules: Set clearance between controls, inset buttons from viewport edges, hint at hidden content with peeking items or disclosure controls, and derive breakpoints from content rather than device presets. - Structured Layout Reviews: Produce findings tables with severity, file location, before/after code, and a verdict when auditing frontend code for layout issues. - Use Case: When building a settings page in Tailwind, use this Skill to replace divider lines with spaced groups, convert margin-left to margin-inline-start, and ensure the primary action stays reachable at small viewport sizes. ## Quick Start Review the layout of my dashboard component and suggest fixes for grouping, spacing, and responsive behavior.