HyperFrames — ここから始める は何をしますか？
このスキルは HyperFrames HTMLベース動画フレームワークのローカルルーターであり、
heygen-com/hyperframes からミラーされています。
ミラーされたドメインスキルはこのフォルダのサブディレクトリとして存在し、
必要に応じて名前で読み込まれます。ユーザーの意図に基づいて、対応するサブスキルの
SKILL.md を実行前に読んでください。
上流の公式エージェントガイドも、このルーターと並んで
UPSTREAM-CLAUDE.md（スキルカタログ全体、インストール、メンテナンス）および
UPSTREAM-AGENTS.md（ワークフロー一覧）としてミラーされています。
— 正式な上流スキルの説明や npx skills add / npx hyperframes ワークフローについては、
それらを参照してください。
HyperFrames は HTML から動画をレンダリングします。コンポジションは HTML ファイルであり、
その DOM が data-* 属性でタイミングを宣言し、アニメーションランタイムは
シーク可能で、メディア再生はフレームワークが所有します。
完全なオーサリング契約は hyperframes-core/ にあります。
コンポジション HTML を書く前に必ず読んでください。
サブスキル一覧
| サブスキル | ディレクトリ | 使用タイミング |
|---|---|---|
| コンポジション契約 | hyperframes-core/ | HTML コンポジションの作成/編集 — data-* タイミング、クリップ、トラック、サブコンポジション、変数。コンポジション HTML を書く前に読むこと。 |
| CLI 開発ループ | hyperframes-cli/ | npx hyperframes の init, add, lint, check, snapshot, preview, render, publish, doctor, cloud/lambda レンダリング、またはビルド/レンダリング環境のトラブルシューティングを実行するとき。 |
| アニメーション | hyperframes-animation/ | アトミックモーションルール、マルチフェーズシーンブループリント、シーン遷移、モーションデザイン手法、ランタイムアダプター（GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU）。 |
| キーフレーム | hyperframes-keyframes/ | シークセーフな 2D/3D キーフレーム、GSAP タイムライン、CSS キーフレーム、Anime.js、WAAPI、FLIP、パス、マスク、SVG モーフ/ドロー、テキスト、3D 深度、さらに hyperframes keyframes 診断。 |
| クリエイティブディレクション | hyperframes-creative/ | アニメーション以外のクリエイティブディレクション: frame.md/design.md、パレット、タイポグラフィ、ナレーション、ビート計画、オーディオリアクティブ。 |
| メディア | media-use/ | BGM、SE、画像、アイコン、ブランドロゴ、音声、カラーグレーディング、LUT の解決/生成、TTS ボイスオーバー、文字起こし、背景除去、キャプション、プロジェクト横断的な再利用。 |
| レジストリブロック | hyperframes-registry/ | レジストリブロック/コンポーネントのインストールと配線（hyperframes add）。 |
| Figma インポート | figma/ | Figma コンテンツのインポート — アセット、トークン、コンポーネント、ストーリーボード → 再構築されたモーション。 |
ワークフロー（エンドツーエンドの成果物）
| ワークフロー | ディレクトリ | 使用タイミング |
|---|---|---|
| 一般動画 | general-video/ | 任意のカスタムコンポジションを任意の長さ/形式で作成/編集するフォールバックワークフロー — 長尺/マルチシーンの作品、ブランドリール、サイズルリール。 |
| モーショングラフィックス | motion-graphics/ | モーションそのものがメッセージとなる、短いデザイン主導のモーショングラフィック — キネティックタイポグラフィ、統計カウントアップ、チャート/データ可視化ヒット、ロゴスティング、ローワーサード。 |
| スライドショー / デッキ | slideshow/ | プレゼンテーション、ピッチデッキ、または個別スライド、フラグメント表示、分岐、ホットスポットナビゲーションを備えたインタラクティブデッキ。 |
| 製品ローンチ | product-launch-video/ | 製品/マーケティング URL、貼り付けられたスクリプト、または簡単な指示を製品ローンチ/プロモーション動画に変換。 |
| PR 動画化 | pr-to-video/ | GitHub PR（URL、owner/repo#N、または「この PR」）をコード変更の解説動画に変換。 |
| 音楽動画化 | music-to-video/ | 音楽トラックをビート同期動画に変換 — 歌詞動画、スライドショー、またはキネティックビジュアライゼーション。 |
| 顔出しなし解説 | faceless-explainer/ | 任意のテキスト（記事、メモ、トピック、概要）を、発明されたビジュアルを用いた顔出しなし解説動画に変換。 |
| 埋め込みキャプション | embedded-captions/ | トーキングヘッド動画にデザインされたキャプションを追加 — カラムフロー/埋め込みエンジンの背後にあるビジュアルアイデンティティ。 |
| トーキングヘッド再編集 | talking-head-recut/ | 既存のトーキングヘッド/インタビュー/ポッドキャスト動画を、タイミングの合ったグラフィックオーバーレイカード（タイトル、ローワーサード、データコールアウト、引用）でパッケージ化。 |
| Remotion 移植 | remotion-to-hyperframes/ | 既存の Remotion（React）コンポジションを HyperFrames HTML に移植。Remotion ソースの移植/変換/移行を明示的に求められた場合にのみ使用。 |
ルーティングルール
- 「動画/アニメーション/モーショングラフィックを作って」というリクエストに対しては、上の表から ワークフロー を選ぶ。該当するものがなければ
general-videoにフォールバックする。 - 選ばれたワークフローは途中で ドメインスキル（最初の表）を取り込む — ドメインスキル自体がエンドツーエンドのタスクを所有することはない。
- オーサリング契約を先に: コンポジション HTML を書く前に、
hyperframes-core/を読むこと。 - すべては
npx hyperframesを通じて実行される。プロジェクトの指示がローカルラッパーを指定している場合はそれに従うこと — ローカルラッパーを厳密に守る。Node.js >= 22 と FFmpeg が必要。
同期
これらのスキルは上流からミラーされています。更新の確認や取得は以下のコマンドで行います:
bash hyperframes/scripts/sync-hyperframes.sh --check # ドライラン
bash hyperframes/scripts/sync-hyperframes.sh # バックアップ付き同期
上流のソース、最終同期コミット、同期戦略については SYNC.md を参照してください。