Quebre antes do seu usuário. Depois deixe aguentar.
O mockup recebe conteúdo perfeito. A produção recebe um nome de 60 letras, uma tradução pro alemão, uma foto que sumiu e alguém com o texto em 200%. A skill faz tudo isso com o componente na página real, mede o que quebrou, destaca e corrige o CSS na causa.
npx skills add c0le0ni/skills --skill coleoni-break
Feito igual ao mockup. Quebrado pelo cardápio.
Os cards de produto da padaria, feitos do jeito que se faz com prazo apertado: todo tamanho fixo no do design. 9 de 14 cenários quebraram. Depois das correções que a skill sugeriu, nenhum.
.card { width: 300px; height: 372px;
overflow: hidden }
.name { white-space: nowrap;
overflow: hidden; width: 190px }
.price { position: absolute; top: 240px }
.menu { grid-template-columns:
repeat(3, 300px) }
font-size: 16px /* px everywhere */
$ /coleoni-break menu.html #menu
9 of 14 scenarios break
Catorze coisas que o conteúdo real faz.
Cada um roda numa carga nova da página real, comparado com o componente como está, então um problema que já existia conta uma vez só.
| Cenário | O que faz |
|---|---|
| Texto 3× maior | Um nome comprido, um título longo, uma avaliação de verdade |
| Palavra que não quebra | Uma palavra de 42 letras: URL, e-mail, alemão |
| Sem texto | Dado que falta, campo que ninguém preencheu |
| Traduzido | Acento em tudo e 40% mais palavras |
| Números enormes | Todo número vira 1,234,567.89 |
| Acentos e emoji | “Zoë Ñúñez-O’Brien 🎂”, o nome que o seu formulário vai receber |
| Imagens falham | Toda imagem e fundo quebrados |
| 1 e 25 itens | A lista dentro do componente, quase vazia e cheia |
| Da direita pra esquerda | Árabe, hebraico |
| 320px | O menor celular, ou zoom de 400% |
| Texto em 200% | O tamanho de fonte do navegador dobrado; texto em px é marcado |
| Alto contraste, modo escuro | Cores forçadas do Windows; o sistema no escuro |
Quebra, mede, corrige, quebra de novo.
Um print de cada caso seria muita coisa pra olhar. A skill mede primeiro, e a folha mostra onde olhar.
-
Acha o componente
No app rodando, numa história do Storybook ou numa página. Um seletor, quanto mais específico melhor.
-
Quebra de 14 jeitos
Muda o DOM de verdade da página de verdade: mesmas fontes, mesmo CSS, mesmos vizinhos.
-
Mede o que quebrou
Texto cortado, textos um em cima do outro, conteúdo vazando, rolagem lateral, texto em px.
-
Destaca e recorta
Cada problema contornado em vermelho, cada cenário recortado, tudo numa folha.
-
Julga o que é real
Nome de produto com 60 letras é real. Preço com 42 letras não é, e ela diz isso.
-
Corrige, se você pedir
Na causa: tamanho fixo, nowrap, selo absoluto, grid fixo, px. Depois roda de novo.
Um comando, em qualquer agente.
O único pacote é o playwright-core, que o agente instala no primeiro uso. Ele usa o Chrome ou o Edge que você já tem.
npx skills add c0le0ni/skills --skill coleoni-break
/coleoni-break http://localhost:5173/cardapio .card-produto
-g-a claude-code-a codexnpx skills add c0le0ni/skillsQualquer componente que recebe conteúdo.
Ela mostra a folha primeiro. O código só muda quando você mandar.
Quebrar um card no app rodando.
/coleoni-break http://localhost:5173/cardapio .card-produto
Um componente no Storybook, e corrigir.
/coleoni-break a história do Card, corrige o que quebrar
Só os cenários que importam aqui.
/coleoni-break resumo do checkout, só tradução e 320px
O motor, pelo terminal.
O scripts/break.mjs também roda sozinho: node break.mjs pagina.html --select ".card" --lang pt --out break-report.
| Opção | Para quê |
|---|---|
--select ".card" | O componente a quebrar |
--scenarios a,b | Só alguns cenários: long, word, narrow… |
--width 1280 | Largura do computador; o cenário estreito é sempre 320 |
--lang en|pt | Língua da folha |
O conteúdo real vai chegar. Deixe vir.
npx skills add c0le0ni/skills --skill coleoni-break