better-layout: Grouping, Alignment, Reading Order for Agents

Where this fits

When an agent generates a settings page or dashboard, it can place every element correctly and still produce a flat, hard-to-scan screen. better-layout gives the agent a review pass for the structure users notice before reading: grouping, alignment, reading order, and progressive disclosure. It is designed for workflows where the agent owns the full UI task, not just a small component patch.

Why agents benefit

• It enforces a concrete spacing rule: inter-group gaps at least 2x intra-group gaps, so grouping reads as structure rather than noise.
• It stress-tests layout the way a human would: resize the container, translate copy, mirror the direction for RTL, then adjust until hierarchy survives.
• It respects the project's styling system and tokens instead of inventing familiar-looking values, so the output matches the codebase.
• It sets clear boundaries: hit areas and focus go to better-accessibility, shadows and animation to better-ui, typography to better-typography. The agent avoids fixing the wrong layer.
• It improves decision-making around what to show first, enabling progressive disclosure in dense interfaces.

Practical scenarios

Dashboard card grouping

An agent builds a monitoring dashboard from a JSON config. It groups metrics with 8px gaps, then 16px between groups, and labels follow data importance rather than API order. The result is scannable before users read a single value.

Settings page cleanup

A legacy settings page uses separators between every row. The agent removes most lines and instead relies on whitespace, aligning controls to the same edge. Dense rows keep separators only where space alone cannot carry the grouping.

RTL localization pass

Before shipping an Arabic translation, the agent mirrors the layout and checks reading order. It replaces hardcoded left/right references with logical alignment and verifies that grouped controls still appear as a unit when viewed right-to-left.

Add it to your agent workflow

Install it with:

npx skills add jakubkrehel/skills --skill better-layout

Then use it as a review skill: 'Check this dashboard with better-layout: enforce the spacing ratios, align grouped controls, and set reading order before I review.' The skill runs best after content is in place, not while the agent is still exploring the API.

Compare before adopting

Before adding better-layout to your default toolchain, compare it with built-in heuristics in your agent framework and with alternatives such as one-shot CSS generation prompts. Look for recent commits and issue responses: useful layout rules need maintenance as design systems evolve. Also check whether the skill's instructions fit your styling stack and whether your agent can call it at review time. For a live snapshot of maintainers' activity and adoption, see the OpenAgentSkill listing.

Why it is worth tracking

At 4,731 stars, better-layout is one of the more visible signals that layout quality matters to agent-generated UI. The README documents clear ownership boundaries, which makes it easier for an agent to apply without breaking neighboring concerns. Track it if you generate user-facing interfaces; evaluate it again when the skill adds support for logical properties, container queries, or design-token density systems.