HTML PPT · GitHub Gradiente Roxo Escuro

Um ponto de entrada focado na habilidade mestre html-ppt que leva o usuário diretamente ao modelo de apresentação completa obsidian-claude-gradient.

Quando este card é selecionado

A galeria de Exemplos conecta "Usar este prompt" ao example_prompt acima. Quando você aceita esse prompt, este card é a escolha certa se o usuário desejar exatamente a identidade visual de obsidian-claude-gradient (veja o catálogo de apresentações completas upstream full-decks catalog para capturas de tela e justificativas).

Como criar a apresentação

1. Leia a habilidade mestre primeiro. Todas as regras de criação estão em design-templates/html-ppt/SKILL.md — lista de verificação de conteúdo/público, regras de tokens, reutilização de layout, modo apresentador, o runtime do teclado e a regra "nunca coloque texto apenas para o apresentador no slide".
2. Comece pela pasta do modelo correspondente: design-templates/html-ppt/templates/full-decks/obsidian-claude-gradient/ — copie index.html e style.css para o projeto, mantenha a classe de corpo .tpl-obsidian-claude-gradient.
3. Traga o runtime compartilhado com o modelo. O upstream index.html vincula o CSS/JS compartilhado via ../../../assets/... porque ele fica três pastas abaixo em design-templates/html-ppt/templates/full-decks/. Assim que você copiar index.html para o projeto, esses URLs relativos aos pais não resolverão mais e base.css, animations.css e runtime.js darão 404 — o que significa que a apresentação nunca é ativada e a navegação de slides está desativada. Escolha uma destas duas receitas por projeto:
   • Receita A — copiar + reescrever (preferencial): copie design-templates/html-ppt/assets/fonts.css, design-templates/html-ppt/assets/base.css, design-templates/html-ppt/assets/animations/animations.css e design-templates/html-ppt/assets/runtime.js para um diretório local do projeto assets/ (com assets/animations/animations.css), então reescreva as quatro tags <link>/<script> em index.html de ../../../assets/... para os caminhos locais correspondentes do projeto (assets/fonts.css, assets/base.css, assets/animations/animations.css, assets/runtime.js).
   • Receita B — incorporar: leia os mesmos quatro arquivos e substitua cada <link rel="stylesheet" href="../../../assets/..."> por um <style>...</style> contendo o conteúdo do arquivo, e o <script src="../../../assets/runtime.js"> por um <script>...</script> contendo runtime.js. Resulta em uma única index.html autônoma. De qualquer forma, não envie os URLs upstream de ../../../assets/... verbatim para um artefato de projeto — eles só funcionam dentro da árvore.
4. Escolha um tema. Tokens padrão ficam bons; se o usuário quiser uma aparência diferente, troque qualquer um dos 36 temas de design-templates/html-ppt/assets/themes/*.css via <link id="theme-link"> e deixe T ciclar.
5. Substitua o conteúdo de demonstração, não as classes. O CSS com escopo de .tpl-obsidian-claude-gradient só reconhece as classes estruturais fornecidas no modelo — mantenha-as.
6. Notas do orador vão dentro de <aside class="notes"> ou <div class="notes"> — nunca como texto visível no slide.

Atribuição

Sistema visual, layouts, temas e o modelo de teclado runtime vêm do lewislulu/html-ppt-skill upstream com licença MIT. O arquivo LICENSE é fornecido em design-templates/html-ppt/LICENSE; por favor, mantenha-o no lugar ao redistribuir.