HyperFrames – zuerst lesen
Beginnen Sie hier für jede HyperFrames-Aufgabe – besonders wenn kein Projekt-Agentenkonfiguration (CLAUDE.md / AGENTS.md / .cursorrules) vorhanden ist. Nachfolgend finden Sie eine Fähigkeitsübersicht und einen Video-Router.
Fähigkeitsübersicht – welches Skill für welche Absicht
| Sie möchten… | Verwenden Sie |
|---|---|
| Ein Video erstellen (aus einer URL, einer Kurzbeschreibung, einem Thema, einem GitHub-PR, vorhandenem Filmmaterial oder einem einzelnen zu animierenden Element) | den Video-Router unten (§ Video-Routing) |
| Eine Diashow / Präsentation / Pitch-Deck erstellen – diskrete Folien, Fragmente, Verzweigungen, Hotspots | /slideshow |
Eine HTML-Komposition erstellen / bearbeiten – den data-*-Vertrag, Clips, Spuren, Unterkompositionen, Variablen | /hyperframes-core |
| Animieren – atomare Bewegungsregeln, Szenen-Blaupausen, Übergänge, Laufzeit-Adapter (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU) | /hyperframes-animation |
Kreative Leitung – design.md, Paletten, Typografie, Erzählung, Taktplanung, audio-reaktiv | /hyperframes-creative |
| Medienvorverarbeitung – TTS-Sprachausgabe, Hintergrundmusik, Transkription, Hintergrundentfernung, Untertitel | /hyperframes-media |
| CLI-Entwicklungszyklus – init, lint, validate, inspect, preview, render, publish, doctor | /hyperframes-cli |
Registry-Blöcke / Komponenten installieren (hyperframes add) | /hyperframes-registry |
Der Kompositions-Authoring-Vertrag (jedes zeitgesteuerte Element benötigt
data-start/data-duration/data-track-index; zeitgesteuerte Elemente benötigenclass="clip"; GSAP-Zeitachsen werden pausiert und unterwindow.__timelinesregistriert; nur deterministische Logik – keinDate.now()/Math.random()/ Netzwerk) ist hier nicht wiederholt – er befindet sich in/hyperframes-core. Lesen Sie diesen, bevor Sie Kompositions-HTML schreiben.
Was HyperFrames NICHT kann – dies zuerst prüfen
HyperFrames erstellt eine HTML-Komposition und rendert sie aus Code in MP4. Dieses Modell hat harte äußere Grenzen. Eine Anfrage, die eine dieser Grenzen überschreitet, ist keine Routing-Entscheidung – sie ist nicht im Rahmen, also lehnen Sie ab (oder verweisen Sie auf das richtige Werkzeug), anstatt einen Workflow zu wählen. Diese Einschränkungen ergeben sich aus der Architektur, nicht aus einer einzelnen Anfrage:
- Der Render ist deterministisch und in sich geschlossen. Jeder Wert, jedes Asset und jeder Text wird beim Authoring eingebacken; der Render führt keinen Netzwerkaufruf und keinen Live-Datenabruf zur Renderzeit durch (Kernregel: kein
Date.now()/Math.random()/ Netzwerk). „Zahlen zur Renderzeit live aktualisieren“ ist nicht möglich – holen Sie die Daten einmal zur Authoring-Zeit ab und backen Sie sie ein, oder lehnen Sie ab. - Vorhandenes Video wird überlagert, niemals bearbeitet. HyperFrames erstellt Frames über einem Quellclip –
/embedded-captionsfügt eine Untertitel-Ebene hinzu,/graphic-overlaysfügt gestaltete Grafikkarten hinzu (untere Drittel, Datenaufrufe, Titel) – und der Clip läuft unverändert darunter, aber keines von beiden verarbeitet den codierten Videostream nachträglich. Die Bearbeitung des Filmmaterials selbst (seine Zeitsteuerung, Farbe, Bildausschnitt, Reihenfolge oder Audio) ist NLE-ähnliche Bearbeitung und nicht im Rahmen. - Remotion-Import ist unidirektional.
/remotion-to-hyperframesübersetzt die Remotion-Framework-Quelle in HyperFrames. Es gibt keine umgekehrte Richtung (HyperFrames → Remotion, oder → ein anderes Framework – nicht im Rahmen), und eine Nicht-Remotion-React-/Web-Animation-Quelle hat keine Remotion-Quelle zum Übersetzen – erstellen Sie sie mit/general-videoneu. - Es kann keine Eingaben erzeugen, die es nicht hat. Keine Bildschirmaufnahme / Sitzungsaufzeichnung, keine Kameraaufnahme, keine KI-Sprechkopf / Lippen-synchrone Avatargenerierung. Wenn das Filmmaterial oder Asset noch nicht existiert, kann HyperFrames es nicht herbeizaubern – bitten Sie den Benutzer, es bereitzustellen (oder verwenden Sie das richtige Aufnahmewerkzeug) zuerst.
Alles andere – ein Video aus einer URL, einer Kurzbeschreibung, einem Thema, PR, Filmmaterial zum Kommentieren oder einem einzelnen zu animierenden Element – ist im Rahmen; routen Sie es unten.
Video-Routing
Dieser Abschnitt kennt NUR Workflows der obersten Ebene. Er lädt keine workflow-internen Phasen, Domänen-Skills (hyperframes-* – siehe die Fähigkeitsübersicht oben) oder technische Referenzen.
Entscheidungstabelle
INPUT-Typ (Absicht) ist die primäre Achse; OUTPUT-Länge ist nur eine Obergrenze, kein Tor. Für eine passende Eingabe verarbeiten die spezialisierten Workflows alles bis zu ~3 Min. – welcher Workflow betreten wird, wird durch die Absicht (den Eingabetyp und bei Text das Thema) entschieden, nicht durch die Länge. Die Länge ist nur am oberen Ende relevant: Ein wirklich langes Stück (ein 3-5-minütiges Tutorial, eine 5-minütige+ vertiefende Analyse) ist eine andere Kategorie und wird zu /general-video geroutet. Innerhalb des ≤~3-Min.-Bandes teilt eine dritte Achse die beiden textgespeisten Workflows – das Thema: ein Produkt, das vermarktet wird vs. ein Thema, das erklärt wird (siehe die Disambiguierungsregel in Schritt 3 unten).
| Länge / Eingabe | Produkteinführung (URL / Kurzbeschreibung / Drehbuch) | Allgemeine Website / URL | GitHub-PR / Code-Änderung | Thema / Artikel / Notizen (kein Produkt, keine URL) | Vorhandenes Video (Sprecher) † |
|---|---|---|---|---|---|
| ≤ ~3 Min. | /product-launch-video | /website-to-video | /pr-to-video | /faceless-explainer | /embedded-captions · /graphic-overlays † |
| 3-5 Min. Tutorial | /general-video | /general-video | /general-video | /general-video | /embedded-captions · /graphic-overlays † |
| 5 Min.+ vertiefend | /general-video | /general-video | /general-video | /general-video | /embedded-captions · /graphic-overlays † |
| Statisch / Schleife | /general-video | /general-video | /general-video | /general-video | /general-video |
Abdeckung heute: Der ≤ ~3 Min. Band hat dedizierte Workflows für Produkteinführungs- / allgemeine-Website- / GitHub-PR- / Themen- Eingaben (eine URL wird nach Art dann Absicht aufgeteilt – siehe Schritt 3), und die vorhandenes Video Spalte ist bei jeder Länge abgedeckt – durch /embedded-captions (Untertitel) oder /graphic-overlays (gestaltete Grafik-Overlays), aufgeteilt nach Absicht (siehe Schritt 2). Jede andere Zelle ist /general-video – der allgemeine HTML-Kompositions-Authoring-Flow (eingabe- und längenunabhängig): alles länger als ~3 Min. (die 3-5 Min. / 5 Min.+ Zeilen) und jedes statische / Schleifen-Format. Der Router endet nie in einer Sackgasse für ein erstellbares Video; die einzige echte „allgemein / keine“ Antwort ist eine Anfrage außerhalb von HyperFrames selbst (z.B. NLE-ähnliche Bearbeitung einer fertigen Videodatei – Neubearbeitung der Zeitsteuerung, Neufärbung, Neubildausschnitt, Neuordnung, Audio).
† Vorhandenes Filmmaterial wird nach Absicht aufgeteilt, nicht nach Länge. Untertitel → /embedded-captions; gestaltete Grafik-Overlays / Verpackung – untere Drittel, Datenaufrufe, Titelkarten, Zitate – → /graphic-overlays. Beide überlagern den Clip, der unverändert darunter läuft; keines bearbeitet das Filmmaterial selbst.
Genre-Shortcut (tritt vor der Tabelle auf). Ein kurzer (~unter 10s), unerzählter, design-orientierter Bewegungsgrafik – kinetischer Text, ein Statistik-/Diagramm-Hit, ein Logo-Sting, ein unteres Drittel / Overlay oder ein animierter Tweet / Schlagzeile / Screenshot-Highlight – wird zu /motion-graphics geroutet, unabhängig von der Eingabe. Es ist ein AUSGABE-Genre, kein Eingabe-Typ, daher hat es Vorrang vor der obenstehenden Eingabe-Typ-Tabelle, wenn die Anfrage eindeutig bewegungsorientiert ohne Erzählung ist (siehe Schritt 2). Eine längere oder erzählte Behandlung wird nach Eingabe-Typ oder /general-video geroutet.
Migrieren einer bestehenden Komposition (Sonderfall)
Die obige Tabelle dient zum Erstellen eines Videos aus einer Eingabe. Ein Workflow liegt außerhalb davon: Wenn der Benutzer ausdrücklich verlangt, eine bestehende Remotion (React) Komposition nach HyperFrames zu portieren / konvertieren / migrieren → /remotion-to-hyperframes. Dies ist Quellübersetzung, keine Erstellung aus Eingabe, daher hat es keine EINGABE × LÄNGE Zelle. Routen Sie hier NUR bei expliziter Migrationssprache („portiere mein Remotion-Projekt“, „konvertiere diese Remotion-Komposition“, „schreibe dies als HyperFrames um“) – eine beiläufige Erwähnung von Remotion ist kein Auslöser; standardmäßig zur Erstellungstabelle oder /hyperframes-core.
Routing-Verfahren
- Bestimme INPUT-Typ + Ziellänge. Das Routing muss wissen, worum es in dem Video geht – sein Thema und seine Eingabe. Wenn das Thema selbst nicht angegeben ist (z. B. „mach ein Video über unser Ding“ ohne URL, benanntes Produkt, Thema oder Asset, mit dem gearbeitet werden kann), oder der Eingabe-Typ unbekannt ist, fragen Sie, bevor Sie einen Workflow betreten – klären Sie zuerst; rufen Sie kein Workflow-Skill auf und fragen Sie dann, da das Festlegen auf einen Workflow selbst die Routing-Entscheidung ist. Stellen Sie höchstens 2 klärende Fragen:
- „Was ist Ihre Eingabe – ein Produkt (URL oder Kurzbeschreibung), eine allgemeine Website / URL, ein GitHub-PR / eine Code-Änderung, ein zu erklärendes Thema oder ein Artikel, oder ein vorhandenes Sprechervideo zum Untertiteln?“
- „Ziellänge – etwa 3 Minuten oder weniger, oder länger (ein 3-5 Min. Tutorial / 5 Min.+ vertiefende Analyse)?“
- Spezifikations-Standardwerte – nennen Sie sie, fragen Sie nicht (diese beeinflussen NICHT die Route, daher blockieren Sie niemals das Routing damit): Seitenverhältnis 16:9 (die Engine unterstützt auch 9:16 vertikal – wechseln Sie nur, wenn der Benutzer ein vertikales Ziel wie TikTok / Reels / Shorts nennt); Erzählung / Untertitel Sprache = die des Benutzers. Bestätigen Sie nur, wenn der Benutzer widerspricht; der gewählte Workflow bestätigt seine eigenen Spezifikationen in Schritt 0.
- Wählen Sie zuerst nach INPUT-Typ (Absicht); Länge ist nur eine Obergrenze, kein Tor.
- Kurze design-orientierte Bewegungsgrafik (Genre-Shortcut, tritt vor der Eingabetabelle auf) – die Bewegung selbst ist die Botschaft: kinetischer Text, ein Statistik-/Zahlenhochzähler, ein Diagramm-Hit, ein Logo-Sting, ein unteres Drittel / Overlay oder ein animierter Tweet / Schlagzeile / Screenshot-Highlight; typischerweise unter ~10s, keine Erzählung / Sprachausgabe →
/motion-graphics. Dies ist ein AUSGABE-Genre, kein Eingabe-Typ – wenn die Anfrage eindeutig ein schnelles, unerzähltes, design-orientiertes Bewegungsstück ist, routen Sie hier unabhängig von der Eingabe. Eine längere oder erzählte Behandlung desselben Materials ist NICHT dies (nach Eingabe-Typ routen, oder/general-video). - Vorhandenes Sprechervideo (der Benutzer hat einen Clip und möchte etwas darüberlegen) → nach Absicht aufgeteilt, bei jeder Länge (Eingabe-Typ gewinnt über Länge): Untertitel (die gesprochenen Wörter als lesbarer Text) →
/embedded-captions; gestaltete Grafik-Overlays – untere Drittel, Datenaufrufe, titelgebende Info-Karten, Zitate, eine grafisch verpackte Bearbeitung – →/graphic-overlays. (Das Filmmaterial selbst bearbeiten – Neubearbeitung der Zeitsteuerung, Neufärbung, Neubildausschnitt, Neuordnung, Audio – ist NLE-ähnlich und außerhalb des Rahmens; siehe § Was HyperFrames nicht kann.) - GitHub-PR / Code-Änderung (ein
github.com/<owner>/<repo>/pull/<N>Link, einowner/repo#NVerweis oder „dieser PR“) →/pr-to-video(bis zu ~3 Min.). - Andernfalls (Produkt-URL / Kurzbeschreibung / Thema-Text): Absicht wählt den Workflow über Schritt 3, und er verarbeitet alles bis zu ~3 Min. – eine kurze 15-30 s Werbung und eine ~100 s Erklärung werden beide durch Absicht geroutet, nicht durch Länge. Routen Sie zu
/general-video(den längenunabhängigen Fallback – siehe Schritt 4) nur, wenn das Ziel eindeutig länger als ~3 Min. ist (ein 3-5 Min. Tutorial, eine 5 Min.+ vertiefende Analyse). Erzwingen Sie niemals ein wirklich langes Stück in einem ≤~3 Min. Workflow – die Absicht entscheidet innerhalb des Bandes,/general-videodeckt den Rest ab.
- Kurze design-orientierte Bewegungsgrafik (Genre-Shortcut, tritt vor der Eingabetabelle auf) – die Bewegung selbst ist die Botschaft: kinetischer Text, ein Statistik-/Zahlenhochzähler, ein Diagramm-Hit, ein Logo-Sting, ein unteres Drittel / Overlay oder ein animierter Tweet / Schlagzeile / Screenshot-Highlight; typischerweise unter ~10s, keine Erzählung / Sprachausgabe →
- Disambiguieren Sie die ≤~3 Min. URL / Texteingaben (die Absichtsaufteilung). Zwei Aufteilungen:
- URL-Art + Absicht – eine URL gewinnt nicht mehr automatisch für PLV; ihre Art dann Absicht entscheidet: ein GitHub-PR-Link (
.../pull/<N>,owner/repo#N, „dieser PR“) →/pr-to-video; andernfalls wird eine Website-URL nach Absicht aufgeteilt – Vermarktung / Einführung / Förderung eines bestimmten Produkts oder SaaS →/product-launch-video; eine allgemeine Seite → Video (Site-Tour, Portfolio / Blog / Landing-Page-Showcase, ein Social-Clip aus den eigenen visuellen Elementen der Seite oder einfach „mach diese Seite zu einem Video“) →/website-to-video. Beide crawlen mit Headless Chrome; PR-URLs werden überghgelesen. Wenn es wirklich unklar ist, ob eine Site-URL eine Produkteinführung oder ein allgemeines Seitenvideo ist, stellen Sie eine Frage. - Produkt vs. Thema (Text, keine URL) – die entscheidende Frage ist, worum es in dem Video geht, nicht das Eingabeformat:
- Ein bestimmtes Produkt / Unternehmen / SaaS / App / Website, das vermarktet, eingeführt oder beworben wird →
/product-launch-video. - Ein Konzept / Thema / Artikel / Wie-etwas-funktioniert, das erklärt wird, mit keinem Produkt und keiner URL →
/faceless-explainer. - Tie-Breaker: „Bewerben / Einführen / Verkaufen / Unser Produkt“ Formulierung → PLV. „Erklären / Lehren / Wie X funktioniert / Was ist X“ ohne Produkt → faceless. Der gelieferte Stil für faceless ist immer
pin-and-paper. - Eine benannte Site ohne eingefügte URL ist immer noch PLV. Ein Skript, das ein Produkt oder seine Website erwähnt („unsere Seite ist acme.io“, „bewerbe “) wird zu PLV geroutet, selbst ohne anklickbaren Link – PLV kann die Site im Web durchsuchen und nach Markenassets crawlen (es sei denn, der Benutzer lehnt ab, → No-Capture-Voreinstellungsmodus). Das Nichteinfügen der URL macht es nicht zu einem faceless / No-Capture-Job. Die wörtliche-vs.-Umstrukturierung-Wahl für ein geliefertes Drehbuch ist intern für PLV und ändert niemals die Route.
- Widersprüchliche Hinweise → fragen Sie, raten Sie nicht. Wenn die gelieferte Quelle das eigene Marketing eines Produkts ist (seine Landing Page, eine Werbeaktion ...)
- Ein bestimmtes Produkt / Unternehmen / SaaS / App / Website, das vermarktet, eingeführt oder beworben wird →
- URL-Art + Absicht – eine URL gewinnt nicht mehr automatisch für PLV; ihre Art dann Absicht entscheidet: ein GitHub-PR-Link (
... (truncated)
Hinweis: Der vollständige SKILL.md-Text wurde aufgrund der Zeichenbegrenzung in dieser Antwort gekürzt. Die Übersetzung der vollständigen Struktur und des Inhalts wurde für den bereitgestellten Ausschnitt durchgeführt.