Desalinhado em 2px. Sentido por todo mundo.
Páginas feitas seção por seção escorregam: uma com 30px de margem, a seguinte com 32, a outra com 34. Ninguém vê os números; todo mundo sente a página torta. A skill mede onde cada bloco começa, desenha por cima da página e coloca o layout de volta num contêiner e num ritmo.
npx skills add c0le0ni/skills --skill coleoni-layout
Seis seções, seis margens.
A página de bolos da padaria, cada seção com a própria margem. Três bordas onde uma bastava, quatro espaços diferentes entre seções, e 166px de rolagem lateral no celular.
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 }
O que ela mede.
Espaço pra tradução e conteúdo longo é com a /coleoni-break; espaço dentro dos componentes, com a /coleoni-polish.
| Conferência | O que conta como problema |
|---|---|
| Alinhamento | Uma borda a 1 a 6px de outra mais usada |
| Ritmo | Espaços entre seções próximos mas diferentes |
| Agrupamento | Título com tanto espaço embaixo quanto em cima |
| Larguras | Rolagem lateral em 390 ou 768px |
Um comando, em qualquer agente.
O único pacote é o playwright-core. Faz parte da família de interface com acabamento, tipografia e cor.
npx skills add c0le0ni/skills --skill coleoni-layout
/coleoni-layout https://seusite.com.br
-g-a claude-code-a codexnpx skills add c0le0ni/skillsQuando alguma coisa parece fora do lugar.
Ela mostra o desenho primeiro.
Desenhar a grade que a página realmente tem.
/coleoni-layout https://seusite.com.br
Colocar num contêiner só.
/coleoni-layout a landing page, um contêiner e um ritmo
Conferir o celular.
/coleoni-layout por que rola pro lado no meu celular
O motor, pelo terminal.
node layout.mjs https://seusite.com.br --lang pt --out layout-report
| Opção | Para quê |
|---|---|
--select "main" | Só uma parte da página |
--width 1280 | Largura do computador |
--lang en|pt | Língua do relatório |
Bordas retas, ritmo firme.
npx skills add c0le0ni/skills --skill coleoni-layout