Slideshow

Achtung, diesen Skill frisch halten — vor dem Ausführen mit dem Benutzer bestätigen: npx hyperframes skills update slideshow. Ein schneller No-Op, wenn alles aktuell ist; andernfalls wird dieser Skill zusammen mit den von ihm abhängigen Kernbereich-Skills aktualisiert, bevor Sie sich auf sie 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 Streifen von Szenenrahmen ist — und bauen Sie dann auf dessen Ausgabe auf. Steuern Sie Figma nicht direkt über rohe MCP-Tools: Dies überspringt die SVG-Bereinigung, die .media/manifest.jsonl-Herkunft und die Brand-Token-var()-Bindung, sodass eine spätere Markenänderung ohne vollständigen Neuimport nicht propagiert werden kann.

Autorenvertrag für Slideshows

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

Lesen Sie zuerst /hyperframes-core für den grundlegenden Kompositionsvertrag (Clips, Spuren, data-*-Attribute, Determinismus-Regeln). Dieser Skill behandelt nur das Neue: das Insel-Schema, die Regeln zum Schreiben von Folien, Fragmente, Verzweigungen, Validierung und die umschließende Komponente.

Ausgabe — ein navigierbares Deck, kein lineares MP4

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

Führen Sie kein hyperframes render für eine Slideshow durch, um ein einzelnes MP4 zu erhalten. Ein Deck wird als mehrere übergeordnete Szenenkompositionen (eine data-composition-id pro Folie) ohne Master-Root-Komposition, die sie umschließt, erstellt, daher löst render nur die erste Komposition auf und gibt ein stillschweigend abgeschnittenes MP4 aus (z. B. 6s eines 40-Sekunden-Decks). Ein linearer Hauptlinien-Export (nur Hauptfolien, ohne Verzweigungssequenzen) ist zurückgestellt — bis er ausgeliefert ist, sind die unterstützten Ausgaben das Live-present-Deck und pro-Folie snapshot-Standbilder. Wenn ein Benutzer heute ein lineares MP4 benötigt, machen Sie diese Einschränkung deutlich, anstatt render auf das Deck zu verweisen.

Absichtsbestätigung

Wenn der Benutzer explizit nach einer Slideshow, Dia-Show oder HyperFrames-Slideshow fragt, fahren Sie mit diesem Skill fort. Wenn die Anfrage über /hyperframes kam, ist die Absichtserkennung für diese Bestätigung zuständig — wenn sie hierher geleitet wurde, ist sie bereits bestätigt, fragen Sie also nicht erneut; die Fragen zur Ausführungsform der Ebene sind nicht anwendbar (das Ergebnis ist ein Deck, kein gerendertes Video). Eine BRIEF.md, falls vorhanden, enthält die bestätigte Absicht — lesen Sie sie.

Wenn der Skill von einer angrenzenden Anfrage wie "Präsentation", "Pitch-Deck", "Deck", "interaktives Deck" oder "diese Seite konvertieren" ausgelöst wurde, halten Sie vor dem Erstellen inne und formulieren Sie die Wahl, bevor Sie um Bestätigung bitten. Erklären Sie kurz, dass eine HyperFrames-Slideshow ein ausführbares Deck mit diskreten Folien, integrierter Navigation und Präsentatormodus, bearbeitbaren Sprechernotizen, gemeinsam genutzter Medienverwaltung und Validierung vor der Übergabe bedeutet. Erwähnen Sie bei Quellseiten-Konvertierungen auch, dass das Ziel darin besteht, das visuelle Design, die Interaktionen, die Bewegung und das Medienverhalten der Originalseite 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-Slideshow?

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

Setzen Sie die Slideshow erst um, wenn der Benutzer mit Ja antwortet. Wenn er Nein sagt, hören Sie auf, diesen Skill zu verwenden — lesen Sie /hyperframes und lassen Sie die Absichtserkennung neu leiten. Diese Bestätigung ist eine Routing-Entscheidung, kein Präferenz-Tor — gemäß ../hyperframes/references/brief-contract.md § 1 gilt sie auch im autonomen Modus („Überrasche mich" überspringt sie nicht): Das Erstellen des falschen Ergebnistyps ist ein Qualitätsfehler, kein kreativer Aufruf.

---

Die beiden Teile

1. Szenen — auf normale Weise deklariert

Jede Folie basiert auf einer Szene. 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 hier hin -->
</div>

Verzweigungsfolien (nur über einen Hotspot erreichbar, nicht in der Hauptlinie enthalten) werden genau gleich deklariert — sie erscheinen nur in einem slideSequences-Eintrag in der Insel, nicht im Haupt-slides-Array.

2. Die JSON-Insel — ein Skriptblock pro Komposition

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

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

Die Insel ist die einzige Quelle der Wahrheit für Folienreihenfolge, Notizen, Fragment-Haltepunkt, Hotspots und Verzweigungssequenzen. Platzieren Sie sie nahe des Anfangs des <body>, vor den Szenen-Divs, damit sie leicht zu finden ist.

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

---

Schema

SlideshowManifest (das Insel-Objekt der obersten Ebene)

{
  "slides": [
    /* SlideRef[] — die Hauptlinie, in Reihenfolge */
  ],
  "slideSequences": [
    /* SlideSequence[] — Nebenlinien-Verzweigungssequenzen */
  ]
}

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 einem data-composition-id einer Szene übereinstimmen (oder explizite startTime/endTime angeben). Die Lint-Regel löst Szenen über data-composition-id auf.
notes	nein	Nur für den Präsentator. Dem Publikum niemals gezeigt.
fragments	nein	Array von Zeiten (Sekunden) innerhalb des [start, end]-Bereichs der Folie — siehe Fragmente unten.
hotspots	nein	Interaktive Overlays, die eine Verzweigung auslösen — siehe Verzweigungen unten.
startTime	nein	Optional. Überschreibt die Zeitgrenzen der übereinstimmenden Szene; standardmäßig Start/Ende der Szene.
endTime	nein	Optional. Überschreibt die Zeitgrenzen der übereinstimmenden Szene; standardmäßig Start/Ende der Szene.
ttsScript, ttsAudioUrl, ttsDurationMs	nein	Reserviert. Schemafelder existieren, aber die TTS-Wiedergabe ist noch nicht angeschlossen. Weglassen, es sei denn, Sie füllen sie für einen zukünftigen Build vor.

SlideHotspot

{
  "id": "h1",
  "label": "Wie haben wir das berechnet?",
  "target": "markt-tiefgang",
  "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": "markt-tiefgang",
  "label": "Methodik der Marktgrößenbestimmung",
  "slides": [{ "sceneId": "mkt-1" }, { "sceneId": "mkt-2" }]
}

slides innerhalb einer Sequenz verwendet dieselbe SlideRef-Form 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 dagegen verstößt, wird bei der Durchsicht durch einen Reviewer direkt ersetzt.

• Die Überschrift ist eine Behauptung in einem vollständigen Satz, kein Label. Schreiben Sie "KMU verbringen 14 Stunden/Woche mit manueller Terminplanung", nicht "Planungsproblem". Der Satz sollte auch ohne das visuelle Element für sich allein stehen können.
• Eine Idee + ein visuelles Element pro Folie. Wenn Sie versucht sind, eine zweite Aufzählungsgruppe 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.
• Nur Bottom-up-Marktsizing. Schreiben Sie niemals "$50B TAM", ohne die Mathematik zu zeigen. Bauen Sie von den Stückzahlen auf: Konten × ACV oder Transaktionen × Take-Rate.
• Schriftart mindestens 30pt Äquivalent. Bei 1920×1080 ist eine Überschrift 72–96px; der Fließtext ist 48px. Gehen Sie niemals unter 40px für Text, den das Publikum lesen muss.
• Durchsuchen Sie den Live-Katalog, bevor Sie manuell benannte visuelle Elemente erstellen. Für jedes Aussehen, jeden Effekt, jedes Diagramm, jede Behandlung oder jeden Übergang, den eine Folie benötigt — "CRT-Scanlines", "Glitch", "Balkendiagramm-Rennen", "Schimmer-Sweep", "Terminalfenster" — führen Sie npx hyperframes catalog --query "<das visuelle Element, auf Deutsch>" --json aus und lesen Sie die besten Ergebnisse, bevor Sie die Clips der Folie erstellen. Die Suche benötigt nichts Installiertes: kein Projekt, kein vorheriges add, kein Konto. Sie durchsucht das gesamte gehostete Register (~400 Blöcke und Komponenten) von jedem Verzeichnis aus. npx hyperframes add <name> legt den Quellcode des Blocks im Deck ab, wo Sie ihn direkt anpassen können. Dies gilt mit besonderer Strenge beim Portieren einer Quellseite: Ein echter Block ist besser als die vereinfachte Annäherung, die die untenstehenden Portierungsregeln verbieten.

Portieren von Quellseiten

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

• Bewahren Sie das visuelle Design, die Bewegungssprache, das interaktive Verhalten, das Medienverhalten und die Präsentationsmöglichkeiten der Originalseite so genau wie möglich. Wenn das Slideshow-System einen Präsentatormodus unterstützt, fügen Sie Sprechernotizen unter Verwendung des gemeinsam bearbeitbaren Notizverhaltens ein, anstatt einer Deckspezifischen Implementierung.
• Portieren Sie mechanische visuelle Elemente aus dem Quell-DOM/CSS/JS so genau wie praktikabel: benutzerdefinierte Player, Canvas-Visualisierer, Timelines, Abspielköpfe, Stems, expandierende Kreise, Hover-Zustände und andere interaktive Details sollten die Konvertierung überstehen.
• Behandeln Sie native <video>-/<audio>-Elemente als Quelle der Wahrheit für jede benutzerdefinierte Medienchrom, Canvas-Visualisierer, Wellenform, Beat-Grid oder Abspielkopf. 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 abweichen kann.
• Jedes kopierte <video> oder <audio> mit src muss vor der Lint-Prüfung HyperFrames-Timing-Attribute haben: data-start und data-duration, plus data-has-audio="true", wenn hörbares natives Audio erhalten werden 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 Deck-weiten Bereich. Lassen Sie preload="none" nicht auf Medien; verwenden Sie metadata oder auto.
• Lösen Sie Schriftart-Token der Quelle vor der Validierung auf. Wenn Sie benutzerdefinierte Schriftarten der Quelle beibehalten, fügen Sie @font-face-Regeln für lokale/erfasste Schriftartdateien hinzu. Wenn Sie System-Fallbacks verwenden, ersetzen Sie tokenisierte Deklarationen wie font-family: var(--f-body) durch konkrete, render-sichere 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, Rad, Berührung, Hash-Zustand, Größenänderung oder eine requestAnimationFrame-Schleife gesteuert wird. Behandeln Sie feste Ansichtsfenster mit übersetzten/skalierten "Welt"-Ebenen, Parallaxe, fixierten Panels, horizontalen Scrollern, scroll-gescrubbten Timelines, Abschnitts-Einrasten und Zoom-zu-Element-Kameras als Quellverhalten. Scrollen ist oft der Übergangsauslöser der Quelle, also bewahren Sie den Übergang, indem Sie seine Fortschrittsstopps, Easing und Kamera-/Fokus-Zustände extrahieren und diese Bewegung dann auf der Slideshow-Navigation durch Timeline-Positionen, Fragmente oder einen wiederverwendbaren Player/Harness-Hook neu hosten. Eigenständige Wrapper, die zu Folien-Haltepunkten springen, benötigen dennoch einen expliziten Navigations-Kamera-Übergangs-Hook; die Berechnung von Kameratransformationen pro Folie reicht nicht. Simulieren Sie keinen buchstäblichen Seiten-Scrollen-nach-unten-Übergang innerhalb der Folie; der Betrachter sollte eine Kamerafahrt/einen Zoom von einem Fokuspunkt zum anderen spüren, nicht eine gescrollte Webseite sehen. Halten Sie jede Kamerabewegung von Folie zu Folie kontinuierlich: Vermeiden Sie Zwischen-Routen-Stopps, die die x/y-Richtung umkehren oder den Zoom zurücknehmen.

...