better-layout

Layout that communicates structure Layout communicates before a single word is read: position, spacing, and alignment carry hierarchy on their own, and generous space beats decoration. A good layout also survives stress: resize it, translate it, mirror it for RTL, and it should still hold together. Apply these principles when building or reviewing UI code, and express every change in the project's existing styling system (Tailwind, plain CSS, CSS-in-JS); never introduce a second styling approach. Hit-area sizes and focus behavior are covered by the better-accessibility skill; visual polish (radius, shadows, animation) by the better-ui skill; line length and text spacing by the better-typography skill. Treat the numeric values below as starting points for interfaces without an established density or spacing system. Preserve deliberate platform chrome, compact professional tools, and project tokens when they remain usable under hit-area, zoom, localization, and viewport stress tests. Quick Reference Category When to Use Grouping & Alignment Space vs separators, alignment edges, logical properties, importance ordering Spacing & Adaptivity Spacing between targets, layout margins, progressive disclosure, full-bleed content, breakpoints, i18n growth Core Principles 1. Group with Space, Not Lines Show more Installs 834 Repository jakubkrehel/skills GitHub Stars 1.1K First Seen 4 days ago Security Audits Gen Agent Trust Hub Pass Socket Pass Snyk Pass