Copie esta pasta inteira para componentes/<categoria>/<nome-kebab>/ e siga o
fluxo do CLAUDE.md §9.
Os dois comandos
Depois de preencher os arquivos, rode na raiz da biblioteca:
python bin/indice.py
Regenera catalogo.json, as tabelas do CATALOGO.md e os cards do showroom
a partir dos componente.json. Nenhum desses três é editado à mão.
bash bin/previews.sh
Regenera o preview.html de cada componente a partir do markup.html — os
dois nunca divergem. Para um só: bash bin/previews.sh hero/full-bleed-media.
Para ver com outro tema: TEMA=<projeto> bash bin/previews.sh.
E antes de dar por pronto, os dois que conferem:
python bin/conformidade.py <categoria>/<nome> # o código contra o contrato
node bin/varredura.js <categoria>/<nome> # o navegador: celular, sem JS, reduce, console
O componente.json deste modelo já traz os blocos editorial e vitrine
vazios: preencha com os termos de bin/editorial.json e bin/tags.json — a
conformidade reprova o componente sem eles.
Arquivos opcionais na pasta do componente
| Arquivo | Para quê |
|---|---|
preview-antes.html |
markup extra antes do componente (um rodapé só existe no fim de uma página; sem dobras em cima, não há o que revelar) |
preview-extra.html |
markup extra depois do componente (uma seção falsa embaixo, um botão que dispara o estado) |
preview-tema.txt |
nome do tema só para este componente, uma linha — clone de referência costuma só fazer sentido na cor da referência |
preview-css.txt |
folhas extras, um caminho relativo por linha — para componente que compõe outro |
preview-js.txt |
scripts extras, um por linha, inseridos antes do próprio |
O que ainda é escrito à mão
ficha.md— o documento que importacomponente.json— a fonte dos índicesmarkup.html,estilo.css,script.jsprojetos/<projeto>.md— de onde o componente veio