aurora-ember-bio-lab/splatstudio

Un módulo de incorporación para los primeros 30 días de nuevos empleados de hostelería: comportamientos, práctica, controles y seguimiento del gerente. Creado como un conjunto profesional de formación para la toma de decisiones para nuevos empleados y gerentes.

¿Qué es splatstudio?

Este skill, `aurora-ember-bio-lab/splatstudio`, es un módulo de incorporación profesional para los primeros 30 días de nuevos empleados en el sector de la hostelería. Su propósito es proporcionar una formación estructurada y decisoria que cubra comportamientos clave, prácticas diarias, controles de calidad y el seguimiento por parte del gerente. Está diseñado para ser utilizado como un deck de presentación HTML interactivo, basado en el skill maestro `html-ppt` y su plantilla `course-module`. El skill guía al usuario (desarrollador o formador) en la autoría del deck: leer las reglas del skill maestro, copiar la plantilla y los recursos compartidos (CSS, JS) al proyecto, elegir un tema visual entre 36 opciones, y reemplazar el contenido de demostración sin alterar las clases CSS. Es especialmente útil para equipos de RRHH o formación que necesitan crear rápidamente presentaciones atractivas y funcionales para la inducción de personal, asegurando que todas las etapas del proceso de onboarding estén cubiertas. El resultado es un deck HTML auto-contenido (si se usa la receta B) o con assets locales, que soporta modo presentador y navegación por teclado.

Compatible con✓Claude Code~Codex CLI~Cursor

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

Documentación

HTML PPT · Módulo de Curso

Un punto de entrada enfocado al skill maestro html-ppt que lleva al usuario directamente a la plantilla de deck completo course-module.

Cuándo se elige esta tarjeta

La galería de Ejemplos enlaza "Usar este prompt" al ejemplo_prompt anterior. Cuando aceptas ese prompt, esta tarjeta es la elección correcta si el usuario quiere exactamente la identidad visual de course-module (consulta el catálogo de decks completos para capturas de pantalla y justificación).

Cómo crear el deck

Lee primero el skill maestro. Todas las reglas de autoría están en design-templates/html-ppt/SKILL.md — lista de verificación de contenido/audiencia, reglas de tokens, reutilización de diseños, modo presentador, el runtime de teclado y la regla de "nunca poner texto solo para el presentador en la diapositiva".
Empieza desde la carpeta de plantilla correspondiente: design-templates/html-ppt/templates/full-decks/course-module/ — copia index.html y style.css en el proyecto, mantén la clase de cuerpo .tpl-course-module.
Incluye el runtime compartido con la plantilla. El index.html original enlaza el CSS/JS compartido mediante ../../../assets/... porque está tres niveles de profundidad dentro de design-templates/html-ppt/templates/full-decks/. Una vez que copias index.html en el proyecto, esas URLs relativas al padre ya no se resuelven y base.css, animations.css y runtime.js darán 404 — lo que significa que el deck nunca se activa y la navegación entre diapositivas no funciona. Elige una de estas dos recetas por proyecto:
- Receta A — copiar y reescribir (recomendada): copia design-templates/html-ppt/assets/fonts.css, design-templates/html-ppt/assets/base.css, design-templates/html-ppt/assets/animations/animations.css y design-templates/html-ppt/assets/runtime.js en un directorio local assets/ (con assets/animations/animations.css), luego reescribe las cuatro etiquetas <link>/<script> en index.html de ../../../assets/... a las rutas locales correspondientes (assets/fonts.css, assets/base.css, assets/animations/animations.css, assets/runtime.js).
- Receta B — incrustar: lee los mismos cuatro archivos y reemplaza cada <link rel="stylesheet" href="../../../assets/..."> con un <style>...</style> que contenga el contenido del archivo, y <script src="../../../assets/runtime.js"> con un <script>...</script> que contenga runtime.js. Esto produce un único index.html autocontenido. De cualquier manera, no envíes las URLs ../../../assets/... originales tal cual a un artefacto del proyecto — solo funcionan dentro del árbol del repositorio.
Elige un tema. Los tokens por defecto se ven bien; si el usuario quiere un estilo diferente, puede cambiar a cualquiera de los 36 temas de design-templates/html-ppt/assets/themes/*.css mediante <link id="theme-link"> y presionar T para cambiar.
Reemplaza el contenido de demostración, no las clases. El CSS con ámbito .tpl-course-module solo reconoce las clases estructurales incluidas en la plantilla — manténlas.
Las notas del orador van dentro de <aside class="notes"> o <div class="notes"> — nunca como texto visible en la diapositiva.

Atribución

El sistema visual, los diseños, los temas y el modelo de runtime de teclado provienen del skill lewislulu/html-ppt-skill con licencia MIT. El archivo LICENSE se encuentra en design-templates/html-ppt/LICENSE; por favor, mantenlo en su lugar al redistribuir.