HyperFrames — ここから始めてください
HyperFrames は HTML から動画をレンダリングします。コンポジションは HTML ファイルであり、その DOM は data-* 属性でタイミングを宣言し、アニメーションランタイムはシーク可能で、メディア再生はフレームワークが管理します。
このスキルは 技術的な使用方法ガイド です。デザインに関する内容は意図的に含まれていません。モーション/アニメーションのレシピについては /hyperframes-motion を、デザイン指針（パレット、タイポグラフィ、フレームプリセット）については /hyperframes-design を参照してください。以下は、すべての HyperFrames トピックの 機能マップ、このスキルに含まれる トピックガイドインデックス、およびワークフロー選択のための インテントルーター です。
機能マップ — HyperFrames スキル
3つのスキルがあり、それぞれが1つの関心事を担当します。このスキルは技術的な使用方法ガイドです。他の2つはデザインをカバーします。
| 目的 | スキル |
|---|---|
| HyperFrames の使い方 — コンポジション契約、CLI 開発ループ、レジストリブロック/コンポーネントのインストール（このスキル） | /hyperframes |
| モーション / アニメーション — アトミックモーションルール、シーンブループリント、トランジション、ランタイムアダプター（GSAP / Lottie / Three.js） | /hyperframes-motion |
| デザイン — パレット、タイポグラフィ、フレームプリセット、ビート計画、ブランド/スタイルの決定（アニメーションレシピは含みません） | /hyperframes-design |
トピックガイド — このスキルの内容
技術的な使用方法ガイドは3つのサブトピックに分かれています。それぞれに独自の SKILL.md と references/ があります。
| サブトピック | パス | 目的 |
|---|---|---|
| コンポジションコア | core/SKILL.md | コンポジション契約 — data-* 属性、クリップ、トラック、サブコンポジション、変数、決定論ルール |
| CLI 開発ループ | cli/SKILL.md | npx hyperframes init / lint / validate / inspect / preview / render + AWS Lambda クラウドレンダリング |
| レジストリ追加 | registry/SKILL.md | hyperframes add <block-or-component> — インストール場所、ブロックの配線、コンポーネントの配線、新しいアイテムの貢献 |
各トピックの詳細は、各サブトピックの references/ フォルダにあります。アニメーションランタイムの詳細（GSAP API、Lottie、Three.js など）については /hyperframes-motion → adapters/<runtime>.md を参照してください。
インテントルーティング — ワークフローを選択する
このセクションはトップレベルのワークフローのみを認識します。内部のリファレンスや上記のトピックガイドは読み込みません。
ルーティング前 — 仕様ではなく入力を確認する
ルーティングでは、動画の内容 — その入力と主題を知る必要があります。それが未指定の場合（「私たちの製品についての動画を作って」と、URL、製品、トピック、アセットがない場合）、いずれかのワークフローに入る前に質問してください。ワークフローにコミットすることがルーティングの決定です。最大2つの質問：
- 入力 — 製品（URL / 概要）、一般的なウェブサイト、GitHub PR、説明するトピック、または既存のトーキングヘッド動画？
仕様のデフォルト — 質問せずに状態として設定（ルートを変更することはありません）：アスペクト比 16:9（名前付きの縦型出力先 — TikTok / Reels / Shorts の場合のみ 9:16 を使用）；キャプション 言語 = ユーザーの言語。選択されたワークフローは、最初のステップで自身の詳細を再確認します。
ワークフロー早見表
| ワークフロー | 用途 |
|---|---|
/faceless-explainer | トピック/概念の説明 — テキストから。製品なし、URLなし。すべてのビジュアルは LLM が生成 |
/pr-to-video | GitHub PR / コード変更 → チェンジログ / 機能紹介 / 修正 / リファクタリングの説明動画 |
/embedded-captions | 既存のトーキングヘッド動画にキャプション/字幕を追加（映像自体はそのまま） |
/talking-head-recut | 既存のトーキングヘッド動画をデザインされたグラフィックオーバーレイでパッケージング — ローワーサード、データコールアウト、キネティックタイトル、プルクォート |
/motion-graphics | 短い、デザイン主導のモーショングラフィック — キネティックタイポグラフィ、統計/チャートヒット、ロゴスティング、ローワーサードオーバーレイ |
/slideshow | プレゼンテーション / ピッチデッキ / インタラクティブデッキ — 個別スライド、フラグメント、分岐、ホットスポット。出力はナビゲーション可能なデッキ、レンダリング動画ではありません |
/general-video | その他すべて — 長いまたは複数シーンの作品、静的なループ/ポスター、カスタムコンポジション |
曖昧さの解消（混乱しやすい場合のみ）:
- モーション優先（約10秒未満で、モーション自体がメッセージ）→
/motion-graphics、入力に関係なく。 - URL またはスクリプト — GitHub PR リンク →
/pr-to-video；製品/サイトなしで概念を説明 →/faceless-explainer。本当に不明瞭な入力 → 1つ質問する。 - 既存の映像 — 単なる発言の字幕 →
/embedded-captions；デザインされたオーバーレイカード →/talking-head-recut。どちらも映像自体は編集しません（再タイミング/再色付け/再フレーミング/並べ替えは NLE 編集であり、対象外）。 - プレゼンテーション / ピッチデッキ / インタラクティブデッキ（個別スライド、ナビゲーション、プレゼンターモード）→
/slideshow— 出力はナビゲーション可能なデッキであり、レンダリング動画ではありません。明示的な「スライドショー」リクエストは直接進みます；隣接するトリガー（「デッキ/スライド/プレゼンテーション/このページを変換」）は、/slideshowが作成前にそれがスライドショーであることを確認し、そうでない場合は適切な非スライドショーワークフローに切り替えます。 - 長さはガイドであり、制限ではない — 意図がワークフローを選択します。明らかに約3分より長い場合、または静的なループ/ポスター/カスタムフォーマットの場合にのみ
/general-videoに進みます。
マッチしたワークフローがインストールされていない場合
ワークフローを選択したら、それが実際に利用可能かどうかを確認してください。マッチしたワークフロースキルがインストールされていない場合は、推測に頼らず、ユーザーに先にインストールするよう指示してください：
- このワークフローのみ:
npx skills add heygen-com/hyperframes --skill <workflow-name>（例:--skill pr-to-video— ベア名、先頭の/は不要）。 - すべてのワークフローを一度に:
npx skills add heygen-com/hyperframes --all（コア + すべてのワークフロー、選択画面をスキップ）。
ユーザーが実行した後、ワークフローのスキルを読み直して続行してください。
ワークフローの詳細
/faceless-explainer
- 入力: 任意のテキスト — 説明されるトピック、記事、またはメモであり、販売されている製品やキャプチャするサイトはありません。
- 出力: 顔出しなしの説明動画 → MP4、すべてのビジュアルはシーンごとに LLM が生成（タイポグラフィ/抽象図/図表/データビジュアライゼーション）；
pin-and-paperプリセットを同梱。（最適な長さ 30～90秒）。 - トリガー: 「Xについての顔出しなし説明動画」、「DNSの仕組みを動画で説明して」、「この記事を説明動画にして」、「私のメモから説明動画を作って」。
/pr-to-video
- 入力: GitHub プルリクエスト — PR URL、
owner/repo#N形式の参照、または「このPR」 —ghCLI 経由で読み取り（スクレイピングするサイトではありません）。 - 出力: コード変更の説明動画（チェンジログ / 機能紹介 / 修正 / リファクタリング）→ MP4 — diff ハイライト、before/after、ファイルツリー + 影響シーン。≤（最適な長さ 30～90秒）。
- トリガー: 「このPRの動画を作って」、「PR #1187 をチェンジログ動画に変換して」、「github.com/org/repo/pull/123 からリリースノート動画を作って」。
/embedded-captions
- 入力: 字幕を追加する既存のトーキングヘッド動画（MP4）— 実際の映像であり、URL や概要ではありません。ローカルで文字起こし（Whisper、APIキー不要）され、マット処理（RVM）により被写体がキャプションを隠せるようになります。
- 出力: 同じ映像はそのままで、キャプションレイヤーが追加されます — 標準（逐語的なローワーサードレール + 被写体の背後に埋め込まれたクライマックス）またはシネマティック（すべてのキャプションが被写体の背後に合成されます）。任意の長さ。
- トリガー: 「この動画にキャプション/字幕を追加して」、「被写体の背後にキャプション」、「私のクリップにシネマティックキャプションを」。
/talking-head-recut
- 入力: オンスクリーングラフィックでパッケージングする既存のトーキングヘッド/インタビュー/ポッドキャスト動画（MP4）— 実際の映像。ローカルで文字起こし（Whisper）。クリップはそのままフル再生されます。
- 出力: 同じ映像に、タイミングを合わせたグラフィックオーバーレイカード — キネティックタイトル、ローワーサード、データコールアウト、プルクォート、サイドパネル、ピクチャーインピクチャー — がトランスクリプトに同期されて追加されます。任意の長さ。
- トリガー: 「この動画をパッケージングして」、「私のトークにグラフィックオーバーレイ/ローワーサード/データコールアウトを追加して」、「このインタビューをグラフィックパッケージされた編集に変換して」。
/motion-graphics
- 入力: モーション自体がメッセージである、短くデザイン主導のモーショングラフィック — 通常約10秒未満。ジャンル：キネティックタイポグラフィ、統計/数字のカウントアップ、チャートヒット、ロゴスティング、ローワーサード/オーバーレイ、または検索駆動のページ/ツイート/ヘッドラインショット。
- 出力: 短いモーショングラフィック → MP4 または透明オーバーレイ（アルファ WebM/MOV）— ローワーサード/コールアウト用。
- トリガー: 「8秒のロゴスティング」、「この統計をアニメートして」、「キネティックタイプのイントロ」、「このツイートをモーショングラフィックに変換して」、「透明なローワーサードオーバーレイ」。
/slideshow
- 入力: 作成するプレゼンテーション / ピッチデッキ / インタラクティブデッキ — 概要、アウトライン、またはスライドに変換する既存のページ。レンダリング動画のリクエストではありません。意図が曖昧な場合、スキルは作成前に「これを HyperFrames スライドショーにしますか？」と確認します。
- 出力: 実行可能な HyperFrames コンポジション + JSON アイランド。プレイヤーの
SlideshowControllerがこれを読み取って、GSAP タイムラインをナビゲーション可能なデッキに変換します — 個別スライド、フラグメントの表示、分岐シーケンス、ホットスポットナビゲーション、プレゼンターモード、スピーカーノート。成果物はデッキであり、MP4 ではありません。 - トリガー: 「ピッチデッキ/プレゼンテーション/スライドデッキを作って」、「インタラクティブデッキ」、「このページをスライドに変換して」、「プレゼンターモード付きスライドショー」。
/general-video
- 入力: 上記以外のもの — クリエイティブブリーフ、アニメートする単一の要素、構築中のコンポジションへの編集。入力と長さに依存しません。
- 出力: HyperFrames コンポジション（任意の長さ/フォーマット）。元のフロー：デザインシステム → プロンプト拡張 → 計画 → アニメーション前のレイアウト → ビルド（
hyperframes-*スキルに委譲）→ 検証。 - トリガー: 「タイトルカードを作って」、「これをアニメートして」、「長めのブランド/サズルリール」、「マルチシーンコンポジション」、「静的なループ/ポスター」、上記のどの行にも当てはまらない「動画を作って」。