HyperFrames – Start hier
Dieser Skill ist ein lokaler Router für das HyperFrames HTML-basierte Video-Framework,
gespiegelt von heygen-com/hyperframes.
Die gespiegelten Domain-Skills leben als Unterverzeichnisse dieses Ordners und werden
auf Abruf geladen. Basierend auf der Benutzerabsicht lies die entsprechende Sub-Skill
SKILL.md vor der Ausführung.
Die maßgeblichen Agenten-Guides des Upstreams liegen neben diesem Router als
UPSTREAM-CLAUDE.md (vollständiger Skill-Katalog, Installation, Wartung) und
UPSTREAM-AGENTS.md (Workflow-Liste) – konsultiere sie für die kanonischen Upstream-
Skill-Beschreibungen und den npx skills add / npx hyperframes Workflow.
HyperFrames rendert Video aus HTML – eine Komposition ist eine HTML-Datei, deren
DOM die Zeitsteuerung mit data-* Attributen deklariert, deren Animationslaufzeit
suchbar ist und deren Medienwiedergabe vom Framework verwaltet wird. Der vollständige
Authoring-Vertrag befindet sich in hyperframes-core/; lies ihn, bevor du Kompositions-
HTML schreibst.
Sub-Skill Index
| Sub-Skill | Verzeichnis | Verwende, wenn … |
|---|---|---|
| Composition Contract | hyperframes-core/ | Erstellen/Bearbeiten einer HTML-Komposition – data-* Timing, Clips, Tracks, Sub-Kompositionen, Variablen. Vor dem Schreiben von Kompositions-HTML lesen. |
| CLI Dev Loop | hyperframes-cli/ | Ausführen von npx hyperframes init, add, lint, check, snapshot, preview, render, publish, doctor, cloud/lambda Rendering oder Fehlerbehebung der Build-/Render-Umgebung. |
| Animation | hyperframes-animation/ | Atomare Bewegungsregeln, multi-phasige Szenen-Blueprints, Szenenübergänge, Motion-Design-Techniken und die Laufzeitadapter (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU). |
| Keyframes | hyperframes-keyframes/ | Suchbare 2D/3D Keyframes, GSAP Timelines, CSS Keyframes, Anime.js, WAAPI, FLIP, Pfade, Masken, SVG Morph/Draw, Text, 3D Tiefe, plus hyperframes keyframes Diagnostik. |
| Creative Direction | hyperframes-creative/ | Nicht-Animations-Creative-Direction: frame.md/design.md, Paletten, Typografie, Erzählung, Beat-Planung, audio-reaktiv. |
| Medien | media-use/ | Auflösen/Generieren von BGM, SFX, Bild, Icon, Markenlogo, Stimme, Farbkorrektur, LUT; TTS Voiceover, Transkription, Hintergrundentfernung, Untertitel; projektübergreifende Wiederverwendung. |
| Registry Blöcke | hyperframes-registry/ | Installieren und Verkabeln von Registry-Blöcken/-Komponenten (hyperframes add). |
| Figma Import | figma/ | Importieren von Figma-Inhalten – Assets, Tokens, Komponenten, Storyboards → rekonstruierte Bewegung. |
Workflows (End-to-End Liefergegenstände)
| Workflow | Verzeichnis | Verwende, wenn … |
|---|---|---|
| Allgemeines Video | general-video/ | Fallback-Workflow zum Erstellen/Bearbeiten einer beliebigen benutzerdefinierten Komposition jeder Länge/Format – längere/multi-szenische Stücke, Marken- und Sizzle-Reels. |
| Motion Graphics | motion-graphics/ | Kurze, designgetriebene Motion Graphic, bei der Bewegung DIE Botschaft ist – kinetische Typografie, Statistiken-Count-Up, Chart/Daten-Viz-Hit, Logo-Sting, Lower-Third. |
| Slideshow / Deck | slideshow/ | Präsentation, Pitch-Deck oder interaktives Deck mit diskreten Folien, Fragment-Enthüllungen, Verzweigungen, Hotspot-Navigation. |
| Produktstart | product-launch-video/ | Verwandeln einer Produkt-/Marketing-URL, eines eingefügten Skripts oder eines Briefings in ein Produktstart-/Promo-Video. |
| PR zu Video | pr-to-video/ | Verwandeln eines GitHub PR (URL, owner/repo#N oder „dieser PR“) in ein Code-Änderungs-Erklärvideo. |
| Musik zu Video | music-to-video/ | Verwandeln eines Musikstücks in ein beat-synchronisiertes Video – Lyric-Video, Slideshow oder kinetische Visualisierung. |
| Gesichtsloser Erklärer | faceless-explainer/ | Verwandeln eines beliebigen Textes (Artikel, Notizen, Thema, Briefing) in ein gesichtsloses Erklärvideo mit erfundenen Visuals. |
| Eingebettete Untertitel | embedded-captions/ | Hinzufügen gestalteter Untertitel zu einem Talking-Head-Video – visuelle Identitäten hinter Column-Flow-/Embedded-Engines. |
| Talking-Head Neuschnitt | talking-head-recut/ | Verpacken eines bestehenden Talking-Head/Interview/Podcast-Videos mit zeitgesteuerten Grafik-Overlay-Karten – Titel, Lower-Thirds, Daten-Callouts, Zitate. |
| Remotion Port | remotion-to-hyperframes/ | Portieren einer bestehenden Remotion (React)-Komposition zu HyperFrames HTML. NUR bei expliziter Anfrage zum Portieren/Konvertieren/Migrieren einer Remotion-Quelle verwenden. |
Routing-Regeln
- Für jede Anfrage „Erstelle mir ein Video / eine Animation / eine Motion Graphic“ wähle einen
Workflow aus der zweiten Tabelle oben. Wenn keiner passt, falle auf
general-videozurück. - Der gewählte Workflow zieht Domain-Skills (erste Tabelle) während der Ausführung hinzu – sie übernehmen niemals selbst die End-to-End-Aufgabe.
- Authoring-Vertrag zuerst: Vor dem Schreiben von Kompositions-HTML lies
hyperframes-core/. - Alles läuft über
npx hyperframes, es sei denn, Projektanweisungen geben einen lokalen Wrapper vor – befolge den lokalen Wrapper genau. Erfordert Node.js >= 22 und FFmpeg.
Synchronisation
Diese Skills werden vom Upstream gespiegelt. Um nach Updates zu suchen oder diese zu ziehen:
bash hyperframes/scripts/sync-hyperframes.sh --check # Probelauf
bash hyperframes/scripts/sync-hyperframes.sh # Synchronisation mit Backup
Siehe SYNC.md für die Upstream-Quelle, den letzt-synchronisierten Commit und die Synchronisationsstrategie.