better-layout
Organizes hierarchy, spacing, alignment and responsive behavior.
- Status
- Observed
- Last reviewed
- 2026-10-10
ID: better-layout.
What it does
Checks whether spacing and alignment clarify which elements belong together and their reading order. Keeps controls distinct from content, actions reachable and visible cues for hidden parts. Tests the layout on narrow screens, with zoom, longer text and reversed reading direction when relevant. Uses project density and spacing before introducing new rules.
When to use it
Use it when a page is hard to scan, groups feel confusing, cards do not align or content is clipped at certain widths. It does not cover icon design or font selection, which have dedicated procedures.
How to use it
Ask for it by name, or invoke it with /better-layout in Claude Code or $better-layout in Codex. Show the screen or components, desired reading order and sizes to support. Provide realistic content, including long titles. Request a structure that preserves actions and explains where the layout changes.
What it delivers
- Findings on grouping, hierarchy and adaptation
- Structure or changes within the existing styling system
- Coverage of viewports, zoom and long text
Example
Reorganize this panel: separate filters and results, keep the primary action visible and check long titles at 390 px.
Executable instructions
The skill is installed from the source maintained by jakubkrehel; its license applies.
In the workflow
Use the router to choose this capability based on the required outcome.