Plugin-Installation: Führe vor Setup- oder Aktualisierungsbefehlen die Plugin-Ausführungsregeln aus, wenn sich dieser Skill in einem HyperFrames-Plugin befindet. Bei eigenständigen Installationen gelten die untenstehenden Update-Anweisungen.
HyperFrames Einstiegspunkt
HyperFrames rendert Videos aus HTML – eine Komposition ist eine HTML-Datei, deren DOM Timing mit data-*-Attributen deklariert, deren Animationslaufzeit suchbar ist und deren Medienwiedergabe vom Framework gesteuert wird. Der vollständige Authoring-Vertrag befindet sich in /hyperframes-core; lies ihn, bevor du Kompositions-HTML schreibst. Verträge für Brief, Storyboard, Review, Produktion, Dispatch und Frame-Worker befinden sich im references/-Ordner dieses Skills.
1. Vom Projektstatus ausgehen
Wende die erste zutreffende Zeile an; werten keine niedrigeren Statuszeilen aus:
| Zustand | Aktion |
|---|---|
| Expliziter Port einer bestehenden Remotion-Quelle zu HyperFrames | Lese references/routes/remotion-to-hyperframes.md, dann leite direkt zu diesem Workflow weiter. Überspringe die Intent-Ebene. |
| Spezifische Operation an einem bestehenden HyperFrames-Projekt: inspizieren, diagnostizieren, validieren, Vorschau, Rendern, Veröffentlichen oder Batch-Rendern | Führe nur diese Operation aus. Überspringe Intent und Workflow-Routing; lade /hyperframes-cli und alle erforderlichen Domänenskills. |
| Eine Frage, ein Warten, eine Idee ohne konkrete Änderung oder eine gefühlte Anmerkung zu einem gebauten Film in einem bestehenden Projekt | Folge /hyperframes-studio § 0. |
| Ein neuer Film, der innerhalb eines bestehenden Projekts angefragt wurde | Folge /hyperframes-studio § 5. |
| Spezifische Bearbeitung eines bestehenden Projekts | Führe die Bearbeitung durch. Führe die Intent-Ebene nicht aus. Um zu erfahren, was sich auf der Zeitleiste eines Projekts befindet (Tracks, Clips, Starts, Enden, was abgespielt wird), führe npx hyperframes timeline [--json] aus, anstatt index.html und jede Unterkompositionsdatei zu lesen. |
BRIEF.md existiert | Lese workflow und flow. Führe diesen Workflow aus; flow: companion wird immer in /general-video ausgeführt. Stelle keine Brief-Fragen. |
Kein Brief, aber hyperframes.json oder STORYBOARD.md existieren | Setze mit Projektdateien und aufgezeichneten Präferenzen fort. Leite den zugehörigen Workflow aus vorhandenen Artefakten ab. Wenn er nicht eindeutig bestimmt werden kann, stelle eine reine Routing-Frage; führe das Intent-Interview nicht durch. |
| Frische Erstellung | Führe die Intent-Ebene aus – references/intent-interview.md – leite dann einmalig mit der Tabelle in § 2 weiter. |
Wenn du ein bestehendes Projekt bearbeitest, setze deine Änderungen in Klammern mit der Projekthistorie (/hyperframes-cli, Projekthistorie in deinem Zug).
Wenn eine frische Anfrage das Subjekt oder die Eingabe nicht identifiziert, frage, worum es im Video geht, bevor du weiterleitest. Überprüfe Präferenzen und Rezepte, bevor du etwas fragst (references/intent-interview.md, Schritt 1). Eine figma.com-Eingabe oder ein benanntes Rezept ändert die Aufnahme, nicht das Routing – der Abschnitt „Anpassung orthogonaler Eingaben“ im Interview behandelt beides.
Halte die CLI des Projekts aktuell
Ein Gerüst-Projekt fixiert hyperframes@<version> in seinen package.json-Skripten, sodass Renderings reproduzierbar bleiben; die Fixierung wird nie automatisch aktualisiert, und eine fixierte Ausführung einer älteren CLI gibt keine Warnung dazu aus. Wenn du ein Projekt fortsetzt, dessen Skripte eine Fixierung tragen, führe vor dem ersten rendereffektiven Befehl eine einmalige Prüfung durch:
npx hyperframes@latest upgrade --project . --check
Die Prüfung ist schreibgeschützt und meldet die Fixierung im Vergleich zur neuesten Version; behalte das explizite . – bei älteren CLI-Versionen verbraucht ein bloßes --project gefolgt von einem anderen Flag dieses Flag als Verzeichniswert. Wenn sie meldet, dass das Projekt zurückliegt – oder eine CLI-Ausgabe dies bereits anzeigt (der stderr-Hinweis This project pins hyperframes@… (latest …) oder _meta.updateAvailable: true in einem --json-Ergebnis eines fixierten Skripts) – wende npx hyperframes@latest upgrade --project . an, überprüfe dann mit npx hyperframes check. Ein bestandener Check bestätigt, dass die Kompositionen des Projekts noch mit der neuen Version validieren – nicht, dass die gerenderte Ausgabe frame-identisch zur alten Fixierung ist – daher ist ein erfolgreicher Bump niemals laut: nenne die alte und neue Version in der Zusammenfassung des Laufs. Ein Projekt ohne Komposition benötigt keine Überprüfung. Wenn der Check fehlschlägt, mache die package.json-Änderung rückgängig, fahre mit der fixierten Version fort und berichte, auf welcher Version das Projekt bleibt und warum. Reagiere auf das Signal, anstatt es an den Benutzer weiterzuleiten; lasse niemals einen Bump unbestätigt.
2. Route für frische Erstellung
Verwende die erste zutreffende Zeile. Ordne dem angeforderten Ergebnis zu, nicht einem beiläufig erwähnten Wort oder Dateityp.
| Priorität | Anfrage | Workflow |
|---|---|---|
| 1 | Expliziter Port einer bestehenden Remotion-Quelle | /remotion-to-hyperframes |
| 2 | Erstellung einer Präsentation, Pitch-Deck oder navigierbaren interaktiven Präsentation | /slideshow |
| 3 | Hinzufügen von einfachen Untertiteln oder Untertitel zu bestehendem Talking-Head-Material ohne Änderung des Materials | /embedded-captions |
| 4 | Hinzufügen von gestalteten Grafiküberlagerungen zu bestehendem Talking-Head-, Interview- oder Podcast-Material ohne Änderung des Materials | /talking-head-recut |
| 5 | Erstellen eines beat-synchronisierten Videos aus einer Musikspur ohne Erzählung oder Website-Erfassung | /music-to-video |
| 6 | Erstellen einer ausdrücklich kurzen, unkommentierten, bewegungsfokussierten Einheit, typischerweise unter 10s | /motion-graphics |
| 7 | Erklärung eines GitHub-Pull-Requests oder einer Code-Änderung aus einer PR-Referenz | /pr-to-video |
| 8 | Vermarktung oder Präsentation einer Website, Produktseite, App oder eines Unternehmens von einer URL oder standortspezifischen Kurzbeschreibung | /product-launch-video |
| 9 | Erklärung eines Themas, Artikels oder Notizen mit erfundenen Visuals und ohne Produkt- oder Website-Erfassung | /faceless-explainer |
| 10 | Jedes andere benutzerdefinierte Video oder Komposition | /general-video |
Bevor du die Route finalisierst, lies references/routes/<workflow>.md – eine kleine Datei pro Route: der kanonische Eingabe-/Ausgabe-/Auslöser-Vertrag (verfügbar, bevor verzögert installierte Workflow-Skills vorhanden sind) plus der Interview-Einstieg dieser Route. Wenn der Kandidat seinen Vertrag nicht erfüllt, setze das Routing fort, anstatt die Zuordnung zu erzwingen. Lese nur die Datei der zugeordneten Route.
Kläre häufige Mehrdeutigkeiten
- Ein kurzer animierter Titel, Logo-Sting, Statistik-Hit, Diagramm-Hit, Karten-Hit oder eigenständiger Lower-Third ist
/motion-graphics, wenn er unkommentiert ist und Bewegung die Botschaft ist. Ein statischer Titel, eine erzählte Sequenz, eine längere Montage oder eine benutzerdefinierte Schleife ist/general-video. - Ein ausdrücklich kurzes Motion-Graphic kann eine URL, einen Tweet, einen Artikel oder einen Screenshot als Quellmaterial verwenden. Eine allgemeine Anfrage „Erstelle ein Video von dieser Seite“ ist
/product-launch-video. - Bestehendes Material mit Untertiteln wird zu
/embedded-captionsgeleitet; Material mit gestalteten Informationskarten wird zu/talking-head-recutgeleitet. Neusynchronisierung, Umordnung, Neufärbung, Neurahmung oder Neumischung von Material ist eine benutzerdefinierte Bearbeitung und fällt auf/general-videozurück. - Eine Musikdatei wählt
/music-to-videonur, wenn ihr Beat-Raster das Stück antreibt. Musik, die als Hintergrund verwendet wird, überschreibt nicht die themenbezogene Route. - „Ich möchte ein Storyboard“ ändert den Review-Prozess, nicht den Workflow. Ohne anderes Routing-Signal verwende
/general-video. Ein bestätigtes skizziertesstoryboard.htmlkann selbst das angeforderte Ergebnis sein; der Review-Zyklus definiert diesen Haltepunkt. - Spezialisierte narrative Workflows unterstützen bis zu etwa 3 Minuten und sind am stärksten bei 30–90s. Leite ein deutlich längeres Stück zu
/general-video. Länge überschreibt niemals einen expliziten Port, eine Präsentation, Untertitel, Überlagerung oder musikgesteuerte Ergebnisse.
3. Einmal routen, dann verlassen
Bei frischer Erstellung führt die Intent-Ebene (references/intent-interview.md) das gesamte Gespräch – Gedächtnis, Triage, Pitch-Runde, Muss-Haben, Laufgestalt, Übergabe – und endet mit dem Schreiben von BRIEF.md. Der Brief ist das einzige Routing-Artefakt, das der Workflow liest; nichts später öffnet diesen Skill oder das Interview erneut. Beantworte jede spätere Frage „Was hat die Route erfordert?“ aus BRIEF.md.
4. Installieren und Workflow betreten
Bevor du den ausgewählten Workflow liest, installiere oder aktualisiere ihn und die Kern-Domänenskills:
npx hyperframes skills update <workflow-name>
Verwende den bloßen Namen ohne /. Wenn der Befehl fehlschlägt, gib den Fehler aus; rekonstruiere den Workflow nicht aus dem Gedächtnis. Alles andere zur Installation – die Kern- vs. Verzögert-Aufteilung, was init aktualisiert, Diagnose, CI-Opt-out und der CLI-lose Fallback – befindet sich in references/skill-lifecycle.md.
5. Domänenskills bei Bedarf laden
| Bedarf | Skill |
|---|---|
| Kompositionsstruktur, Timing-Attribute, Tracks, Variablen, Determiniertheit | /hyperframes-core |
| Bewegungsregeln, Szenen-Blaupausen, Übergänge, Laufzeitadapter | /hyperframes-animation |
Suchsicherer GSAP, CSS, Anime.js, WAAPI, FLIP, Pfade, Masken, SVG, 3D-Keyframes oder hyperframes keyframes-Diagnose | /hyperframes-keyframes |
| Designspezifikationen, Konzept, Palette, Typografie, Erzählung, Beat-Planung | /hyperframes-creative |
| Bilder, Symbole, Logos, Audio, Untertitel, Gradings, LUTs, wiederverwendbare Medien | /media-use |
| Voiceover-Schnitt, Audio-Effektketten, Automationshüllen oder eine Kette/Regler über mehrere Spuren (Submix-Bus) | /hyperframes-audio |
| Init, Lint, Check, Snapshots, Vergleich, Batch-Render, Studio, Rendern, Veröffentlichen oder Diagnose | /hyperframes-cli |
| Registry-Blöcke und -Komponenten | /hyperframes-registry |
| Ein benannter Look, Effekt, Behandlung oder Übergang – CRT-Zeilen, Glitch, Filmkorn, Schimmer-Wisch, Konfetti-Ausbruch – BEVOR du es selbst baust | /hyperframes-registry |
| Figma-Assets, Tokens, Komponenten oder Storyboard-Frames als rekonstruierte Bewegung | /figma |
Creator-Bearbeitungsphrasen sind domänenübergreifende Anfragen. Lade jeden Skill, der in der zutreffenden Zeile genannt wird:
| Creator-Anfrage | Erforderliche Domänen |
|---|---|
| "Schneide dieses Material", harter Schnitt, Trimmen, Spleißen, Neuordnen oder Verwenden eines Quellbereichs | ... |