# Better Layout

Sets grouping, alignment, reading order, responsive structure and room for translated...

- Repository: https://github.com/jakubkrehel/skills (10031 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-10-25
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add jakubkrehel/skills --skill better-layout -g -a claude-code -y`
Codex: `npx skills add jakubkrehel/skills --skill better-layout -g -a codex -y`
Cursor: `npx skills add jakubkrehel/skills --skill better-layout -g -a cursor -y`
Gemini CLI: `npx skills add jakubkrehel/skills --skill better-layout -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add jakubkrehel/skills`

## Description

Sets grouping, alignment, reading order, responsive structure and room for translated text, so a layout holds up when it is resized, translated or mirrored.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Layout

This skill sets grouping, alignment, spacing and responsive structure. It then stress-tests that structure by resizing it, translating it and mirroring it for RTL.

Write every fix in the project's styling system. The numbers below apply only where the project has no spacing scale or density system; otherwise use its tokens. A finding needs a failure you can show, such as a clip, an overlap, a broken mirror or a misread group. A value that differs from these starting points is not one.

Hit areas and focus behavior belong to `better-accessibility`. Radius, shadows and animation belong to `better-ui`. Line length, text spacing and truncation mechanics belong to `better-typography`. The words themselves belong to `better-writing`.

## Group with space, not lines

Space groups first, background shapes second, separator lines last and only where space alone can't carry the structure. The gap between groups is at least 2× the gap within one, so `8px` inside a group means `16px` or more between groups. Recipes are in [grouping-and-alignment.md](grouping-and-alignment.md#group-with-space-not-lines).

## Keep controls distinct from content

Give every interactive element a background shape, a border, an underline or a consistent placement zone such as a toolbar. A control styled like the static text beside it does not read as a control. See [grouping-and-alignment.md](grouping-and-alignment.md#keep-controls-distinct-from-content).

## Align to shared edges

Pick a small set of alignment edges and put everything on them. Use one project spacing step per level of nesting, where `16px` is a useful default. See [grouping-and-alignment.md](grouping-and-alignment.md#align-to-shared-edges).

## Logical properties for anything that mirrors

The rest: https://github.com/jakubkrehel/skills/blob/HEAD/skills/better-layout/SKILL.md