Os detalhes que as pessoas sentem. Medidos e corrigidos.
Ninguém sabe dizer por que uma interface parece barata, mas todo mundo sente: sete raios onde três bastavam, uma sombra com cara de sujeira, um botão 2px mais alto que o vizinho, uma seta abaixo do texto. A skill mede esses detalhes na página real, mostra as escalas que ela usa de verdade e corrige nos tokens.
npx skills add c0le0ni/skills --skill coleoni-polish
Feita seção por seção. Acabada numa passada.
Uma página de encomenda de bolo da padaria, cada seção copiada de um mockup diferente. 8 achados, um deles uma div fingindo ser botão. Com tokens de raio, sombra e espaço, nenhum.
/* each section from a different mockup */
.card { border-radius: 12px; padding: 23px;
box-shadow: 0 2px 4px rgba(0,0,0,.5) }
.card:nth-child(2) { border-radius: 16px; padding: 10px }
.card .pic { border-radius: 12px }
.btn { border-radius: 6px; padding: 13px 20px 11px }
.btn svg { margin-top: 5px }
.btn.alt { border-radius: 999px; padding: 9px 22px }
.send { /* a div */ border-radius: 8px }
O que ela mede.
Pelo estilo calculado de cada elemento visível, então funciona em qualquer stack.
| Conferência | O que conta como problema |
|---|---|
| Raios de canto | Mais de 4 valores diferentes |
| Cantos aninhados | Raio de dentro que não segue o de fora − a distância |
| Sombras | Mais de 3 tipos; preta, densa e quase sem desfoque |
| Espaçamento | Padding, gap e margem fora da grade de 4px |
| Botões | Mais de 2 combinações de altura, raio e tamanho |
| Botão falso | Com cara de botão, feito com div |
| Hover | Botões que não mudam com o mouse em cima |
| Ícones e rótulos | Ícone 1,5px fora do centro do texto; rótulo fora do centro do botão |
Um comando, em qualquer agente.
O único pacote é o playwright-core, que o agente instala no primeiro uso. Faz parte da família de interface: a /coleoni-interface roda ela junto com tipografia, cor e layout.
npx skills add c0le0ni/skills --skill coleoni-polish
/coleoni-polish http://localhost:3000
-g-a claude-code-a codexnpx skills add c0le0ni/skillsUma página, uma seção, um componente.
Ela mostra o relatório primeiro. O código só muda quando você mandar.
Dar acabamento numa página.
/coleoni-polish http://localhost:3000/precos
Só os cards.
/coleoni-polish os cards de produto, corrige
Virar tokens.
/coleoni-polish o site inteiro, propõe tokens de raio, sombra e espaço
O motor, pelo terminal.
node polish.mjs http://localhost:3000 --lang pt --out polish-report
| Opção | Para quê |
|---|---|
--select "main" | Só uma parte da página |
--width 1280 | Largura da tela |
--lang en|pt | Língua do relatório |
Acabamento está nos detalhes. Meça.
npx skills add c0le0ni/skills --skill coleoni-polish