# better-layout

> Claude/Codex skill by [@jakubkrehel](https://omgskills.com/library/jakubkrehel/index.md) · 9k stars · Updated 2026-10-25

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

## Install

```sh
git clone https://github.com/jakubkrehel/skills /tmp/skills && ln -s /tmp/skills/skills/better-layout ~/.claude/skills/better-layout
```

## From README

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.

## Links

- HTML page: https://omgskills.com/library/jakubkrehel/skills/better-layout/
- GitHub: https://github.com/jakubkrehel/skills
- Author: [@jakubkrehel](https://omgskills.com/library/jakubkrehel/index.md)

## More from this repo

- [better-colors](https://omgskills.com/library/jakubkrehel/skills/better-colors/index.md) — Builds and checks color systems by generating palettes, naming semantic tokens, converting between formats and...
   - [@jakubkrehel](https://omgskills.com/library/jakubkrehel/index.md) · 12k stars
- [better-interface](https://omgskills.com/library/jakubkrehel/skills/better-interface/index.md) — Reviews a screen, flow or whole interface across accessibility, layout, writing, typography, color and UI polish, and...
   - [@jakubkrehel](https://omgskills.com/library/jakubkrehel/index.md) · 9k stars

## More skills by this author

- [make-interfaces-feel-better](https://omgskills.com/library/jakubkrehel/make-interfaces-feel-better/make-interfaces-feel-better/index.md) — Used to design engineering principles for making interfaces feel polished.
   - [@jakubkrehel](https://omgskills.com/library/jakubkrehel/index.md) · 3.5k stars