Replit Deck Skill

Produza um deck HTML de arquivo único com rolagem horizontal em um dos oito temas do Replit-Slides. Cada tema é um sistema visual completo — não misture tokens entre temas.

Mapa de recursos

replit-deck/
├── SKILL.md                ← you're reading this
├── assets/
│   └── template.html       ← seed: 8 themes via [data-theme=*], proven iframe-nav script (READ FIRST)
├── references/
│   ├── themes.md           ← 8 themes: when-to-pick / do / don't / primary layouts
│   ├── layouts.md          ← 10 paste-ready slide layouts, cross-theme
│   ├── components.md       ← shared primitives (eyebrow, kpi-row, image-grid, meta-bar)
│   └── checklist.md        ← P0/P1/P2 self-review + theme lock-in gate
└── examples/               ← four reference decks across the most contrasting themes
    ├── example-helix.html       (SaaS board update · light minimal)
    ├── example-holm.html        (legal fintech memo · cream editorial serif)
    ├── example-atlas.html       (quarterly history chapter · black + vermilion)
    └── example-bluehouse.html   (real estate ROI · navy + gradient cards)

Fluxo de trabalho

Etapa 0 — Pré-voo (leituras obrigatórias)

1. Leia assets/template.html de ponta a ponta. Os blocos [data-theme] contêm os tokens; o <script> na parte inferior resolve cinco bugs de navegação do iframe — não o reescreva.
2. Leia references/themes.md → escolha um tema que corresponda ao briefing do usuário. Se o usuário já escolheu um tema via od.inputs.theme, use esse.
3. Leia references/layouts.md → você copiará blocos <section> daqui.
4. Leia references/checklist.md → P0 deve passar antes da emissão.

Etapa 1 — Comprometa-se com um tema

Escreva em voz alta (na seção TodoWrite ou plano) qual tema e por quê. Uma vez escolhido, cada slide usa apenas os tokens desse tema. Sem trocas no meio do deck. O atributo <body data-theme="helix"> é a única fonte de verdade.

Etapa 2 — Planeje o ritmo dos slides antes de escrever o HTML

Padrão de 6 slides. Escreva o ritmo ANTES de qualquer HTML, por exemplo (hélice, 6 slides):

01  cover           hero + title + subtitle
02  kpi-row-6       6 metrics with ▲/▼ deltas
03  split-insight   left stat + right paragraph
04  chapter-plate   section divider
05  three-up        three parallel columns
06  closing         one bold number or CTA

Mostre isso ao usuário. Redirecionar nesta fase é barato.

Etapa 3 — Copie a semente, vincule o tema

1. Copie assets/template.html para a raiz do projeto como index.html.
2. Defina <body data-theme="<chosen>">.
3. Substitua <title>.
4. Exclua os slides de espaço reservado no corpo (a semente vem com 3 slides de demonstração). Mantenha o cromo (contador / progresso / dica).

Etapa 4 — Cole layouts, preencha com conteúdo real

Para cada slide planejado, copie o <section> correspondente de references/layouts.md. Substitua cada [REPLACE] por conteúdo específico — nunca deixe placeholders, nunca use lorem. Se um slide parecer vazio, escolha um layout diferente.

Marque cada slide com data-screen-label="01 Cover", "02 Metrics", etc., na ordem de apresentação.

Etapa 5 — Autoverificação

Execute references/checklist.md silenciosamente antes da emissão: o gate de bloqueio de tema P0 mais a crítica de cinco dimensões de 1 a 5 (Filosofia / Hierarquia / Execução / Especificidade / Restrição). Qualquer dimensão ≤ 3 → refaça antes da emissão.

O grep de bloqueio de tema P0 é inegociável:

grep -E 'data-theme|style="--' index.html | head

Se algum style="--accent:..." ou substituição de tema aparecer em slides individuais, reverta. Um tema por deck.

Etapa 6 — Emita o artefato

<artifact identifier="deck-<slug>" type="text/html" title="<Deck title>">
<!doctype html>
<html>...</html>
</artifact>

Uma frase antes do artefato. Pare após </artifact>.

Regras rígidas

• Um tema por deck. data-theme definido em <body> — nunca substitua por slide.
• Números são reais ou ausentes. Sem métricas inventadas. Use — ou um bloco cinza como placeholder honesto.

…