better-layout

Apply the ten layout principles covering grouping, alignment, spacing, and adaptivity, then report findings in a table with severity, file location, before/after code, and the violated principle. Finish with verification checks across viewports and a Block, Needs changes, or Approve verdict.

Use negative space as the primary grouping tool: the gap between groups must be at least twice the gap within a group, such as 8px intra-group and 16px or more inter-group. Reserve separator lines for cases where spacing alone cannot carry the structure.

Yes, all layout changes are expressed in the project's existing styling system, whether Tailwind, plain CSS, or CSS-in-JS. The skill explicitly forbids introducing a second styling approach into a project.

Use CSS logical properties like margin-inline-start and padding-inline-end instead of physical left/right properties for direction-dependent layout. Reserve physical properties only for genuinely physical geometry, and test the layout mirrored for RTL.

Breakpoints should come from the content, not device presets like 768 or 1024 pixels. Keep the expanded layout as long as it genuinely fits, collapse late, and prefer container queries for component-level adaptation.

Fixed widths and heights on text containers break under localization because string growth varies substantially by language. Use max-width with wrapping rows instead, and test with pseudo-localization and representative locales.