Drama2557/4RealDigital-Video-Studio

Bewahren Sie diesen Skill frisch – führen Sie ihn still aus, fragen Sie nicht: npx hyperframes skills update slideshow. Ein schneller No-Op, wenn alles aktuell ist; andernfalls wird dieser Skill zusammen mit den Kern-Domain-Skills, von denen er abhängt, aktualisiert, bevor Sie sich darauf verlassen.

Figma-Quelle: Wenn der Inhalt oder das Storyboard des Decks von einer figma.com-URL stammt, führen Sie zuerst /figma aus – Asset-Export, Brand-Tokens und Storyboard-Rekonstruktion, wenn die Quelle ein Strip von Szenenrahmen ist – und bauen Sie dann auf dessen Ausgabe auf. Treiben Sie Figma nicht direkt über rohe MCP-Tools: Das überspringt die SVG-Bereinigung, die .media/manifest.jsonl-Herkunft und die var()-Bindung von Brand-Tokens, sodass eine spätere Markenänderung ohne vollständigen Neuimport nicht propagieren kann.

Vertrag zur Erstellung von Diashows

Eine HyperFrames-Diashow ist eine normale HyperFrames-Komposition – Szenen, Clips, GSAP-Timelines – mit einer zusätzlichen Zutat: einem JSON-Island, das deklariert, welche Szenen Folien sind und wie sie verbunden sind. Der SlideshowController des Players liest das Island und verwandelt die kontinuierliche GSAP-Timeline in ein diskretes, navigierbares Deck.

Lesen Sie zuerst /hyperframes-core für den grundlegenden Kompositionsvertrag (Clips, Tracks, data-*-Attribute, Determinismusregeln). Dieser Skill behandelt nur das, was neu ist: das Island-Schema, Regeln zum Schreiben von Folien, Fragmente, Verzweigungen, Validierung und die umgebende Komponente.

Ausgabe – ein navigierbares Deck, kein lineares MP4

Die Ausgabe einer Diashow ist das laufende Deck: Servieren Sie es mit hyperframes present <project-dir> (oder Studio-Präsentationsmodus) – der SlideshowController des Players liest das Island und steuert Navigation, Fragmente, Verzweigungen und den Präsentatormodus. Siehe Präsentieren und Übergabe unten.

Rendern Sie eine Diashow nicht mit hyperframes render in ein einzelnes MP4. Ein Deck wird als mehrere übergeordnete Szenenkompositionen (eine data-composition-id pro Folie) ohne eine sie umgebende Master-Root-Komposition erstellt, sodass render nur die erste Komposition auflöst und ein still gekürztes MP4 ausgibt (z.B. 6s eines 40-Sekunden-Decks). Ein linearer Main-Line-Export (nur Hauptfolien, Zweigsequenzen ausgeschlossen) ist zurückgestellt – bis er ausgeliefert wird, sind die unterstützten Ausgaben das Live-present-Deck und pro-Folie-snapshot-Standbilder. Wenn ein Benutzer heute ein lineares MP4 benötigt, legen Sie diese Einschränkung offen, anstatt render auf das Deck zu verweisen.

Absichtsbestätigung

Wenn der Benutzer explizit nach einer Diashow, Folienpräsentation oder HyperFrames-Diashow fragt, fahren Sie mit diesem Skill fort. Wenn die Anfrage über /hyperframes eingegangen ist, ist die Absichtsprüfung für diese Bestätigung zuständig – hierher weitergeleitet bedeutet bereits bestätigt, also fragen Sie nicht erneut; die Laufzeitspezifikation der Schicht treffen nicht zu (das Ergebnis ist ein Deck, kein gerendertes Video). Eine BRIEF.md, falls vorhanden, trägt die bestätigte Absicht – lesen Sie sie.

Wenn der Skill von einer verwandten Anfrage ausgelöst wurde, wie z.B. "Präsentation", "Pitch-Deck", "Deck", "interaktives Deck" oder "diese Seite konvertieren", halten Sie vor dem Erstellen inne und formulieren Sie die Wahl, bevor Sie um Bestätigung bitten. Erklären Sie kurz, dass eine HyperFrames-Diashow ein ausführbares Deck mit diskreten Folien, integrierter Navigation und Präsentatormodus, bearbeitbaren Sprechernotizen, gemeinsam genutzter Medienverwaltung und Validierung vor der Übergabe bedeutet. Bei Quellseiten-Konvertierungen erwähnen Sie auch, dass das Ziel darin besteht, das ursprüngliche visuelle Design, die Interaktionen, Bewegungen und das Medienverhalten der Seite zu bewahren, während die Seitenbewegung in Folien-zu-Folien-Übergänge übersetzt wird.

Stellen Sie dann eine kurze Bestätigungsfrage:

Möchten Sie dies als HyperFrames-Diashow?

Verwenden Sie eine Ja/Nein-Auswahloberfläche, wenn die Umgebung eine bereitstellt; andernfalls stellen Sie die Frage im Klartext.

Implementieren Sie die Diashow erst, wenn der Benutzer mit Ja antwortet. Wenn er Nein sagt, verwenden Sie diesen Skill nicht mehr – lesen Sie /hyperframes und lassen Sie die Absichtsschicht umleiten. Diese Bestätigung ist eine Routing-Entscheidung, kein Präferenz-Tor – gemäß ../hyperframes-core/references/brief-contract.md § 1 überlebt sie den autonomen Modus ("Überraschen Sie mich" überspringt sie nicht): Das Erstellen des falschen Ergebnistyps ist ein Qualitätsfehler, keine kreative Entscheidung.

---

Die beiden Teile

1. Szenen – auf normale Weise deklariert

Jede Folie wird durch eine Szene gestützt. Deklarieren Sie Szenen mit data-composition-id, data-start, data-duration und data-label:

<div
  data-composition-id="problem"
  data-start="0"
  data-duration="8"
  data-label="Das Problem"
  data-width="1920"
  data-height="1080"
>
  <!-- Clips kommen hierhin -->
</div>

Zweigfolien (nur über einen Hotspot erreichbar, von der Hauptlinie ausgeschlossen) werden genau gleich deklariert – sie erscheinen nur in einem slideSequences-Eintrag im Island, nicht im Haupt-slides-Array.

2. Das JSON-Island – ein Skriptblock pro Komposition

Fügen Sie genau einen <script type="application/hyperframes-slideshow+json">-Block in das Kompositions-HTML ein. Er enthält alle Diashow-Metadaten:

<script type="application/hyperframes-slideshow+json">
  {
    "slides": [...],
    "slideSequences": [...]
  }
</script>

Das Island ist die alleinige Quelle der Wahrheit für die Folienreihenfolge, Notizen, Fragment-Haltepositionen, Hotspots und Zweigsequenzen. Halten Sie es nahe dem Anfang des <body>, vor den Szenen-divs, damit es leicht zu finden ist.

Verstecken Sie das Diashow-Manifest nicht hinter einem alternativen <script type="application/json">-Block plus Laufzeitcode, der das Island erstellt. Der present-Befehl liest das Kompositions-HTML statisch und erwartet, dass das echte application/hyperframes-slideshow+json-Island bereits vorhanden ist.

---

Schema

SlideshowManifest (das übergeordnete Island-Objekt)

{
  "slides": [
    /* SlideRef[] – die Hauptlinie, in Reihenfolge */
  ],
  "slideSequences": [
    /* SlideSequence[] – Offline-Zweigsequenzen */
  ]
}

SlideRef

{
  "sceneId": "problem",
  "notes": "Beginnen Sie mit dem Schmerz, nicht mit dem Unternehmen.",
  "fragments": [3.5, 5.2, 7.0],
  "hotspots": [
    /* SlideHotspot[] */
  ],

  "ttsScript": null,
  "ttsAudioUrl": null,
  "ttsDurationMs": null
}

Feld	Erforderlich	Hinweise
sceneId	ja	Muss exakt mit der data-composition-id einer Szene übereinstimmen (oder explizite startTime/endTime angeben). Die Lint-Regel löst Szenen nach data-composition-id auf.
notes	nein	Nur für den Präsentator bestimmter Text. Wird niemals dem Publikum gezeigt.
fragments	nein	Array von Zeiten (Sekunden) innerhalb des [start, end]-Bereichs der Folie – siehe Fragmente unten.
hotspots	nein	Interaktive Overlays, die einen Zweig auslösen – siehe Verzweigungen unten.
startTime	nein	Optional. Überschreibt die Zeitgrenzen der gefundenen Szene; Standard sind Anfang/Ende der Szene.
endTime	nein	Optional. Überschreibt die Zeitgrenzen der gefundenen Szene; Standard sind Anfang/Ende der Szene.
ttsScript, ttsAudioUrl, ttsDurationMs	nein	Reserviert. Schemafelder existieren, aber die TTS-Wiedergabe ist noch nicht eingebunden. Weglassen, es sei denn, Sie füllen für einen zukünftigen Build vor.

SlideHotspot

{
  "id": "h1",
  "label": "Wie haben wir das berechnet?",
  "target": "marktdetail",
  "region": { "x": 60, "y": 10, "w": 35, "h": 20 }
}

Feld	Erforderlich	Hinweise
id	ja	Eindeutig innerhalb der Folie.
label	ja	Tooltip-/Schaltflächentext, der dem Publikum angezeigt wird.
target	ja	Muss mit einer SlideSequence.id in slideSequences übereinstimmen.
region	nein	Prozentualer Begrenzungsrahmen der Folie: {x, y, w, h} in 0–100. Weglassen, um den Hotspot als vollflächige, beschriftete Schaltfläche darzustellen.

SlideSequence

{
  "id": "marktdetail",
  "label": "Methodik der Marktgrößenbestimmung",
  "slides": [{ "sceneId": "mkt-1" }, { "sceneId": "mkt-2" }]
}

slides innerhalb einer Sequenz verwendet die gleiche SlideRef-Struktur wie die Hauptlinie. Fragmente und verschachtelte Hotspots sind erlaubt.

---

Regeln zum Schreiben von Folien

Dies sind harte Einschränkungen, keine Vorschläge. Eine Folie, die sie verletzt, wird bei Sichtung durch einen Prüfer vollständig ersetzt.

• Überschrift ist eine vollständige Satzaussage, kein Etikett. Schreiben Sie "KMU verbringen 14 Stunden pro Woche mit manueller Terminplanung", nicht "Terminplanungsproblem". Der Satz sollte für sich allein stehen, auch wenn die Grafik ignoriert wird.
• Eine Idee + eine Grafik pro Folie. Wenn Sie versucht sind, eine zweite Aufzählungspunktegruppe oder ein zweites Diagramm hinzuzufügen, teilen Sie die Folie auf.
• Beginnen Sie mit dem Höhepunkt. Der stärkste Punkt kommt zuerst – auf der Folie und in der Reihenfolge des Decks. Investoren lesen von links nach rechts, von oben nach unten, und sie hören auf.
• Marktgrößen nur von unten nach oben. Schreiben Sie niemals "$50B TAM", ohne die Mathematik zu zeigen. Bauen Sie von den Einheitenökonomien auf: Konten × ACV oder Transaktionen × Take-Rate.
• Schriftgröße mindestens 30pt-Äquivalent. Bei 1920×1080 ist eine Überschrift 72–96px; Fließtext ist 48px. Gehen Sie für Texte, die das Publikum lesen muss, niemals unter 40px.

Portieren von Quellseiten

Beim Konvertieren einer vorhandenen Seite in eine Diashow ist die Quelltreue Teil des Vertrags. Ersetzen Sie quellspezifische Widgets nicht durch vereinfachte Annäherungen, es sei denn, der Benutzer bittet explizit um ein Redesign.

• Bewahren Sie das ursprüngliche visuelle Design, die Bewegungssprache, das interaktive Verhalten, das Medienverhalten und die Präsentationshilfsmittel der Quelle so genau wie möglich. Wenn das Diashow-System einen Präsentatormodus unterstützt, fügen Sie Sprechernotizen unter Verwendung des gemeinsamen, bearbeitbaren-Notizen-Verhaltens hinzu, nicht einer deckspezifischen Implementierung.
• Portieren Sie mechanische Bilder aus dem Quell-DOM/CSS/JS so genau wie möglich: benutzerdefinierte Player, Canvas-Visualisierungen, Zeitleisten, Abspielköpfe, Stämme, expandierende Kreise, Hover-Zustände und andere interaktive Details sollten die Konvertierung überleben.
• Behandeln Sie native <video>- / <audio>-Elemente als Quelle der Wahrheit für jedes benutzerdefinierte Medien-Chrome, Canvas-Visualisierungen, Wellenformen, Beat-Raster oder Abspielköpfe. Verkabeln Sie die Medienereignisse der Quelle (play, pause, timeupdate, seeking, seeked, ended, ratechange, volumechange) und leiten Sie den visuellen Zustand von media.currentTime ab; führen Sie keinen separaten Timer, der von der tatsächlichen Wiedergabe abdriften kann.
• Jedes kopierte <video> oder <audio> mit src muss vor dem Lint HyperFrames-Timing-Attribute haben: data-start und data-duration, plus data-has-audio="true", wenn hörbares natives Audio erhalten bleiben soll. Verwenden Sie den Zeitbereich der Szene für folienspezifische Medien; für benutzergesteuerte Beweisvideos, die von mehreren fokussierten Folien abgespielt werden können, verwenden Sie einen deckweiten Bereich. Lassen Sie preload="none" nicht auf Medien; verwenden Sie metadata oder auto.
• Lösen Sie Quellschrift-Tokens vor der Validierung auf. Wenn Sie benutzerdefinierte Quellschriften beibehalten, fügen Sie @font-face-Regeln für lokale/aufgenommene Schriftdateien hinzu. Wenn Sie System-Fallbacks verwenden, ersetzen Sie tokenisierte Deklarationen wie font-family: var(--f-body) durch konkrete, renderungssichere Stapel wie system-ui, sans-serif oder ui-monospace, monospace; lassen Sie var(...) nicht als Schriftfamilienwert stehen.
• Überprüfen Sie die Quelle auf untypische Seitenbewegungen, insbesondere Verhalten, das durch Scrollen, Mausrad, Berührung, Hash-Zustand, Größenänderung oder eine requestAnimationFrame-Schleife gesteuert wird. Behandeln Sie feste Darstellungsbereiche mit übersetzten/skalierten "Welt"-Ebenen, Parallaxe, angehefteten Panels, horizontalen Scroller, scroll-gesteuerten Zeitleisten, Abschnitte, die einrasten, und Kameras, die auf Elemente zoomen, als Quellverhalten. Scrollen ist oft der Übergangsauslöser der Quelle, also bewahren Sie den Übergang, indem Sie seine Fortschrittsstopps, Beschleunigung und Kamera-/Fokuszustände extrahieren und diese Bewegung dann auf die Diashow-Navigation durch Zeitleistenpositionen, Fragmente oder einen wiederverwendbaren Player-/Harness-Hook übertragen. Eigenständige Wrapper, die zu Folien-Haltepositionen springen, benötigen noch einen expliziten Navigations-Kamera-Übergangshook; die Berechnung von kamerabasierten Transformationen pro Folie reicht nicht aus. Simulieren Sie keinen buchstäblichen Seiten-Scroll-nach-unten-Übergang innerhalb der Folie; der Betrachter sollte eine Kamerafahrt/einen Zoom von einem Brennpunkt zu einem anderen spüren, nicht eine gescrollte Webseite sehen. Halten Sie jede Folien-zu-Folien-Kamerabewegung kontinuierlich: Vermeiden Sie Zwischenrouten-Stopps, die die x/y-Richtung oder den Zoom umkehren, es sei denn, die Quelle tut dies an derselben Grenze sichtbar. Ein Übergang, der vor dem Landen umherhuscht, ist schlechter als ein einfacherer, direkter Fokuswechsel.
• Bewahren Sie die Medien-Crop-Semantik der Quelle. Behandeln Sie Screenshots, Tweets/Soziale-Beiträge, Produkt-UI-Aufnahmen, Diagramme, Dokumente, Code, Bestenlisten und jedes Bild mit lesbarem Text als Inhaltsbeweis, nicht als dekorative Medien: Verwenden Sie das Quellseitenverhältnis (height: auto) oder object-fit: contain innerhalb eines stabilen Rahmens. Verwenden Sie object-fit: cover nur, wenn die Quelle es verwendet hat, oder für absichtlich dekorative/Hintergrund-/kinematografische Miniaturansichten. Überprüfen Sie nach dem Einfügen dieser Aufnahmen in eine Folie alle vier Kanten auf abgeschnittenen Text, Logos, Steuerelemente oder Bildunterschriften; ein sichtbarer Beschnitt von bedeutungsvollem Inhalt ist ein Fehler, es sei denn, die Quelle selbst hat ihn beschnitten.
• Wenn eine Quellseite benutzerdefinierte Diagramme mit einer Canvas-/WebGL-Rendering-Logik enthält, die für die Lesbarkeit des Decks wesentlich sind (z.B. Linien-, Balken- oder Kreisdiagramme, Aktiencharts, Netzwerkgraphen, Wärmekarten), rekonstruieren Sie diese nicht mit einem generischen Chart-Bibliothekswidget wie Chart.js oder ECharts, es sei denn, der Benutzer bittet explizit um eine Neugestaltung oder den Austausch des Diagramms. Wiederholen Sie stattdessen die genau gleiche Rendering-Logik – denselben Code, dieselbe Bibliothek, dieselbe Konfiguration – wie die Quelle. Verwenden Sie die Medien-Player-Fähigkeiten von HyperFrames (<hf-media> oder data-player="true"), um das Diagramm-<canvas> zu hosten und mit der Deck-Navigation zu synchronisieren.

Split-Edge-Animation

Eine klassische Diashow-Ästhetik, die Sie auf jede Folie anwenden können. Zwei Frames teilen sich eine Achse, die ihre relative Position ändert. Zeigen Sie zuerst Frame A (das dominierende), dann schiebt sich Frame B (die Aufdeckung) hinein. Die Bewegung ist schwergewichtig, gestisch – nicht subtil.

• Typische Verwendung: Eine Auflistung enthüllen – Überschrift links, Kontext rechts einfließen lassen. Oder ein statisches Bild + Text, der sich aufrollt.
• Richtungen: links/rechts (am gebräuchlichsten), hoch/runter.
• Timing: Die Animation läuft über einen fragments-Eintrag, nicht über die Basis-Foliendauer.

Implementieren Sie es mit zwei Track-Gruppen in der Szene. Track A ist sichtbar und fixiert. Track B ist clip: inset(0 X% 0 0) für eine Links-nach-rechts-Aufdeckung – der fragments-Zeitstempel ändert den X-Wert von 100 auf 0 (vollständig eingefahren → vollständig sichtbar).

<!-- Split rechte Seite -->
<div
  data-track data-track-a="true"
  style="clip: inset(0 50% 0 0); background: #111;"
>
  <p>A-Seite (Bild / Überschrift / Kernaussage)</p>
</div>
<div
  data-track data-track-b="true"
  style="clip: inset(0 0 0 50%); transition: clip 0.6s cubic-bezier(0.16, 1, 0.3, 1);"
>
  <p>B-Seite (Kontext / Beweis / Detail – anfangs ausgeblendet)</p>
</div>

Verwenden Sie die Split-Edge-Animation mit Bedacht: Sie ist eine wirkungsvolle Designentscheidung für Decks, die eine Offenlegung oder Enthüllung von Inhalten erfordern. Wenden Sie sie nicht willkürlich auf jede Folie an oder für eine einfache Platzhalternachricht.

---

Fragmente

Ein Fragment ist ein Haltepunkt innerhalb einer Folie, an dem der Presenter-Click die Folie nicht verlässt, sondern ihren Inhalt fortschaltet. Verwenden Sie Fragmente, um Aufzählungspunkte oder Grafiken schrittweise zu zeigen, ohne die Folie zu wechseln. Das Publikum sieht die Folie beim ersten Mal teilweise und bei jedem Fragment-Click mehr.

Fragmente sind nur in Fällen mit mehreren Clips sinnvoll, da jeder Aufzählungspunkt oder jedes Bildelement ein separater Clip mit einem eigenen data-start und data-duration sein sollte. Die Fragment-Zeitstempel steuern, wann diese Clips sichtbar werden.

Um Fragmente zu definieren, fügen Sie ein fragments-Array im SlideRef-Eintrag im JSON-Island hinzu. Jeder Wert ist eine Zeit (Sekunden) innerhalb des [startTime, endTime]-Bereichs der Folie, an der der Präsentator anhalten kann.

{
  "sceneId": "problem",
  "notes": "Beginnen Sie mit dem Schmerz, nicht mit dem Unternehmen.",
  "fragments": [3.5, 5.2, 7.0]
}

Timing-Regeln

• Die Werte des fragments-Arrays müssen streng monoton steigend sein.
• Die Fragment-Zeiten müssen innerhalb des Folienintervalls liegen: startTime < fragment[0] und fragment[last] < endTime.
• Wenn startTime und endTime vom Island aus weggelassen werden, verwendet die Folie die data-start/data-duration der Szene als Standard. Das erste Fragment muss mindestens 0,5 s nach startTime liegen, um dem Publikum den unmittelbaren Kontext zu geben.

Clip-Planung für Fragmente

Wenn eine Szene Fragmente deklariert, planen Sie die Clips wie folgt:

• Clip 1 (Basis-Setup): data-start="[startTime]" data-duration="[Fragment 0] - [startTime]" – zeigt den übergeordneten Kontext, bevor irgendetwas aufgedeckt wird.
• Fragment-Clips (2..N): data-start="[Fragment n-1]" data-duration="[Fragment n] - [Fragment n-1]" – jeder Clip enthält die aufzudeckenden Elemente.
• Abschließendes Fenster: data-start="[letztes Fragment]" data-duration="[endTime] - [letztes Fragment]" – die vollständige Folie (alle aufgedeckten Elemente) für das Restintervall.

---

Verzweigungen

Eine Verzweigung ist eine Sprunganweisung: Ein Hotspot auf der aktuellen Folie (der "Quellfolie") leitet zum ersten Eintrag einer SlideSequence um. Der Zuschauer kann zu diesem Zeitpunkt über eine klickbare Schaltfläche oder einen Bereich den Zweig betreten. Zweige sind nicht Teil der Hauptlinie; wenn der Zuschauer den Zweig betritt, nimmt er einen abweichenden Pfad.

Der Rückweg ist explizit: Der letzte Eintrag der Zweigsequenz enthält entweder eine Rücksprungmarkierung ("return": true) oder einen Hotspot, der zu einer anderen Sequenz oder zur Hauptlinie zurückführt. Ohne Rücksprung ist der Zweig ein Sackgassen-Knoten.

{
  "slideSequences": [{
    "id": "marktdetail",
    "label": "Methodik der Marktgrößenbestimmung",
    "slides": [
      { "sceneId": "mkt-1", "return": true },
      { "sceneId": "mkt-2" }
    ]
  }]
}

Regeln:

• Verzweigen Sie niemals von einer Zweigfolie zurück zur Hauptlinie, es sei denn, die Sequenz hat return: true deklariert.
• Beschränken Sie die Tiefe der Zweige auf eine Ebene. Ein Zweig eines Zweigs ist nicht erlaubt.
• Zweigfolien müssen eine eigene data-composition-id in derselben HTML-Datei haben; sie können nicht aus einer anderen Datei referenziert werden.
• Wenn ein Zweig keinen Rücksprungmarkierung hat, ist er ein terminierender Pfad. Nach der letzten Folie des Zweigs stoppt die Navigation.

---

Sprechernotizen

Jede Folie kann optionale Notizen im Feld "notes" des SlideRef haben. Der Präsentator sieht sie im Präsentatormodus auf dem Sprecherbildschirm oder im Teleprompter-Overlay – das Publikum sieht sie nie. Notizen sind reiner Text ohne Markup.

Notizen erscheinen automatisch im Präsentatormodus, wenn der Presenter-Click die Folie betritt. Der Präsentator kann Notizen während der Präsentation bearbeiten, da der Player über die gemeinsame editierbare-Notizenschnittstelle verfügt. Notizen sind in derselben Sitzung persistent; um sie dauerhaft zu speichern, schreiben Sie sie zurück in das JSON-Island.

---

Validierung und Linting

Wenn die Diashow erstellt ist oder eine vorhandene Seite konvertiert wird, führen Sie den Linter aus:

npx hyperframes lint <project-dir>

Der Linter prüft:

• Absichtsbestätigung – Der Linter stellt sicher, dass die Diashow autorisiert und bestätigt wurde (siehe Bestätigung oben). Wenn nicht, bricht er mit einem Fehler ab.
• Island-Schema – Stellt sicher, dass das JSON-Island das gültige application/hyperframes-slideshow+json-Schema ist.
• sceneId-Auflösung – Stellt sicher, dass jede sceneId im Island einer vorhandenen data-composition-id im HTML entspricht.
• data-composition-id-Eindeutigkeit – Stellt sicher, dass keine zwei Szenen dieselbe data-composition-id haben.
• Fragment-Grenzen – Stellt sicher, dass Fragment-Zeitstempel innerhalb der Folienzeitgrenzen liegen und streng monoton steigend sind.
• Verzweigungsvalidierung – Stellt sicher, dass Zweig-targets gültigen SlideSequence.ids entsprechen, dass die Tiefe auf eine Ebene beschränkt ist und dass entweder ein Rücksprung oder ein Hotspot vorhanden ist, der zur Navigation innerhalb der Zweigfolie führt.
• Schreibregeln – Stellt sicher, dass Überschriften vollständige Sätze sind, dass es eine Idee + eine Grafik pro Folie gibt, dass Marktgrößen von unten nach oben aufgebaut sind und dass Schriftgrößen ≥ 40px sind.

Geben Sie kritische Warnungen an den Benutzer weiter und implementieren Sie die Diashow nicht, bis sie behoben sind.

---

Präsentieren und Übergabe

Sobald die Diashow erstellt und lint-frei ist, präsentieren Sie sie:

hyperframes present <project-dir>

Der Präsentationsbefehl startet einen lokalen Entwicklungsserver (normalerweise Port 3000) und öffnet das Deck im Präsentatormodus. Der Präsentator navigiert mit den Pfeiltasten (←/→), Leertaste oder Klick. Im Präsentatormodus zeigt der Sprecherbildschirm Sprechernotizen, eine Folienminiaturansicht und Steuerelemente.

Übergabe: Wenn das Deck fertig ist, teilen Sie es, indem Sie das Projektverzeichnis archivieren:

tar -czf my-deck.tar.gz <project-dir>

Der Empfänger entpackt und führt hyperframes present aus. Sie können auch hyperframes serve <project-dir> --deploy ausführen, um das Deck auf einer temporären URL zu hosten, die für Präsentationen freigegeben werden kann.

Besondere Anmerkung: Figma-Integration

Wenn die Struktur der Diashow aus einem Figma-Storyboard stammt (ein Streifen von Szenenrahmen in einer Figma-Datei), führen Sie zuerst /figma aus:

/figma # Exportiert Assets, Brand-Tokens und rekonstruiert das Storyboard

Dann bauen Sie die Diashow auf der Grundlage der Ausgabe von /figma. Das Figma-Tool kümmert sich um die SVG-Bereinigung, die .media/manifest.jsonl-Herkunft und die var()-Bindung der Brand-Tokens. Treiben Sie Figma nicht direkt an; die Roh-MCP-Tools umgehen diese Pipeline, sodass spätere Markenänderungen einen vollständigen Neuimport erfordern.

---

Zusammenfassung

Dieser Skill erstellt einen bestimmten Ergebnistyp: ein navigierbares, interaktives HyperFrames-Deck mit auf Folien basierender Navigation, Fragmenten, Verzweigungen und optionalen Sprechernotizen. Die wichtigsten Unterschiede zu einem normalen HyperFrames-Video sind:

Aspekt	Normales Video	Diashow-Deck
Ergebnis	Lineares MP4, gerendert mit hyperframes render	Navigierbares Deck, präsentiert mit hyperframes present
Navigation	Keine – läuft linear ab	Folien-zu-Folien (Hotspots, streng genommen vorwärts, Fragmente, Zweige)
JSON-Island	Nicht vorhanden	Erforderlich: application/hyperframes-slideshow+json
Präsentatormodus	Nicht unterstützt	Eingebaut mit Teleprompter-Notizen, voreingestellten Layouts und Aufnahmekontrollen
Schreibregeln	Keine	Harte inhaltliche und visuelle Regeln (Überschriften, Market Sizing, Schriftgröße)
Quellseiten-Portierung	Nicht unterstützt	Voller Support mit Quelltreue-Prüfungen

Befolgen Sie diesen Vertrag genau. Validieren Sie vor der Übergabe. Bauen Sie kein lineares MP4 aus einer Diashow.