/carrossel
Workflow para produzir carrosséis com cara de marca, não de template. A qualidade vem de quatro coisas: roteiro antes do visual, a galeria como referência, assets próprios e checagem visual de cada render. Siga a ordem abaixo; não pule etapas.
Caminhos: <skill> é a pasta deste arquivo. Rode os scripts da raiz do projeto do usuário; --dir é relativo a ela. O projeto do usuário fica em carrosseis/ na raiz do repositório dele (ou outro caminho passado com --dir).
0. Primeira vez no projeto
node <skill>/scripts/checar-setup.mjs. Se faltar algo, mostre o comando exato ao usuário (normalmentenpm install --prefix <skill>enpx --prefix <skill> playwright install chromium).- Se
carrosseis/marca/marca.jsonnão existe:node <skill>/scripts/novo-projeto.mjse faça o onboarding.- Pergunte: a marca já tem identidade (logo, cores, posts) ou vamos criar do zero?
- Já tem: siga
references/onboarding-marca-existente.md. - Do zero: siga
references/onboarding-marca-nova.md.
- O onboarding termina com
marca/marca.json,marca/manual.md,GOSTO.mdiniciado e, se possível, uma série de assets (references/image-gen.md).
1. Antes de qualquer peça: ler
Sempre, nesta ordem: carrosseis/GOSTO.md, carrosseis/marca/manual.md, carrosseis/carrosseis.json (o que já existe e foi aprovado) e os manifest.json em carrosseis/assets/.
Ao sugerir temas, confira a galeria para não repetir o que já foi feito.
2. Roteiro primeiro
Siga references/roteiro.md. Entregue só texto: um bloco por slide, de 4 a 7 slides, capa com 2 ou 3 opções. Não desenhe nada até o usuário aprovar o roteiro.
3. Visual
Siga references/visual.md. Resumo:
- Parta das peças aprovadas na galeria, não de um layout novo a cada vez.
- Use
templates/slide-base.htmlcomo esqueleto. Ele não lê omarca.json: troque à mão os tokens do:root, o<link>da fonte e o nome da marca pelos valores demarca.json. - Um foco por slide. Assets grandes, integrados à composição. Prints reais quando falar de produto.
- Se nenhum asset da biblioteca servir, não invente nem gere sozinho: diga qual asset falta e entregue o prompt pronto (
references/image-gen.md) para o usuário gerar no Codex ou no ChatGPT. - Nunca numere slides ("01 / 05"): a plataforma já mostra.
4. Render e checagem
- Salve cada slide em
carrosseis/<id>/v<N>/slide-NN.htmlcom fontes e imagens resolvendo localmente. - Da raiz do projeto:
node <skill>/scripts/render.mjs <id>/v<N> --dir carrosseisgeraslide-NN.png(1080×1350) eslide-NN-2x.png(2160×2700). - Abra e olhe cada PNG antes de entregar: texto cortado, sobreposição, texto colado na borda, contraste, asset pequeno demais. Corrija e renderize de novo. Nunca entregue sem ter olhado.
5. Entrega
Siga references/entrega.md: registrar em carrosseis.json (com legenda), gerar o slider (build-viewer.mjs) e a galeria (build-gallery.mjs), e mostrar o resultado ao usuário.
6. Feedback vira gosto
Toda aprovação, recusa ou ajuste entra no GOSTO.md na mesma rodada (formato no próprio arquivo). Ao ajustar uma peça, mude só o que foi pedido. Revisão de um tema vira nova versão (v2, v3), nunca sobrescreve a anterior.
Regras fixas
- Não publicar, agendar ou postar nada. A skill entrega arquivos.
- Não inventar interface de produto: use print real ou o markup do próprio projeto.
- Dados de exemplo são identificados como exemplo.
- Português do usuário na copy; sem jargão que o público da marca não usa.


