In den eigenen Worten des Skills
Ein routing-first-Skill für ein kurzes, design-geführtes, unkommentiertes Motion-Graphic-Stück — kinetische Typografie, Stat-Count-up, Chart-Hit, Logo-Sting, Bauchbinde, animierte Karte, Tweet oder Webseite — meist unter 10 Sekunden und nicht länger als etwa 30 Sekunden, gerendert als MP4 oder transparentes Overlay.
Asset-first und reuse-first: Die erste Weiche entscheidet, ob das Stück eine Suche benötigt. Form-Kategorien laufen mit vom Nutzer bereitgestelltem Content und leerem asset_needs, suchgetriebene Kategorien animieren nach dem zurückgegebenen Content-Typ, und der Builder setzt Katalog-Blöcke zusammen, bevor Lücken händisch ausgearbeitet werden. Der Workflow ist autonom mit höchstens einer Klärungsfrage, das Rendering bleibt jedoch nutzergesteuert – hinter Lint, Check und Proof-Snapshots.
Was er erzeugt
- Ein Entwurfs- und späterer endgültiger shot-plan.json mit Envelope, gewählter Kategorie oder Suchintent, asset_needs sowie Block, Layout, Motion und Positionen.
- compositions/index.html, das den HF-Contract mit einer pausierten GSAP-Timeline unter window.__timelines, Clip-Klassen und stabilen ids einhält, plus ein deterministisches tl.seek(0).
- Ein Kontakt- oder Snapshot-Sheet unter snapshots/ zur Prüfung der Proof-Zeiten.
- renders/video.mp4, oder ein transparentes Overlay beim Rendern im webm- oder mov-Format.
So funktioniert es
- 01Projekt initialisieren
Schritt 0 legt PROJECT_DIR = videos/<project-name>/ an und führt hyperframes init mit dem leeren Beispiel und diesem Skill aus, wobei der Schritt vollständig übersprungen wird, wenn hyperframes.json bereits existiert.
- 02Planen und über Suche entscheiden
Die erste Weiche entscheidet, ob das Stück eine Suche benötigt: Nein bedeutet eine Form-Kategorie mit asset_needs: [], Ja bedeutet, Suchanfragen in asset_needs[] auszugeben.
- 03Assets bei Bedarf beschaffen
Schritt 2 löst Assets über media-use in fixierte projektlokale Pfade plus ein Ledger auf und wird direkt zum Design übersprungen, wenn asset_needs leer ist.
- 04Um das Vorhandene herum gestalten
Ein zweiter Director-Durchgang wählt Katalog-Blöcke und hyperframes-animation-Regeln aus und entwirft rund um die aufgelösten Assets, um dann den Shot-Plan zu finalisieren.
- 05Reuse-first zusammensetzen
Der Builder fügt Katalog-Blöcke mit npx hyperframes add hinzu und passt sie vor Ort an, wobei nur die Lücken und die Asset-Fusion-Affordance händisch ausgearbeitet werden, um compositions/index.html zu erzeugen.
- 06Proof-Snapshots aufnehmen
Wählen Sie Proof-Zeitpunkte, die den Ausgangszustand, den signature move und den finalen Hold zeigen, und prüfen Sie dann das erzeugte Kontakt- oder Snapshot-Sheet.