xarunoba/skills

html-slideshow

Uma apresentação de slides responsiva empacotada em um único arquivo .html autocontido e minificado. Autor escreve slides em HTML; o motor (assets/base.css + base.js) junto com uma build Bun produz o arquivo final. Requer Bun.

Fluxo de Trabalho

1. Verifique o runtime — bun --version (instale de bun.sh se ausente; verificado com 1.4.0).
2. Copie o template — copie assets/base.html, assets/base.css e assets/base.js para uma pasta do deck no workspace do usuário (lado a lado). O .html pode ser renomeado livremente (ex.: meu-deck.html); base.css e base.js são referenciados por caminho relativo a partir do .html, então renomeá-los requer atualizar essas referências.
3. Defina o título — no .html, edite <title>. O deck renderiza escuro por padrão; a impressão alterna automaticamente para uma paleta clara forçada.
4. Adicione slides — em <main id="deck">, um <section class="slide"> por slide:

   <section class="slide">
     <h2>Resultados trimestrais</h2>
     <ul><li>Receita aumentou 24%</li></ul>
   </section>
   

5. CSS/JS personalizados — apenas arquivos vinculados, nunca inline. Não adicione blocos <style> ou <script> ao .html — ele contém apenas o esqueleto da página e o conteúdo dos slides; a build inlinea os arquivos vinculados no arquivo final autocontido, o que mantém o código-fonte editável e o motor com fonte única. Dois locais aprovados para código personalizado: edite base.css / base.js diretamente, ou — para estilização/comportamento específicos do deck isolados do motor — adicione <link rel="stylesheet" href="extra.css"> / <script src="extra.js" defer></script> (a build inlinea eles; mantenha base.* sem modificações sempre que possível — veja references/bundling-assets.md). (Receitas em references/slide-patterns.md seguem isso.)
6. Dimensione com unidades de contêiner — nunca px. Cada slide é um contêiner de consulta CSS, então use cqw/cqh/cqmin e clamp() e o conteúdo se ajusta a qualquer tela. px/pt quebram a responsividade — não os use (o quadro externo usa svh). Esta é a única regra que os agentes erram; guia completo em references/responsive-units.md. Viewports em modo retrato são tratadas para você: os slides renderizam em sua tela paisagem e se ajustam para caber, então tabelas/grades largas nunca transbordam em uma tela de celular (--slide-w/--slide-h em :root, padrão 16/9).
7. Build — execute o script de build da habilidade: bun scripts/build.js meu-deck.html (envolve bun build --compile --target=browser --minify meu-deck.html --outdir dist; funciona em qualquer SO que o Bun suporte) → dist/meu-deck.html: um único arquivo minificado, autocontido com CSS, JS e quaisquer assets referenciados inlineados. Este é o arquivo que você distribui.
8. Verifique o arquivo gerado em uma ferramenta de navegador (uma URL file:// para dist/meu-deck.html). Aprovado: os controles renderizam; SetaDireita avança o contador para "2 / N" e define location.hash para #2; uma viewport de ~400×800 ainda mostra um slide totalmente visível com letterbox; O alterna a visão geral; emulação de mídia de impressão produz um slide por página. Os sinais estão documentados em references/using-the-deck.md. Se nenhuma ferramenta de navegador estiver disponível, diga que a verificação visual foi ignorada.
9. Limpeza — nada além da saída da build é criado; mantenha meu-deck.html, base.css e base.js (o código-fonte editável) junto a dist/meu-deck.html (o arquivo que você distribui). Se o usuário quiser apenas o arquivo único, mova dist/meu-deck.html para onde ele espera o deck e mantenha a pasta do deck como sua fonte.

Índice de Referências

Carregue sob demanda — não todos de uma vez:

• references/using-the-deck.md — configuração, o contrato do slide, navegação completa, links profundos (#5 abre o slide 5; #algum-id abre o slide que contém esse id; use para citações → fontes), a build e impressão.
• references/slide-patterns.md — receitas de slides prontas + orientação de autoria.
• references/responsive-units.md — o guia de dimensionamento fluido sem px.
• references/bundling-assets.md — SVG inline / assets de data-URI (a build também inlinea referências relativas).
• references/engine-anatomy.md — mapa do motor (base.html / base.css / base.js) para alterá-lo.
• examples/quickstart.html — um deck preenchido (código-fonte; faça a build para obter um arquivo autocontido).
• examples/README.md — as duas formas do deck de exemplo (código-fonte legível vs autônomo gerado) e como reconstruir o autônomo após edições.

Quando usar

Quando a saída deve ser mostrada uma tela inteira por vez: uma palestra, aula, demonstração, atualização de status ou pitch. Não para prosa com rolagem ou documentos.