hyperframes-animation (HeyGen HyperFrames)
HyperFrames 合成のタイミングとアニメーションの規約（data-* 属性、clip、トラック、サブ合成）を定めます。
hyperframes-animation：HyperFrames のアニメーションコンポジションをレンダリング契約に従わせます（対照群 3.8、スキルあり 4.9、一文プロンプト 4.5）。コストは対照群のトークンの 1.05 倍ですが、このスキルは HeyGen のリポジトリから削除済みです。
Codex CLI · gpt-6-astra
26.1 / 30
スキルなしに対するリフト：+1.16 · 推奨 · 18 実行
推奨：合計 26.1/30 が 22 以上、出力品質 4.9 が 3.5 以上、リフト +1.16 が +1.0 以上。
SOTA
合格Codex でテスト済み。
カバー対象 Codex, Claude Code
Codex CLI 0.166（SOTA ティア）：採点対象 18 実行。当ティアのルールでは、ここでの合格は Claude Code もカバーします。第2ティアについては何も述べません。
スコア
各ディメンションは 0〜5 点で、6 つの合計が 30 点満点の合計スコアになります。すべてのディメンションで 5 が最良です。コスト 5 は低コストで高速、インストール 5 は簡単であることを意味します。
- トリガーの信頼性
- 5.0
- スキルなしに対するリフト
- 3.2
- 出力品質
- 4.9
- トークンと時間のコスト
- 5.0
- インストールと移植性
- 4.0
- 安全性
- 4.0
セキュリティレビュー
注意静的スキャン：CRITICAL 17 / HIGH 17 / MEDIUM 148。手動レビュー：ネットワーク無効のサンドボックスで実行しても安全（スキャナの BLOCK は誤検出）。スクリプトを無条件に実行しないこと。クリーンなスキャン結果はスキルの安全性を証明しません。
インストール
npx skills@latest add heygen-com/hyperframes --skill hyperframes-animation
固定コミット: 207c8a4daf6480d697f203784f1fd422727569e3
テスト済み: 2026-11-02
テスト内容
- キネティック見出し — 6秒・1920x1080 の HyperFrames（HTML ページを GSAP タイムラインをフレームごとにシークして MP4 にレンダリングするオープンソースフレームワーク。GSAP は CDN の script タグから読み込まれます）コンポジションを作成してください：3語の見出し（'Build. Ship. Repeat.'）で、各語が飛び込む…
- シーン遷移 — 8秒・1920x1080 の HyperFrames（HTML ページを GSAP タイムラインをフレームごとにシークして MP4 にレンダリングするオープンソースフレームワーク。GSAP は CDN の script タグから読み込まれます）コンポジションを、フルスクリーンの2シーン（'Problem' を 4.5 秒、'Solution' を 4.5 秒）で作成してください…
- バー付きカウントアップ統計 — 7秒・1920x1080 の HyperFrames（HTML ページを GSAP タイムラインをフレームごとにシークして MP4 にレンダリングするオープンソースフレームワーク。GSAP は CDN の script タグから読み込まれます）コンポジションを作成してください：0 から 87% まで 2.5 秒かけてカウントアップする大きな数字と、水平の…
長所
- スキルなしと比べ平均スコアを 3.76 から 4.92 に引き上げ（+1.16）。
- スキルは名前を出さずとも採用されました：スキルあり群 6/6 実行でスキルファイルが読み込まれました。
- トークンのオーバーヘッドなし：スキルなしの 1.05 倍。
- 自身のルールの一文版を +0.39 上回ります。
- スキルありの絶対品質は高水準：5 点中 4.92。
短所
- テスト上の注意：heygen-com/hyperframes のコミット 207c8a4（古いバージョン）でテストしました。スキルはその後リポジトリの HEAD から削除されたため、現在のリポジトリに対してインストールコマンドが機能しない可能性があります。実行中に hyperframes-core も読み込みます。
- タスク・群ごとに n=2。1 ポイント未満の差はノイズです。
レビュー
専用の Windows テスト PC 上で Codex CLI 0.166（gpt-6-astra、低推論）、実行ごとに新規の一時プロジェクトと一時 HOME/TMPDIR/キャッシュを使用、スキルをインストール（スキルあり群）、スキルなし（対照群）、またはスキルの中核要件をプロンプト末尾に付けた一文に圧縮（一文プロンプト群）、タスクごとに各群 2 実行、ネットワーク無効、/tmp への書き込みはブロック。プロンプトはスキル名に一切言及しません（以下で注記する表現を除く）。HyperFrames は各プロンプト内で一文で説明されます（HTML ページを GSAP タイムラインのシークで MP4 にレンダリング）。タスク：3語が飛び込む6秒のキネティック見出し、8秒の2シーン遷移、バー付きの7秒のカウントアップ数字。一文プロンプト群はアニメーションのルールを1段落で述べます。
3群の比較
| 群 | 平均スコア（0〜5） | 1実行あたりのトークン |
|---|---|---|
| スキルなし | 3.76 | 131k |
| 一文プロンプト | 4.52 | 87k |
| スキルあり | 4.92 | 137k |
Codex CLI で 18 実行を計測し、LLM 判定なしのルールベースのチェックで採点。合計 26.1 / 30、判定は 推奨。
開示事項 テストしたのは heygen-com/hyperframes のコミット 207c8a4（古いバージョン）です。このスキルは後にリポジトリの HEAD から削除されたため、現在のリポジトリに対してはインストールコマンドが機能しない可能性があります。また、実行中に hyperframes-core も読み込みます。
判定：推奨（26.1 / 30）。 ソース：heygen-com/hyperframes、skills/hyperframes-animation, skills/hyperframes-core、コミット 207c8a4 に固定。インストール：npx skills@latest add heygen-com/hyperframes --skill hyperframes-animation。ライセンス： Apache-2.0（リポジトリの LICENSE）。
概要
heygen-com/hyperframes の hyperframes-animation スキル（コミット 207c8a4 でテスト。このスキルはリポジトリの HEAD に存在しなくなったため、本記事は廃止されたバージョンについて説明します）は、HyperFrames コンポジションのアニメーションガイダンスです：window.__timelines[root id] に登録された 1 つの一時停止した GSAP タイムライン、レイアウトプロパティの代わりに GSAP のトランスフォームエイリアス、名前付きイージング、シーケンスにはスタガー、トゥイーン時の Math.random/Date.now/タイマー/rAF/getBoundingClientRect は使わない、プロキシオブジェクトでトゥイーンするカウントアップカウンター、そして合計がルートのデュレーションでカバーされる data-start/data-duration 付きのシーン、が含まれます。
テスト方法
専用の Windows テスト PC 上で Codex CLI 0.166（gpt-6-astra、低推論）、実行ごとに新規の一時プロジェクトと一時 HOME/TMPDIR/キャッシュを使用、スキルをインストール（スキルあり群）、スキルなし（対照群）、またはスキルの中核要件をプロンプト末尾に付けた一文に圧縮（一文プロンプト群）、タスクごとに各群 2 実行、ネットワーク無効、/tmp への書き込みはブロック。プロンプトはスキル名に一切言及しません（以下で注記する表現を除く）。
HyperFrames は各プロンプトで一文で説明されます（GSAP タイムラインをシークして HTML ページを MP4 にレンダリング）。タスク：3 つの単語が飛び込んでくる 6 秒のキネティック見出し、8 秒の 2 シーンのトランジション、バー付きの 7 秒のカウントアップ数字。一文プロンプトはアニメーションのルールを 1 段落で述べます。
- キネティック見出し — 6 秒の 1920x1080 の HyperFrames（GSAP タイムラインをフレームごとにシークして HTML ページを MP4 にレンダリングするオープンソースのフレームワーク。GSAP は CDN の script タグから取得）コンポジションを作成してください：3 つの単語の見出し（'Build. Ship. Repeat.'）で、各単語が飛び込んでくる…
- シーントランジション — 8 秒の 1920x1080 の HyperFrames（GSAP タイムラインをフレームごとにシークして HTML ページを MP4 にレンダリングするオープンソースのフレームワーク。GSAP は CDN の script タグから取得）コンポジションを、2 つの全画面シーン（'Problem' 4.5 秒、'Solution' 4.5 秒）で作成して…
- バー付きカウントアップ数値 — 7 秒の 1920x1080 の HyperFrames（GSAP タイムラインをフレームごとにシークして HTML ページを MP4 にレンダリングするオープンソースのフレームワーク。GSAP は CDN の script タグから取得）コンポジションを作成してください：2.5 秒かけて 0 から 87% までカウントアップする大きな数字と、水平の…
採点はプログラム的（隠しテスト／仕込み問題の検出／制約チェック／該当する場合はレンダリング+OCR）で、実行ごとに 0〜5 点。スコアはどの LLM 判定者も決めていません。
結果
第 3 の群に与えた一文プロンプト："HyperFrames コンポジションでは、window.__timelines[root id] に登録された 1 つの一時停止した GSAP タイムラインを使うこと。要素は GSAP のトランスフォームエイリアス（x、y、scale、rotation、opacity）で動かし、width/height/top/left は使わないこと。名前付きイージングを選び、シーケンスにはスタガーを使うこと。トゥイーン時に Math.random/Date.now/タイマー/rAF/getBoundingClientRect を使わず、repeat:-1 も使わないこと。カウンターはプロキシオブジェクトの onUpdate でのトゥイーンで駆動すること。シーンは data-start/data-duration 付きの時間指定要素で、ルートの data-duration がそれらをカバーすること。"
| タスク | 対照群スコア | 一文プロンプト | スキルあり | 対照群トークン | 一文プロンプトトークン | スキルありトークン | スキルの読み込み |
|---|---|---|---|---|---|---|---|
| t1-kinetic | 3.5 | 4.25 | 4.75 | 113k | 77k | 144k | 2/2 |
| t2-transition | 3.57 | 5.0 | 5.0 | 152k | 111k | 159k | 2/2 |
| t3-countup | 4.21 | 4.32 | 5.0 | 126k | 73k | 107k | 2/2 |
平均スコア：スキルなし 3.76 に対しスキルあり 4.92（差 +1.16）。1実行あたりのトークン：131k に対し 137k（1.05 倍）。所要時間 72 秒に対し 70 秒。一文プロンプト群：4.52（一文プロンプトに対するスキルの上乗せ：+0.39、スキルなしに対する一文プロンプトの上乗せ：+0.77）。一文プロンプトのトークンは 1実行あたり 87k で、スキルは一文プロンプトの 1.57 倍のトークンを消費します。
何が起きたか
- 対照群 3.76、スキルあり 4.92、一文プロンプト 4.52（それぞれ n=6）。対照群で最も多い失敗は構造的なものです：ルート要素に完全な id/width/height/duration のセットが欠けており（6/6 実行）、タイムラインが window.__timelines に登録されていませんでした（5/6）。そのため HyperFrames レンダラーが見つけられません。
- スキルありはこれらのチェックを 6/6 で合格しました。一文プロンプトはタイムラインの登録が 6 実行中 2 実行のみでした（キネティックとカウントアップのタスクで失敗）。ただしルートのデュレーションと属性は正しく指定していました。
- キネティック見出しタスク：スキルありと対照群は、スタガーのチェックで単語ごとのスタガーを 2/2 実行とも外しました（単語ごとに別々のトゥイーンを使用）。一文プロンプトは 2/2 でスタガーを使いました。このチェックは狭いため、差は部分的にコードスタイルの問題です。
- トークン：1実行あたりスキルあり 137k、一文プロンプト 87k、対照群 131k。スキルは実行をより確実にしますが、コストは対照群と同等で安くはありません。一文プロンプトはどちらより 36% 安価です。
- スキルは大きいです（作業フォルダに約 133 ファイルがインストールされ、ルール、ブループリント、テクニックを含む）。スキルあり群の実行は hyperframes-animation と hyperframes-core の両方を読み込みました。つまりスキルはコアスキルを参照しており、この向上の一部はコアの契約によるものです。
ディメンション別スコア
| ディメンション | スコア | 理由 |
|---|---|---|
| 1_出力品質 | 4.92 | スキルありの平均スコア 4.92/5（プログラム的チェック。タスク別の表を 参照）。 |
| 2_スキルなしに対するリフト | 3.16 | スキルなし 3.76 に対して +1.16 ポイント（タスクごとに n=2。約 1 ポ イント未満の差はノイズ）。 |
| 3_トリガー | 5.0 | スキルあり群 6/6 実行でスキルファイルが読み込まれました。 |
| 4_指示の移植性 | 4 | SKILL.md と多数の参照ファイル。HyperFrames 固有です。 |
| 5_効率性 | 5 | トークン 1.05 倍（1実行あたり 137k に対し 131k）、時間 0.96 倍（70 秒に対し 72 秒）。 |
| 6_安全性と衛生 | 4 | テキストとルールのみ。security.md を参照。 |
本テストの限界
- HTML/GSAP テキストに対する静的チェックです。フレームはレンダリングしていません（hyperframes CLI、Chrome、FFmpeg は実行していない）。そのため視覚的なタイミングと品質は測定していません。
- HEAD にスキルが存在しなくなったため、コミット 207c8a4 でテストしました。現在のリポジトリに対してはインストールコマンドが機能しない可能性があります。
- スタガーのチェックは GSAP の
staggerオプションのみを受け付け、同等の単語ごとのオフセットは受け付けません。 - セルごとに n=2。
- タスク・群ごとに n=2。1 ポイント未満の差はノイズです。
- ルールベースの採点はチェックが検出できるものだけを測ります。センスや、結果が最善かどうかは判定できません。
セキュリティ
security.md を参照。スキャン：CRITICAL 17 / HIGH 17 / MEDIUM 148。判定：実行しても安全（ネットワーク無効のサンドボックス）。クリーンなスキャン結果はスキルの安全性を証明しません。
結論
スキルありでは、コンポジションがほぼ毎回 HyperFrames の契約を満たします。スキルなしでは、ルートとタイムラインの登録が通常間違っています。ルールを述べた 1 段落で、その大部分をより少ないトークンで回復できます。スキルはベンダーのリポジトリに存在しなくなったため、この結果は以前のバージョンの記録として扱ってください。
トランスクリプト
実行ログ：hyperframes-animation (Codex CLI, network off, per-run temp HOME/TMPDIR, one row per graded run.) 列：タスク、群-回、スコア（0-5）、トークン、秒、合格したチェック、エージェントが開いたスキルファイル。 t1-kinetic control-1: スコア 3.5, トークン 128548, 秒 60.2, チェック 7/10, 開いたファイルなし t1-kinetic control-2: スコア 3.5, トークン 99223, 秒 66.5, チェック 7/10, 開いたファイルなし t1-kinetic oneliner-1: スコア 4.25, トークン 79255, 秒 64.5, チェック 9/10, 開いたファイルなし t1-kinetic oneliner-2: スコア 4.25, トークン 75639, 秒 62.9, チェック 9/10, 開いたファイルなし t1-kinetic treatment-1: スコア 4.75, トークン 106794, 秒 54.6, チェック 9/10, 開いたファイル hyperframes-animation,hyperframes-core t1-kinetic treatment-2: スコア 4.75, トークン 181725, 秒 64.4, チェック 9/10, 開いたファイル hyperframes-animation,hyperframes-core t2-transition control-1: スコア 3.57, トークン 139995, 秒 89.6, チェック 8/11, 開いたファイルなし t2-transition control-2: スコア 3.57, トークン 164538, 秒 97.6, チェック 8/11, 開いたファイルなし t2-transition oneliner-1: スコア 5.0, トークン 98384, 秒 101.1, チェック 11/11, 開いたファイルなし
18 実行、21 成果物
サンプル出力
SOTA · With the skill: index.html (t1-kinetic, run 1, Codex)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=1920, height=1080"> <title>Build. Ship. Repeat.</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: #080b10; color: #f5f7f5; font-family: system-ui, sans-serif; } #root { position: relative; width: 100%; height: 100%; overflow: hidden; } .clip { position: absolute; inset: 0; } .background { background: #080b10; } .glow { position: absolute; left: 310px; top: 140px; width: 1300px; height: 800px; border-radius: 50%; background: radial-gradient(ellipse, #167b60 0%, #0d463e 32%, transparent 70%); opacity: .24; } .grid { position: absolute; inset: 0; background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px); background-size: 120px 120px; mask-image: radial-gradient(ellipse, black, transparent 72%); } .content { display: flex; align-items: center; justify-content: center; flex-direction: column; } .headline { display: flex; align-items: baseline; justify-content: center; gap: 34px; margin: 0; width: 1720px; font-size: 160px; font-weight: 850; letter-spacing: -9px; line-height: 1.15; } .word { display: block; flex: 0 0 auto; transform-origin: 50% 65%; opacity: 0; } #repeat { color: #b7f676; } .subtitle { margin: 38px 0 0; font-size: 34px; font-weight: 400; letter-spacing: 1px; color: #b9c5c2; opacity: 0; } .beats { position: absolute; bottom: 210px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; } .beat { display: block; width: 38px; height: 4px; background: #b7f676; opacity: .15; transform-origin: left center; } </style> </head> <body> <div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080"> <div class="clip background" data-start="0" data-duration="6" data-track-index="0" aria-hidden="true"> <div class="glow" id="glow"></div> <div class="grid"></div> </div> <section class="clip content" data-start="0" data-duration="6" data-track-index="1"> <h1 class="headline" aria-label="Build. Ship. Repeat."><span class="word" id="build">Build.</span><span class="word" id="ship">Ship.</span><span class="word" id="repeat">Repeat.</span></h1> <p class="subtitle" id="subtitle">The loop that never stops</p> <div class="beats" aria-hidden="true"><i class="beat"></i><i class="beat"></i><i class="beat"></i></div> </section> </div> <script> // Every visual change belongs to this single, frame-seekable timeline. const tl = gsap.timeline({ paused: true }); const beats = [0.25, 0.95, 1.65]; tl.fromTo('#glow', { scale: 0.88, x: -65, opacity: 0.24 }, { scale: 1.12, x: 65, opacity: 0.40, duration: 6, ease: 'sine.inOut' }, 0); tl.fromTo('#build', { scale: 1.65, y: -55, opacity: 0 }, { scale: 1, y: 0, opacity: 1, duration: 0.32, ease: 'power4.out' }, beats[0]); tl.fromTo('#ship', { scale: 1.35, x: 95, opacity: 0 }, { scale: 1, x [... excerpt: first 3200 of 4167 characters]