aurora-ember-bio-lab/splatstudio

Um módulo de integração nos primeiros 30 dias para novos colaboradores da hotelaria — os comportamentos, a prática, as verificações e o acompanhamento do gerente. Construído como um deck de treinamento profissional para novos contratados e gerentes.

O que é splatstudio?

Este módulo de treinamento é projetado para os primeiros 30 dias de integração de novos colaboradores no setor de hospitalidade, abrangendo comportamentos esperados, práticas, verificações e o acompanhamento do gerente. Ele é apresentado como um deck de slides HTML interativo, baseado no sistema `html-ppt` (licenciado MIT). O usuário pode navegar pelos slides com o teclado, trocar temas entre 36 opções e incluir notas do apresentador de forma invisível na tela. Para criar seu próprio conteúdo, é necessário copiar o modelo de deck completo (`course-module`) e os ativos compartilhados (CSS, JS) para o projeto, ajustando os caminhos para evitar erros 404 ou incorporando tudo em um único arquivo HTML. A estrutura de classes do modelo deve ser mantida para que o CSS funcione corretamente. Este módulo é uma ferramenta profissional e personalizável para treinamento corporativo.

Funciona com✓Claude Code~Codex CLI~Cursor

npx skills add https://github.com/aurora-ember-bio-lab/splatstudio/tree/HEAD/design-templates/html-ppt-course-module

Documentação

HTML PPT · Módulo de Curso

Um ponto de entrada focado na habilidade mestre html-ppt que leva o usuário diretamente ao template de baralho completo course-module.

Quando este cartão é escolhido

A galeria de Exemplos vincula "Usar este prompt" ao example_prompt acima. Quando você aceita esse prompt, este cartão é a escolha certa se o usuário deseja exatamente a identidade visual de course-module (veja o catálogo de baralhos completos upstream full-decks catalog para capturas de tela e justificativa).

Como criar o baralho

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 token, reutilização de layout, modo apresentador, runtime do teclado e a regra "nunca coloque texto apenas para apresentador no slide".
Comece a partir da pasta de template correspondente: design-templates/html-ppt/templates/full-decks/course-module/ — copie index.html e style.css para o projeto, mantenha a classe de corpo .tpl-course-module.
Traga o runtime compartilhado com o template. O index.html upstream vincula os CSS/JS compartilhados via ../../../assets/... porque ele está três pastas dentro de design-templates/html-ppt/templates/full-decks/. Depois de copiar index.html para o projeto, essas URLs relativas ao pai não resolvem mais e base.css, animations.css e runtime.js resultarão em 404 — o que significa que o baralho nunca ativa e a navegação de slides está morta. Escolha uma destas duas receitas por projeto:
- Receita A — copiar + reescrever (preferida): 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 assets/ local ao projeto (com assets/animations/animations.css), então reescreva as quatro tags <link>/<script> em index.html de ../../../assets/... para os caminhos locais correspondentes (assets/fonts.css, assets/base.css, assets/animations/animations.css, assets/runtime.js).
- Receita B — inline: 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. Gera um único index.html autocontido. De qualquer forma, não envie as URLs ../../../assets/... upstream literalmente em um artefato de projeto — elas só funcionam dentro da árvore.
Escolha um tema. Os tokens padrão são bons; se o usuário quiser uma sensação diferente, troque por qualquer um dos 36 temas de design-templates/html-ppt/assets/themes/*.css via <link id="theme-link"> e deixe T alternar.
Substitua o conteúdo de demonstração, não as classes. O CSS escopo .tpl-course-module apenas reconhece as classes estruturais fornecidas no template — mantenha-as.
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 runtime de teclado vêm do repositório upstream com licença MIT lewislulu/html-ppt-skill. O arquivo LICENSE está em design-templates/html-ppt/LICENSE; mantenha-o no lugar ao redistribuir.