hyperframes-core (HeyGen HyperFrames)
Baut aus HTML eine renderbare HyperFrames-Komposition und deckt Struktur, Timing, Medienwiedergabe und Validierung ab.
hyperframes-core: Codex trifft HyperFrames-Kompositionen mit dem Skill deutlich häufiger richtig (Kontrolle 4.1, Skill 4.9, One-Liner 4.6) und verbraucht weniger Tokens (0.48x Kontrolle), aber dieser Skill wurde aus HeyGens Repo zurückgezogen
Codex CLI · gpt-6-astra
25.8 / 30
Lift gegenüber ohne Skill: +0.85 · Situativ · 18 Läufe
Situativ: der Lift +0.85 liegt unter +1.0. Für „Empfohlen“ sind insgesamt 22/30, eine Ausgabequalität von 3.5 und ein Lift von +1.0 nötig.
SOTA
BestandenGetestet mit Codex.
Gilt für Codex, Claude Code
Codex CLI 0.166 (SOTA-Stufe): 18 bewertete Läufe. Ein Bestehen hier deckt gemäß unserer Stufenregel auch Claude Code ab; über die zweite Stufe sagt es nichts aus.
Punktzahlen
Jede Dimension reicht von 0 bis 5, und die sechs ergeben zusammen die Gesamtpunktzahl von 30. 5 ist in jeder Dimension besser. Kosten 5 bedeutet günstig und schnell. Installation 5 bedeutet einfach.
- Trigger-Zuverlässigkeit
- 5.0
- Lift gegenüber ohne Skill
- 2.9
- Ausgabequalität
- 4.9
- Token- und Zeitkosten
- 5.0
- Installation und Portabilität
- 4.0
- Sicherheit
- 4.0
Sicherheitsprüfung
SicherStatischer Scan: 0 CRITICAL / 0 HIGH / 21 MEDIUM. Manuelle Prüfung: Sicher zu installieren. Ein sauberer Scan beweist nicht, dass ein Skill sicher ist.
Installieren
npx skills@latest add heygen-com/hyperframes --skill hyperframes-core
Fixierter Commit: 207c8a4daf6480d697f203784f1fd422727569e3
Getestet: 2026-11-02
Was wir getestet haben
- Dreiszenen-Erklärer — Ein 12-sekündiges 1920x1080-Video als HyperFrames-Komposition erstellen (ein Open-Source-Framework, das eine HTML-Seite nach MP4 rendert, indem es eine GSAP-Timeline Frame für Frame durchläuft; GSAP kommt per CDN-Script-Tag). Drei Szenen à 4 Sekunden: eine Titelkarte („Meet Orbit“), eine Aufzählungsli…
- Eine defekte Komposition reparieren — index.html in diesem Ordner ist eine HyperFrames-Komposition (ein Open-Source-Framework, das eine HTML-Seite nach MP4 rendert, indem es eine GSAP-Timeline Frame für Frame durchläuft; GSAP kommt per CDN-Script-Tag), die falsch rendert (zittrig, falsches Szenen-Timing, Szene 2 unsichtbar, d…
- Wiederverwendbares Lower-Third als Subkomposition — Ein 8-sekündiges 1920x1080-HyperFrames-Video bauen (ein Open-Source-Framework, das eine HTML-Seite nach MP4 rendert, indem es eine GSAP-Timeline Frame für Frame durchläuft; GSAP kommt per CDN-Script-Tag). Ein wiederverwendbares Lower-Third (Name und Berufsbezeichnung, die von links hereingleiten und…
Vorteile
- Hebt den Mittelwert von 4.09 auf 4.94 gegenüber ohne Skill (+0.85).
- Der Skill wurde erkannt, ohne genannt zu werden: Skill-Datei in 6/6 Treatment-Läufen gelesen.
- Kein Token-Overhead: 0.47x die Tokens von ohne Skill.
- Schlägt eine Ein-Satz-Version seiner eigenen Regel um +0.32.
- Hohe absolute Qualität mit dem Skill: 4.94 von 5.
Nachteile
- Testhinweis: Getestet bei heygen-com/hyperframes Commit 207c8a4. Der Skill wurde später aus dem Repository-HEAD entfernt; diese Bewertung beschreibt eine zurückgezogene Version, und der Installationsbefehl funktioniert gegen das aktuelle Repository möglicherweise nicht.
- n=2 pro Aufgabe und Variante; Unterschiede unter etwa 1 Punkt sind Rauschen.
Bewertung
Codex CLI 0.166 (gpt-6-astra, niedriges Reasoning) auf einem dedizierten Windows-Test-PC, einem frischen temporären Projekt und temporären HOME/TMPDIR/Caches pro Lauf; Skill installiert (Treatment) oder nicht vorhanden (Kontrolle) oder nicht vorhanden mit der Kernanforderung des Skills in einem an den Prompt angehängten Satz (One-Liner-Gruppe); 2 Läufe pro Gruppe und Aufgabe; Netzwerk aus; Schreiben nach /tmp blockiert. Die Prompts nennen den Skill nie (außer der unten genannten Formulierung). HyperFrames wird im Prompt als „ein Open-Source-Framework, das eine HTML-Seite nach MP4 rendert, indem es eine GSAP-Timeline Frame für Frame durchläuft“ beschrieben, ohne Details zum Vertrag. Aufgaben: einen 12-sekündigen Dreiszenen-Erklärer verfassen, eine defekte Komposition reparieren (Jitter, falsches Timing) und ein wiederverwendbares Lower-Third als Subkomposition bauen. Der One-Liner nennt den vollständigen Kompositionsvertrag in einem Absatz.
Drei-Arm-Vergleich
| Variante | Durchschnittsnote (0-5) | Tokens pro Lauf |
|---|---|---|
| Ohne Skill | 4.09 | 239k |
| Ein-Satz-Prompt | 4.62 | 160k |
| Mit Skill | 4.94 | 114k |
Gemessen mit Codex CLI über 18 Läufe, bewertet durch regelbasierte Prüfungen ohne LLM-Richter. Gesamt 25.8 / 30, Urteil Situativ.
Offenlegung: Getestet bei heygen-com/hyperframes Commit 207c8a4. Der Skill wurde später aus dem Repository-HEAD entfernt; diese Bewertung beschreibt eine zurückgezogene Version, und der Installationsbefehl funktioniert gegen das aktuelle Repository möglicherweise nicht.
Urteil: Situativ (25.8 / 30). Quelle: heygen-com/hyperframes, skills/hyperframes-core, festgehalten auf Commit 207c8a4. Installation: npx skills@latest add heygen-com/hyperframes --skill hyperframes-core. Lizenz: Apache-2.0 (Repo-LICENSE).
Was es ist
Der Skill hyperframes-core aus heygen-com/hyperframes, getestet auf Commit 207c8a4 (der Skill wurde später aus dem Repo-HEAD entfernt; beschrieben wird hier also eine eingestellte Version). Er dokumentiert den Kompositionsvertrag von HyperFrames: Root-Div mit data-composition-id/width/height/duration, zeitgesteuerte Clips mit data-start/data-duration und class=clip, eine pausierte GSAP-Timeline, die bei window.__timelines[Root-ID] registriert wird, Regeln für Determinismus zur Renderzeit und Subkompositionen in separaten Dateien.
So haben wir getestet
Codex CLI 0.166 (gpt-6-astra, niedrige Denkstufe) auf einem dedizierten Windows-Test-PC, pro Lauf ein frisches temporäres Projekt und temporäre HOME/TMPDIR/Caches, Skill installiert (Skill-Gruppe), nicht vorhanden (Kontrollgruppe) oder nicht vorhanden, aber mit der Kernanforderung des Skills in einem an den Prompt angehängten Satz (Ein-Satz-Gruppe), 2 Läufe pro Gruppe und Aufgabe, Netzwerk aus, Schreibzugriffe auf /tmp blockiert. Die Prompts erwähnen den Skill nie (außer der unten genannten Formulierung).
HyperFrames wird im Prompt beschrieben als „ein Open-Source-Framework, das eine HTML-Seite zu MP4 rendert, indem es eine GSAP-Timeline Bild für Bild durchläuft“, ohne Details zum Vertrag. Aufgaben: einen 12-sekündigen Dreiszenen-Erklärer schreiben, eine kaputte Komposition reparieren (Ruckeln, falsches Timing) und ein wiederverwendbares Lower-Third als Subkomposition bauen. Der Ein-Satz-Prompt nennt den vollständigen Kompositionsvertrag in einem Absatz.
- Dreiszenen-Erklärer — Erstelle ein 12-sekündiges 1920x1080-Video als HyperFrames-Komposition (ein Open-Source-Framework, das eine HTML-Seite zu MP4 rendert, indem es eine GSAP-Timeline Bild für Bild durchläuft; GSAP kommt über ein CDN-Script-Tag). Drei Szenen à 4 Sekunden: eine Titelkarte („Meet Orbit“), eine Bullet-L…
- Eine kaputte Komposition reparieren — index.html in diesem Ordner ist eine HyperFrames-Komposition (ein Open-Source-Framework, das eine HTML-Seite zu MP4 rendert, indem es eine GSAP-Timeline Bild für Bild durchläuft; GSAP kommt über ein CDN-Script-Tag), die falsch rendert (ruckelig, falsches Szenen-Timing, Szene 2 unsichtbar, d…
- Wiederverwendbares Lower-Third als Subkomposition — Baue ein HyperFrames-Video (ein Open-Source-Framework, das eine HTML-Seite zu MP4 rendert, indem es eine GSAP-Timeline Bild für Bild durchläuft; GSAP kommt über ein CDN-Script-Tag) von 8 Sekunden, 1920x1080. Ein wiederverwendbares Lower-Third (Name und Berufsbezeichnung, die von links hereingleiten un…
Die Bewertung erfolgt programmatisch (versteckte Tests / Recall eingeschleuster Probleme / Constraint-Prüfungen / Rendern+OCR, wo relevant), 0–5 pro Lauf. Kein LLM-Judge hat eine Punktzahl vergeben.
Ergebnisse
Der Ein-Satz-Prompt für die dritte Gruppe: „HyperFrames-Kompositionsvertrag: ein eigenständiges Root-<div data-composition-id data-width data-height data-duration> in <body>; zeitgesteuerte Elemente tragen data-start und data-duration (class=clip); EINE gsap.timeline({paused:true}) bauen und bei window.__timelines['<root id>'] registrieren; Determinismus zur Renderzeit: kein Math.random/Date.now/Timer/rAF, kein repeat:-1, niemals display/visibility/autoAlpha eines Clips tweenen; Subkompositionen liegen in separaten Dateien mit data-composition-src, der Inhalt in <template> verpackt, Host-ID = innere ID = Timeline-Schlüssel.“
| Aufgabe | Punktzahl Kontrolle | Ein-Satz | Mit Skill | Token Kontrolle | Token Ein-Satz | Token mit Skill | Skill gelesen |
|---|---|---|---|---|---|---|---|
| t1-explainer | 3.33 | 5.0 | 5.0 | 136k | 82k | 98k | 2/2 |
| t2-fix | 3.95 | 3.86 | 4.82 | 377k | 100k | 128k | 2/2 |
| t3-sub | 5.0 | 5.0 | 5.0 | 203k | 298k | 114k | 2/2 |
Mittelwert: 4.09 ohne vs. 4.94 mit Skill (Delta +0.85). Token pro Lauf: 239k vs. 114k (0.47x); Zeit 107s vs. 79s. Ein-Satz-Gruppe: 4.62 (Gewinn des Skills gegenüber dem Ein-Satz-Prompt: +0.32; Gewinn des Ein-Satz-Prompts gegenüber dem Lauf ohne Skill: +0.53); Token des Ein-Satz-Prompts 160k pro Lauf, der Skill kostet also 0.71x des Ein-Satz-Prompts.
Was dabei herauskam
- Kontrolle 4.09, Skill 4.94, Ein-Satz 4.62 (je n=6). Der größte Abstand zeigt sich beim Erklärer: Die Kontrolle schrieb in 2/2 Läufen visibility/display-Tweens oder autoAlpha auf Clips und registrierte die Timeline in 2/2 nicht bei window.__timelines; beide Skill-Läufe und beide Ein-Satz-Läufe waren sauber (5.0).
- Reparaturaufgabe: Der Skill erzielte 4.82 gegenüber 3.95 für die Kontrolle und 3.86 für den Ein-Satz-Prompt. Die Kontrolle ließ das Root in 2/2 ohne Dauer und mit fest codierter px-Größe, und die Dauer des Roots deckte den letzten Clip nicht ab; die Ein-Satz-Läufe codierten die px-Größe fest, und einer registrierte die Timeline nicht.
- Subkompositions-Aufgabe: Alle drei Gruppen erzielten 5.0; ein nacktes Modell beherrscht
data-composition-srcund den Template-Wrapper also bereits, wenn ein wiederverwendbares Bauteil verlangt wird. - Token: Skill 114k, Ein-Satz 160k, Kontrolle 239k pro Lauf. Ohne den Vertrag braucht die Kontrolle deutlich mehr Schritte (13 Befehle pro Lauf gegenüber 9), um das Format herauszufinden; der Skill ist günstiger als gar keine Anleitung.
- Eine Prüfung („jedes zeitgesteuerte Element hat eine Dauer“) scheitert in 3 Läufen, darunter Läufe mit Skill; sie zählt in der Datei der Reparaturaufgabe nur zwei Clips und gilt für alle Gruppen gleich.
Bewertung nach Dimensionen
| Dimension | Punktzahl | Begründung |
|---|---|---|
| 1_output_quality | 4.94 | Mittlere Punktzahl 4.94/5 mit dem Skill (programmatische Prüfungen, siehe Tabelle pro Aufgabe). |
| 2_lift_vs_no_skill | 2.85 | +0.85 Punkte gegenüber 4.09 ohne den Skill (n=2 pro Aufgabe; unter etwa 1 Punkt ist Rauschen). |
| 3_trigger | 5.0 | Skill-Datei in 6/6 Läufen der Skill-Gruppe gelesen. |
| 4_instructions_portability | 4 | SKILL.md plus Referenzen; inhaltlich auf die HyperFrames CLI zugeschnitten. |
| 5_efficiency | 5 | 0.47x Token (114k vs. 239k pro Lauf) und 0.74x Zeit (79s vs. 107s). |
| 6_safety_hygiene | 4 | Nur Prosa und Regeln; siehe security.md. |
Grenzen dieses Tests
- Die Prüfungen sind statisch: HTML-Struktur, GSAP-Aufrufe und Timeline-Registrierung wurden geparst, aber es wurden keine Frames gerendert (die hyperframes CLI, Chrome und FFmpeg liefen nicht).
- Der Skill wurde auf Commit 207c8a4 getestet, weil HEAD ihn nicht mehr enthält; der Installationsbefehl im Review funktioniert möglicherweise nicht mehr gegen das aktuelle Repository.
- n=2 pro Zelle; die Tokenzahl der Kontrolle ist durch einige sehr lange Läufe (bis zu 440k) nach oben verzerrt.
- Die Prompts beschreiben HyperFrames in einem Satz; ein Agent mit Netzzugang könnte die Docs nachschlagen, doch das Netzwerk war aus.
- n = 2 pro Gruppe und Aufgabe: Unterschiede unter etwa 1 Punkt sind Rauschen.
- Regelbasierte Bewertung misst nur, was die Prüfungen sehen können; sie kann weder Geschmack noch beurteilen, ob ein Ergebnis das bestmögliche ist.
Sicherheit
Siehe security.md. Scan: 0 CRITICAL / 0 HIGH / 21 MEDIUM. Urteil: sicher ausführbar (Offline-Sandbox). Ein sauberer Scan beweist nicht, dass ein Skill sicher ist.
Fazit
Wo das Format unbekannt ist, halbiert der Skill etwa die Chance auf Vertragsfehler und spart Token. Ein Absatz, der den Vertrag nennt, holt den größten Teil des Nutzens zurück. Da der Skill nicht mehr im Repo des Anbieters liegt, ist das Ergebnis als Aufzeichnung jener früheren Version zu verstehen.
Transkript
Laufprotokoll: hyperframes-core (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) Spalten: Aufgabe, Gruppe-Lauf, Punktzahl (0-5), Tokens, Sekunden, bestandene Prüfungen, vom Agenten geöffnete Skill-Dateien. t1-explainer control-1: Punkte 3.1, Tokens 140793, Sek. 87.3, Prüfungen 7/11, nichts geöffnet t1-explainer control-2: Punkte 3.57, Tokens 132979, Sek. 80.3, Prüfungen 8/11, nichts geöffnet t1-explainer oneliner-1: Punkte 5.0, Tokens 90890, Sek. 75.8, Prüfungen 11/11, nichts geöffnet t1-explainer oneliner-2: Punkte 5.0, Tokens 73311, Sek. 72.9, Prüfungen 11/11, nichts geöffnet t1-explainer treatment-1: Punkte 5.0, Tokens 111517, Sek. 90.6, Prüfungen 11/11, geöffnet hyperframes-core t1-explainer treatment-2: Punkte 5.0, Tokens 84676, Sek. 102.2, Prüfungen 11/11, geöffnet hyperframes-core t2-fix control-1: Punkte 3.95, Tokens 314272, Sek. 165.7, Prüfungen 7/10, nichts geöffnet t2-fix control-2: Punkte 3.95, Tokens 440614, Sek. 142.2, Prüfungen 7/10, nichts geöffnet t2-fix oneliner-1: Punkte 3.77, Tokens 108753, Sek. 81.4, Prüfungen 7/10, nichts geöffnet
18 Läufe, 3 Artefakte
Beispielausgabe
SOTA · With the skill: index.html (t1-explainer, run 1, Codex)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=1920, height=1080"> <title>Meet Orbit — 12-second film</title> <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> <style> * { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; } body { background: #f3f0e7; color: #202d29; font-family: system-ui, sans-serif; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #f3f0e7; } .brand { position: absolute; top: 66px; left: 100px; display: flex; align-items: center; gap: 16px; font-size: 32px; font-weight: 750; letter-spacing: -1px; } .brand-mark { width: 30px; height: 30px; border: 8px solid #e65932; border-radius: 50%; } .edition { position: absolute; top: 77px; right: 100px; font-size: 18px; letter-spacing: 3px; } .clip { position: absolute; inset: 0; } .scene { width: 100%; height: 100%; padding: 190px 100px 150px; display: flex; align-items: center; gap: 65px; } .copy { flex: 1; position: relative; z-index: 2; } .eyebrow { margin: 0 0 30px; font-size: 21px; font-weight: 650; letter-spacing: 4px; text-transform: uppercase; color: #52635b; } h1, h2, p { margin: 0; } h1 { font-size: 150px; line-height: 1.05; letter-spacing: -10px; font-weight: 650; } h2 { font-size: 86px; line-height: 1.07; letter-spacing: -5px; font-weight: 650; } .subtitle { margin-top: 34px; font-size: 31px; line-height: 1.5; color: #52635b; } .art { width: 760px; height: 650px; flex: none; } .orbit-svg { display: block; width: 100%; height: 100%; overflow: visible; } .footer { position: absolute; bottom: 65px; left: 100px; right: 100px; display: flex; justify-content: space-between; font-size: 18px; letter-spacing: 2px; color: #52635b; } .progress-track { position: absolute; bottom: 0; left: 0; right: 0; height: 7px; background: #deded3; } .progress { width: 100%; height: 100%; background: #e65932; transform-origin: left center; } .features-copy { max-width: 650px; } .features { list-style: none; margin: 0; padding: 0; width: 930px; } .feature { display: flex; align-items: center; gap: 30px; padding: 39px 0; border-bottom: 2px solid #ced3c9; font-size: 43px; font-weight: 550; letter-spacing: -1.5px; } .feature:first-child { border-top: 2px solid #ced3c9; } .number { display: grid; place-items: center; width: 66px; height: 66px; flex: none; border-radius: 50%; background: #202d29; color: #f3f0e7; font-size: 22px; letter-spacing: 0; } .feature-dot { margin-left: auto; color: #e65932; font-size: 40px; } .closing { justify-content: center; text-align: center; } .closing-copy { width: 1300px; } .closing h2 { font-size: 119px; letter-spacing: -7px; } .cta { display: inline-flex; align-items: center; justify-content: center; gap: 50px; margin-top: 48px; padding: 26px 42px; border-radius: 100px; background: #e65932; color: #17251f; font-size: 32px; font-weight: 650; } .cta-arrow { font-size: 40px; line-height: 1; } .closing-icon { display: block; width: 84px; height: 84px; margin: 0 auto 38px; border: 19px solid [... excerpt: first 3200 of 7731 characters]