aurora-ember-bio-lab/splatstudio

Ein Onboarding-Modul für die ersten 30 Tage neuer Mitarbeiter im Gastgewerbe – Verhaltensweisen, Übungen, Kontrollen und Nachverfolgung durch die Führungskraft. Entwickelt als professionelles Schulungsdeck für Neulinge und Manager.

Was ist splatstudio?

Dieses Skill-Paket ist ein fokussierter Einstieg in die übergeordnete Fertigkeit `html-ppt` und führt den Benutzer direkt zur vollständigen Kursmodul-Vorlage (`course-module`). Es ist ideal, wenn ein Benutzer die spezifische visuelle Identität eines Schulungsdecks für das Gastgewerbe benötigt, das Verhaltensweisen, Übungen, Checklisten und die Nachverfolgung durch Manager abdeckt. Der Skill unterstützt alle Plattformen, die `html-ppt` nutzen, und die Autoren-Regeln sowie die Runtime sind vollständig im Master-Skill definiert. Der Entwickler muss die Vorlage und die Assets gemäß den detaillierten Anweisungen (z. B. Kopieren+Umschreiben oder Inline-Einbetten) lokal einrichten, um die Funktionsfähigkeit sicherzustellen. Der Skill betont die strikte Einhaltung der Vorlagenklassen und die Trennung von Sprechernotizen und sichtbaren Folieninhalten, um eine professionelle und konsistente Präsentation zu gewährleisten.

Funktioniert mit✓Claude Code~Codex CLI~Cursor

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

Dokumentation

HTML PPT · Kursmodul

Ein gezielter Einstieg in die übergeordnete Fertigkeit html-ppt, der den Benutzer direkt auf die course-module-Vollständigkeitsvorlage führt.

Wann diese Karte ausgewählt wird

Die Beispielgalerie verknüpft „Diese Eingabeaufforderung verwenden“ mit dem obigen Beispiel-Prompt. Wenn Sie diesen Prompt akzeptieren, ist diese Karte die richtige Wahl, wenn der Benutzer genau die visuelle Identität von course-module wünscht (siehe das übergeordnete Vollständigkeitsverzeichnis für Screenshots und Begründung).

So erstellen Sie das Deck

Lesen Sie zuerst die übergeordnete Fertigkeit. Alle Autorenregeln befinden sich in design-templates/html-ppt/SKILL.md – Inhalts-/Zielgruppen-Checkliste, Token-Regeln, Layout-Wiederverwendung, Präsentatormodus, die Tastaturlaufzeit und die Regel „Nie präsentatorbezogenen Text auf die Folie setzen“.
Beginnen Sie mit dem passenden Vorlagenordner: design-templates/html-ppt/templates/full-decks/course-module/ – kopieren Sie index.html und style.css in das Projekt, behalten Sie die body-Klasse .tpl-course-module bei.
Bringen Sie die gemeinsame Runtime mit der Vorlage mit. Die übergeordnete index.html verlinkt das gemeinsame CSS/JS über ../../../assets/..., da sie drei Ordner tief in design-templates/html-ppt/templates/full-decks/ liegt. Sobald Sie index.html in das Projekt kopiert haben, lösen diese übergeordneten relativen URLs nicht mehr auf und base.css, animations.css und runtime.js werden 404 zurückgeben – das Deck wird niemals aktiviert und die Foliennavigation ist tot. Wählen Sie eines der beiden folgenden Rezepte pro Projekt:
- Rezept A – Kopieren + Umschreiben (bevorzugt): kopieren Sie design-templates/html-ppt/assets/fonts.css, design-templates/html-ppt/assets/base.css, design-templates/html-ppt/assets/animations/animations.css und design-templates/html-ppt/assets/runtime.js in ein projektspezifisches assets/-Verzeichnis (mit assets/animations/animations.css), dann schreiben Sie die vier <link>- und <script>-Tags in index.html von ../../../assets/... auf die entsprechenden projektspezifischen Pfade um (assets/fonts.css, assets/base.css, assets/animations/animations.css, assets/runtime.js).
- Rezept B – Inline: lesen Sie dieselben vier Dateien und ersetzen Sie jeden <link rel="stylesheet" href="../../../assets/..."> durch ein <style>...</style>, das den Inhalt der Datei enthält, sowie das <script src="../../../assets/runtime.js"> durch ein <script>...</script>, das runtime.js enthält. Ergibt eine einzelne eigenständige index.html. Senden Sie auf keinen Fall die übergeordneten ../../../assets/...-URLs unverändert in ein Projektartefakt – sie funktionieren nur im Originalbaum.
Wählen Sie ein Theme. Die Standard-Token sehen gut aus; wenn der Benutzer ein anderes Gefühl wünscht, tauschen Sie eines der 36 Themes aus design-templates/html-ppt/assets/themes/*.css über <link id="theme-link"> ein und lassen Sie T zyklieren.
Ersetzen Sie Demo-Inhalte, nicht Klassen. Das auf .tpl-course-module beschränkte CSS erkennt nur die strukturellen Klassen, die in der Vorlage ausgeliefert werden – behalten Sie diese.
Sprechernotizen kommen in <aside class="notes"> oder <div class="notes"> – niemals als sichtbarer Text auf der Folie.

Zuschreibung

Das visuelle System, die Layouts, die Themes und das Tastaturlaufzeitmodell stammen aus der übergeordneten, MIT-lizenzierten lewislulu/html-ppt-skill. Die LICENSE-Datei befindet sich unter design-templates/html-ppt/LICENSE; bitte behalten Sie diese bei der Weiterverteilung an Ort und Stelle.