| name | relatorio-deck-html |
| description | Gera relatorio em HTML estilo apresentacao (slides 16:9) a partir de JSON: campos determinísticos preenchidos por script e slides livres em HTML para o agente. Use apos sabatina-prd, extracao de PRD/docs, ou entregas existentes. Para ficheiro .pptx nativo, usar tambem a skill pptx (Anthropic) no mesmo repo. |
Skill: Relatorio tipo deck (HTML semi-deterministico)
Objetivo
Produzir um ficheiro HTML que se comporta como um PPT: slides com caixas de tamanho controlado para texto estruturado, preenchidas via JSON + script, e slides livres onde o agente escreve HTML no mesmo tema visual (criatividade, nao 100% deterministico).
HTML nesta skill vs PowerPoint (.pptx)
| Entregavel | Skill | Quando |
|---|
| HTML (browser, PDF por impressao) | Esta skill (relatorio-deck-html) | Rapido, sem dependencias Office; bom para revisao e arquivo no repo |
| .pptx real (editar no PowerPoint, marca corporativa OOXML) | pptx (pasta pptx/ no mesmo */skills/, Anthropic) | Cliente pede ficheiro nativo, template empresa, animacoes |
Fluxo combinado sugerido: (1) sabatina-prd → PRD; (2) montar JSON → fill-deck.mjs → HTML; (3) se precisar .pptx, usar skill pptx para criar/editar apresentacao (ex. html2pptx ou fluxo de edicao descrito no SKILL.md da skill pptx), ou extrair texto/tema de um .pptx existente com markitdown / unpack OOXML conforme essa skill.
Artefatos (tudo dentro desta pasta de skill)
| Caminho | Papel |
|---|
assets/deck-base.html | Template com placeholders %%CHAVE%% |
scripts/fill-deck.mjs | Wrapper → motor scripts/skill-tools/deck-fill.mjs (repo) |
examples/exemplo-pos-sabatina.json | Exemplo PRD |
examples/exemplo-proposta-comercial-fake.json | Proposta comercial ficticia (tabela + SVG + texto rico) |
README-DECK.md | Uso rapido do script |
references/SCHEMA-DECK.md | Schema do JSON |
Padrao: recursos da skill colados ao SKILL.md; motores reutilizaveis (ex. deck-fill) ficam em scripts/skill-tools/ na raiz do repo com wrapper na skill.
Fluxo resumido
- Obter conteudo (uma das origens abaixo).
- Montar JSON seguindo
references/SCHEMA-DECK.md.
- Preencher
raw.BULLETS_HTML e opcionalmente FREE_HTML_1 / FREE_HTML_2 com HTML valido (lista, paragrafos, tabelas simples) no estilo escuro do template.
- Na raiz do repo (ou a partir desta pasta):
cd .claude/skills/relatorio-deck-html
node scripts/fill-deck.mjs examples/exemplo-proposta-comercial-fake.json
- Abrir
dist/deck-filled.html no navegador (idealmente por http:// na raiz do repo). Barra: PDF, PPTX editavel (texto + tabelas + SVG rasterizado; logo WebP→PNG), PPTX imagem (captura full-bleed), Imprimir…. Detalhes: README-DECK.md. Motor de preenchimento: scripts/skill-tools/deck-fill.mjs.
Origem A — Pos-sabatina
- Use a skill
sabatina-prd ate o PRD estar completo.
- Mapeie secoes do PRD para chaves do JSON:
- Titulo / subtitulo →
TITLE, SUBTITLE
- Problema, objetivo →
PROBLEM, GOAL
- Usuario primario →
USER_PRIMARY
- Decisao skill vs interface →
SKILL_OR_UI
- Escopo →
SCOPE_IN, SCOPE_OUT
- Requisitos priorizados →
raw.BULLETS_HTML como <ul class="compact">...</ul>
- Metrica de sucesso →
SUCCESS_METRIC
- Riscos / proximos passos →
RISKS, NEXT_STEPS
- Truncamento: caixas
.slot tem max-height no CSS; textos muito longos serao cortados visualmente — resuma no JSON (ex.: problema com menos de 600 caracteres).
Origem B — Leitura de entregas ja feitas
Use quando nao houver sabatina formal, mas existir material consolidado:
| Fonte | O que extrair |
|---|
plans/in-progress/*.md | Objetivo, escopo, requisitos, decisoes |
docs/05-ARCHITECTURE-DECISIONS.md | Decisoes que viram SKILL_OR_UI ou riscos |
docs/prd/*.md ou specs | Mesmo mapeamento da Origem A |
| Issues / commits / README | Somente como complemento; nao substitui PRD |
Codigo (app/) | Nome de fluxos, telas, entidades para bullets tecnicos |
Processo sugerido para o agente:
- Ler ficheiros indicados pelo usuario (ou descobrir os mais recentes em
plans/).
- Listar fatos extraidos em bullet (para transparencia).
- Preencher
replace.* com texto curto e factual.
- Montar
raw.BULLETS_HTML a partir de listas extraidas.
- Slides livres: usar
FREE_HTML_1 para diagrama ASCII, tabela comparativa, ou notas; FREE_HTML_2 para conteudo totalmente livre. Se nao houver ideia, deixar "" (slide vazio com dica visual).
Parte deterministica vs livre
- Deterministico: todos os campos em
replace passam por escape HTML no script — texto puro, sem tags.
- Semi-livre:
raw.BULLETS_HTML, FREE_HTML_* — sem escape; o agente controla markup. Deve usar classes existentes (.slot, .compact, cores inline coerentes com o tema escuro) para nao “quebrar” o layout.
- 0% deterministico (proposital): slides “Livre 1 / Livre 2” — conteudo quase todo em
FREE_HTML_*; o agente pode inserir estruturas novas (tabelas, colunas) desde que respeite legibilidade em 16:9.
Checklist antes de entregar
Referencia de schema e tema
references/SCHEMA-DECK.md — chaves replace / raw para assets/deck-base.html.references/DESIGN-SYSTEM-V4.md — paleta preto + vermelho e logo app/public/logov4.webp em cada slide (%%LOGO_SRC%%).
Erros comuns
- Colocar HTML em campos de
replace — vai aparecer escapado como texto.
- Esquecer
raw.BULLETS_HTML — slide de requisitos fica vazio.
- Texto longo demais nas
.slot — overflow cortado; resumir.
- Correr
fill-deck.mjs sem cd para a pasta da skill quando se usam caminhos relativos nos argumentos — preferir o comando em Fluxo resumido acima.
