1. Habit
  2. Skills
  3. Better Layout skill
jakubkrehel · 30K installs

Better Layout skill
Runs by itself, PR changes styles.

Layouts survive resize, translation, RTL.

Install the Better Layout skill and make it a habit: follow https://gethabit.dev/skills/jakubkrehel/better-layout.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

30K installs8K starsMIT licenceSource on GitHub ↗

Better Layout

by jakubkrehel · 30K installs

The skill

The better layout skill reviews grouping, alignment, reading order and responsive structure, then stress-tests a layout for resizing, translated text and RTL mirroring.

Only when you ask.

The habit

Layouts survive resize, translation, RTL.

↻ Runs by itselfPR changes styles

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

PR changes styles. Runs in GitHub Actions or Claude Code routine.

  • ↻ PR changes styles
  • pull_request on CSS, style and layout component files

02

It checks its work

detection table, no HIGH. If a check fails, it tells you.

  • ✓no detection-table pattern left, like width: 100vw or fixed height on text boxes
  • ✓no clipping or overlap at 320px or 200% zoom
  • ✓visual order matches DOM order
  • ✓verdict is Approve, not Block

03

It remembers

findings by root cause. The next run reads it first: open HIGH and MEDIUM findings and checks marked Not verified.

loops/layout-audit-loop/run-log.md

One run, step by step.
Then it stops.

Stop ruleOne pull request per run; the run stops at the verdict.

  1. 01

    Scan patterns

    The agent checks the diff against the Before you finish detection table.

  2. 02

    Check structure

    It reviews grouping by space, shared edges, reading order and one primary action.

  3. 03

    Check mirroring

    It looks for physical left and right where logical inline properties belong.

  4. 04

    Stress test

    With a browser it tests every supported width, 320px, 200% zoom and the RTL mirror.

  5. 05

    Report

    Findings go in a severity table, one row per root cause, with checks not run marked Not verified.

  6. 06

    Verdict

    It ends with Block if any HIGH remains, otherwise Approve.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Better Layout skill helps.

Use it when

  • ✓ Your UI must support translated text
  • ✓ You ship RTL languages
  • ✓ Layouts clip on small screens or zoom

Skip it when

  • – You need an accessibility audit
  • – The change is copy only

Questions

Better Layout skill, answered.

Does it cover accessibility and typography?

No. Hit areas go to better-accessibility, line length and truncation to better-typography, radius and motion to better-ui.

Will it flag any spacing that differs from its numbers?

No. A finding needs a visible failure such as a clip, overlap, broken mirror or misread group.

How do I install the Better Layout skill?

Copy the prompt at the top into your agent. It installs the skill from jakubkrehel/skills and sets up the habit. Or run npx skills add jakubkrehel/skills --skill better-layout.

Is the Better Layout skill free?

Yes. It is published under MIT. Habit is free too.

Better Layout. Now as a habit.

Install the Better Layout skill and make it a habit: follow https://gethabit.dev/skills/jakubkrehel/better-layout.md

  • Free
  • No account
  • Undo in one line

All jakubkrehel skills →More design skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by jakubkrehel, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.