Todos os estados de um componente. Não só o feliz.
Um componente é desenhado cheio de dados. Ele passa boa parte da vida esperando, vazio, falhando ou pela metade. A skill força cada um desses estados pelas chamadas reais de API do componente, mostra tudo lado a lado, acha os que ninguém desenhou e constrói.
npx skills add c0le0ni/skills --skill coleoni-states
Funcionou na demonstração. Aí o Wi-Fi caiu.
O painel do dia da padaria, do roadmap da /coleoni-init, na primeira versão. Com dados, perfeito. Em 6 dos outros 8 estados não mostrava nada, travava ou escrevia “Invalid Date”.
// painel do dia, primeira versão
fetch("/api/orders.json")
.then((r) => r.json())
.then((data) => render(data.orders))
$ /coleoni-states board.html
loading gives no sign it is loading
empty doesn't say there's nothing
partial crashes: null.toUpperCase
error crashes · "Invalid Date"
offline crashes: Failed to fetch
denied crashes · "Invalid Date"
Nove estados, pela API real.
O script carrega a página uma vez, grava as chamadas JSON que o componente faz, e depois responde diferente pra cada estado.
| Estado | Como é forçado |
|---|---|
| Pronto | A resposta real |
| Carregando | A resposta nunca chega |
| Vazio | Toda lista da resposta real esvaziada |
| Um, muitos | Toda lista com 1 item, e com 30 |
| Campos faltando | Metade dos valores de cada registro nula |
| Erro no servidor | A API responde 500 |
| Sem internet | A requisição falha como sem conexão |
| Sem permissão | A API responde 401: a sessão expirou |
Força, compara, constrói.
Alguns problemas não precisam de olho: um travamento, “undefined” na tela. Outros precisam de uma pessoa: uma mensagem de erro que não diz nada. A skill separa os dois.
-
Grava a API
Toda chamada JSON que o componente faz numa carga normal, ou as que você indicar.
-
Força cada estado
Mesma página, mesmo código, uma resposta diferente da API a cada vez.
-
Marca o óbvio
Em branco, travamento, valor cru, estado igual a outro, carregando sem sinal, vazio e erro que não dizem nada.
-
Mostra tudo junto
Abas pra cada estado e uma grade de todos, pros buracos saltarem aos olhos.
-
Julga o resto
O carregando mantém o layout? O erro diz que nada se perdeu? Um 401 é tratado como 401?
-
Constrói o que falta
Na camada de dados e nos componentes do projeto, com aria-busy e aria-live. 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-states
/coleoni-states http://localhost:3000/pedidos .pedidos
-g-a claude-code-a codexnpx skills add c0le0ni/skillsTudo que espera por dados.
Listas, dashboards, carrinhos, resultados de busca, feeds. Ela mostra o quadro primeiro.
Todos os estados de uma lista.
/coleoni-states http://localhost:3000/pedidos .pedidos
Escolher as chamadas de API.
/coleoni-states o dashboard --api "**/api/stats*"
Construir o que falta.
/coleoni-states o carrinho, constrói o vazio e o erro
O motor, pelo terminal.
O scripts/states.mjs também roda sozinho: node states.mjs http://localhost:3000 --select ".pedidos" --lang pt --out states-report.
| Opção | Para quê |
|---|---|
--select ".pedidos" | O componente |
--api "**/api/x*" | Chamadas de API a controlar, pode repetir; padrão: as chamadas JSON da página |
--states a,b | Só alguns estados |
--wait 1200 | Quanto esperar em cada estado |
--lang en|pt | Língua do quadro |
Desenhe a espera, o vazio e a falha também.
npx skills add c0le0ni/skills --skill coleoni-states