/coleoni-layout

Off by 2px. Felt by everyone.

Pages built section by section drift: one padded 30px, the next 32, the one after 34. Nobody can see the numbers; everyone feels the page is crooked. The skill measures where every block starts, draws it over the page, and puts the layout back on one container and one rhythm.

npx skills add c0le0ni/skills --skill coleoni-layout

View on GitHub

Edges drawn on the page Rhythm between sections 390, 768 and 1280px

The layout report with the edges drawn on the page

Edges in use in green, near misses in red, section gaps in blue

Example

Six sections, six paddings.

The bakery’s cake page, each section with its own margin. Three edges where one would do, four different gaps between sections, and 166px of sideways scroll on a phone.

layout.css

header { padding: 20px 34px }
.hero   { padding: 58px 32px 64px }
.cards  { padding: 0 30px; margin-top: 72px;
          grid-template-columns: repeat(3, 1fr) }
.pick   { margin: 58px 34px 0 }
.sizes  { margin: 64px 30px 0 }
.quote  { margin: 66px 32px 70px }

3 → 1left edges

4 → 1section gaps

166 → 0px of sideways scroll

1container for every section

Open the report, before Open the report, after See the example on GitHub

Checks

What it measures.

Room for translations and long content belongs to /coleoni-break; spacing inside components to /coleoni-polish.

Check	What counts as a problem
Alignment	A left edge 1 to 6px from a more used one
Rhythm	Gaps between sections close but different
Grouping	A heading with as much space below as above
Widths	Sideways scroll at 390 or 768px

Install

One command, any agent.

The only package is playwright-core. Part of the interface family with polish, type and color.

AgentClaude Code, Codex, Cursor…

Node.js18 or newer

Chrome or Edgealready on the machine

01Install

npx skills add c0le0ni/skills --skill coleoni-layout

02Use it in your agent

/coleoni-layout https://yoursite.com

For your whole user, not just the project-g

Claude Code only-a claude-code

Codex only-a codex

Every Coleoni skillnpx skills add c0le0ni/skills

Examples

When something feels off.

It shows the overlay first.

Draw the grid a page really has.

/coleoni-layout https://yoursite.com

Put it on one container.

/coleoni-layout the landing page, one container and one rhythm

Check the phone.

/coleoni-layout why does it scroll sideways on my phone

Options

The engine, from the terminal.

node layout.mjs https://yoursite.com --out layout-report

Option	What it does
`--select "main"`	Only one part of the page
`--width 1280`	Desktop width
`--lang en\|pt`	Language of the report

Straight edges, steady rhythm.

npx skills add c0le0ni/skills --skill coleoni-layout

View on GitHub See all skills