hyperframes-core

合成物の HTML を書く前です。説明文にもそう書かれています。

合成物は 3 つの条件を満たす HTML

HyperFrames は HTML から動画を描き出します。合成物は次の 3 つを満たす HTML ファイルです。

• 時間を宣言するDOM が data-* 属性で開始と長さを持つ
• 巻き戻せるアニメーションの実行環境が任意の時点へ飛べる
• 再生を手放す映像と音の再生は枠組みが所有する

このスキルはその技術的な契約です。工程の文書（企画書・絵コンテ・審査・制作）は入口の hyperframes 側にあり、ここには1 本の作品をどう組むかだけが書かれています。

踏みやすい失敗が冒頭に 4 つ並んでいる

本文の 2 段落目が「エージェントが踏む穴（先に読め）」です。この配置は効きます。

• CSS の transform と GSAP の x を併用初期値と補間が食い違い、検査が落ちる
• 場面の終わりに visibility:hidden を足す実行環境が既に隠している。二重になる
• window.__timelines["id"] の id がずれる登録が効かない
• 描き出しの要約の 2 行目を読まない遅い経路に落ちていても気づかない

1 番目は実際に検査で弾かれます。規則の名前（gsap_css_transform_conflict）まで書かれています。「CSS で初期状態を書かず、gsap.fromTo の中で書け」という直し方も添えられています。

根が 2 種類あって、互換ではない

ここが最も間違えやすい部分です。

単体を <template> で包むと、中身が全部消えます。検査は弾きますが（standalone_composition_wrapped_in_template）、形を知らずに書くと必ず 1 回は踏みます。

下位の合成物には運搬の規則がある

下位の合成物には運搬の規則もあります。<template> で包んだ場合、ファイル自身の <head> にある <style> と <script> は組み立ての時点で捨てられます。

中に入れてください。<link> は両方とも持ち上げられます。

タイムラインは 1 本だけ

合成物ごとに、止まった状態の GSAP のタイムラインをちょうど 1 本登録します。鍵は根の data-composition-id と同じ文字列です。

長さは根の data-duration で決まる

長さは根の data-duration で決まります。タイムラインの長さではありません。

根に固定の画素数を書かない

根に固定の画素数を書かないという注意もあります。1920px を #root に直書きすると崩れます。

画面の大きさは data-width / data-height で、実行環境がそれを根に刻みます。

詳細は同梱の 10 ファイルに分かれている

本文は入口で、深い話は参照資料に送られます。下は 10 件のうち主な 6 件です。

• minimal-composition.md最小の骨組みから始める
• data-attributes.mddata-* を引く
• tracks-and-clips.mddata-track-index が何を決める（決めない）か
• creator-editing-recipes.md切る・並べ替える・凍結・カメラの定型
• determinism-rules.md巻き戻せる時間軸の作り方と禁止事項
• sub-compositions.md下位の合成物の配線

必要なものだけ読ませる作りです（スキルを入れすぎて重くなる仕組み）。動きの実行環境ごとの API は hyperframes-animation にあります。

この公開元は入口 1 件から入る作り

この公開元は入口 1 件から入る作りです。4 層の構造は heygen-com/hyperframes の地図にまとめています。

動画を 1 本作りたいだけなら、これは入口ではない

動画を 1 本作りたいだけなら、これは入口ではありません。hyperframes から入って、必要になったときに呼ばれる側です。

動きの付け方を知りたいなら別物

規則・雛形・実行環境ごとの API は hyperframes-animation の担当です。

素材（画像・音・声）の扱いも別

そちらは media-use です。

検査や描き出しの操作は扱わない

init lint check render は hyperframes-cli です。

HyperFrames 以外には使えない

契約が枠組み固有です。

解析で見つかったのはパッケージの導入とシェル実行の記述

SKILL.md の解析では、パッケージの導入とシェルコマンドの実行の記述が見つかっています（npx hyperframes check など）。外部通信とファイル書き換えの記述は見つかっていません。同梱ファイルは 10 件です（2026-09-26 時点）。

ただし実際には HTML を書く

ただし実際には HTML を書きます。書き込みとして拾っていないのは、それが表と参照リンクで書かれているためです（スキルを入れる前に確認すること）。

本文が約 12KB あり、参照資料が 10 件ある

全部読ませると文脈を大きく使います。必要な資料だけを指定して読ませるほうが確実です。

検査に落ちてから直す前提の記述がある

「検査は捕まえるが、あとからでしかない。1 回目から正しく書け」という書き方で、失敗する前提の規則が並んでいます。1 回目の描き出しが通らなくても異常ではありません。

並んでいる規則のうち、次の 2 つは結果が見えにくいものです。

• <audio> に id が無いと、混ぜる段で拾われず描き出しが無音になる（media_missing_id）
• <video> / <audio> に crossorigin を付けると、例外なく検査に弾かれる（media_crossorigin_breaks_preview）

検査のエラーが残ると、レイアウトとコントラストの検査が走らない

lint のエラーが 1 つでもあると、check は 0 sample(s) や 0/0 text checks と報告します。きれいな結果に見えますが、何も検査していない、と本文が注意しています。先に lint のエラーを消してください。

下位の合成物で <style> が消えても、警告は出ない

ライセンスは Apache-2.0

ライセンス: Apache-2.0。再配布や商用利用の前に公開元の表記を確認してください。

単体と下位の合成物は何が違いますか

<template> で包むかどうかです。単体（最上位の index.html）は包みません。data-composition-src で読み込まれる側は包みます。

逆にすると中身が消えます。検査は弾きますが、先に知っておくと 1 往復減ります。

動画の長さはどこで決まりますか

根の data-duration です。タイムラインの長さではありません。

タイムラインが長ければ切られ、短ければ最後の画が残ります。書かない場合はタイムラインや素材から推測されます。

検査で `gsap_css_transform_conflict` が出ます

CSS の transform と GSAP の補間が、同じ性質で競合しています。

CSS に transform: translateX(-40px) と書く代わりに、gsap.fromTo(el, { x: -40 }, { x: 0 }) のように初期状態を補間の中で書いてください。本文の冒頭にある穴の 1 番目です。

下位の合成物でスタイルが効きません

<template> の外に <style> を書いていませんか。包んだ場合、ファイル自身の <head> にある <style> と <script> は組み立ての時点で捨てられます。

中に入れてください。<link> はどちらでも持ち上げられます。

対応しているエージェントはどれですか

Claude Code と Codex です。公開元の README が「Claude Code・Codex・Cursor で動く」と書き、Claude Code へのプラグインの入れ方と Codex への取り込み方を案内しています（2026-10-09 確認）。当サイトは公開元が明記しているものだけを「対応」として表示する方針なので、このスキルのページには両方が対応として出ます（指標の意味と限界）。