Habilidade de Deck Simples

Produza um deck HTML de arquivo único com rolagem horizontal usando a biblioteca seed e layout.

Mapa de Recursos

simple-deck/
├── SKILL.md                ← you're reading this
├── assets/
│   └── template.html       ← seed: tokens + slide primitives + proven nav script (READ FIRST)
└── references/
    ├── layouts.md          ← 8 paste-ready slide layouts + theme-rhythm rules
    └── checklist.md        ← P0/P1/P2 self-review (rhythm spot-check at bottom)

Fluxo de Trabalho

Etapa 0 — Pré-voo

1. Leia assets/template.html de ponta a ponta através do bloco <style> E do bloco <script>. O script resolve cinco bugs específicos de iframe (detecção de scroller real, ouvintes de fase de captura dupla, foco automático, sem scrollIntoView, persistência de posição) — não o reescreva.
2. Leia references/layouts.md para conhecer os 8 layouts. Preste atenção especial à seção "Ritmo do tema" — é a regra que impede que o deck pareça sonolento.
3. Leia o DESIGN.md ativo — mapeie seus tokens para as seis variáveis :root na seed.

Etapa 1 — Copie a seed

Copie assets/template.html para a raiz do projeto como index.html. Substitua as seis variáveis :root pelos tokens do sistema de design ativo. Substitua a página <title>.

Etapa 2 — Decida a contagem de slides + ritmo do tema ANTES de escrever qualquer slide

Padrão: 6 slides, a menos que o briefing diga o contrário.

Em seguida, escreva o ritmo antes de qualquer HTML — por exemplo, 8 slides:

01  hero light center  Cover
02  light              Problem
03  hero dark center   Big stat
04  light              Three points
05  dark               Pipeline
06  hero light center  Quote
07  light              Before / after
08  hero dark center   Ask

Uma sequência saudável tem:

• Sem 3+ temas iguais seguidos
• ≥ 1 hero dark E ≥ 1 hero light (para 8+ slides)
• Respiração alternada a cada 3–4 slides

Mostre este esboço de ritmo ao usuário antes de escrever o HTML do slide — eles podem redirecionar de forma barata.

Etapa 3 — Cole e preencha

Para cada slide planejado, copie o <section> correspondente de layouts.md para o corpo. Substitua o texto entre colchetes por conteúdo real e específico. Sem preenchimento / sem lorem. Se um slide parecer vazio, o layout está errado — escolha outro.

Marque cada slide com data-screen-label="01 Cover", "02 Problem", etc., na ordem em que você os escreveu. (Os três primeiros slides da seed já fazem isso — estenda o padrão.)

Etapa 4 — Autoverificação

Execute references/checklist.md. O "Verificação pontual do ritmo do tema" no final é inegociável:

grep 'class="slide' index.html

Leia a lista de classes resultante. Se você vir light × 4 in a row, troque um para dark. Se não houver hero dark em um deck de 8+ slides, promova um slide de estatística grande ou de encerramento.

Etapa 5 — Escreva o arquivo do projeto

Escreva o HTML do deck concluído em index.html.

Em seguida, envie um breve resumo de assistente comum nomeando index.html e descrevendo o deck. Não exiba o código-fonte HTML completo no chat e não emita um bloco de código-fonte <artifact>.

Regras rígidas

• Classe de tema em cada slide (light | dark | hero light | hero dark). class="slide" em branco = regressão.
• Sem 3+ temas iguais seguidos.
• Exibição = serif via var(--font-display). .h-hero / .h-xl / .h-md já impõem.
• Um acento por slide, usado no máximo duas vezes.
• Não reescreva o script de navegação. É comprovado.
• Sem scrollIntoView(). Quebra o iframe.
• data-screen-label em cada slide.