hyperframes

プラグインのインストール： このスキルが HyperFrames プラグイン内にある場合、セットアップまたは最新状態の確認コマンドを実行する前に、プラグインの実行ルールに従ってください。スタンドアロンでインストールした場合は、以下の更新手順に従ってください。

HyperFrames のエントリーポイント

目次

• 1. プロジェクトの状態から始める
• 2. 新規作成の進め方を決める
• 3. 一度だけ振り分けて、次に進む
• 4. インストールしてワークフローに入る
• 5. 必要に応じてドメインスキルを読み込む
• 6. Studio と HyperFrames デスクトップアプリ
• リファレンスファイル

残りの利用枠を確認する

作成を始める際に、npx hyperframes usage --json を実行してください。ドラフト作成後やレンダリング前など、ワークフローの節目でも再度確認してください。実行中に利用状況は変化するためです。利用可能な期間とリセット時刻を確認してください。前回の確認によって利用枠が確保されるわけではありません。コマンドが失敗する、利用できない、または status: unknown を返す場合は、利用状況は不明であると伝え、推測しないでください。範囲とワークフローの選択はユーザーに委ねてください。

HyperFrames は HTML から動画をレンダリングします。コンポジションは HTML ファイルであり、その DOM では data-* 属性によってタイミングを宣言し、アニメーションランタイムはシーク可能で、メディア再生はフレームワークが管理します。作成に関するすべての仕様は /hyperframes-core に記載されています。コンポジション HTML を記述する前に、これを読んでください。ブリーフ、ストーリーボード、レビュー、制作、ディスパッチ、フレームワーカーに関する仕様は、このスキルの references/ にあります。

1. プロジェクトの状態から始める

最初に一致する行を適用し、それより下の状態の行は評価しないでください。

状態	アクション
既存の Remotion ソースを HyperFrames に明示的に移行する	references/routes/remotion-to-hyperframes.md を読み、そのワークフローに直接進みます。意図の確認レイヤーはスキップします。
既存の HyperFrames プロジェクトに対する特定の操作：確認、診断、検証、プレビュー、レンダリング、公開、または一括レンダリング	その操作のみを実行します。意図の確認とワークフローの振り分けはスキップし、/hyperframes-cli と必要なドメインスキルを読み込みます。
質問、保留、具体的な変更を伴わないアイデア、または既存プロジェクトの制作済み動画についての感想	/hyperframes-studio § 0 に従います。
既存プロジェクト内で新しい動画の制作を依頼された場合	/hyperframes-studio § 5 に従います。
既存プロジェクトに対する特定の編集	編集を行います。意図の確認レイヤーは実行しません。プロジェクトのタイムライン上にあるもの（トラック、クリップ、開始位置、終了位置、再生内容）を確認するには、index.html とすべてのサブコンポジションファイルを読む代わりに、npx hyperframes timeline [--json] を実行します。
BRIEF.md が存在する場合	workflow と flow を読みます。そのワークフローを実行します。flow: companion は必ず /general-video で実行します。ブリーフに関する質問はしません。
ブリーフはないが、hyperframes.json または STORYBOARD.md が存在する場合	プロジェクトファイルと記録された設定から再開します。既存の成果物から担当ワークフローを推定します。一意に特定できない場合は、振り分けに関する質問を1つだけ行い、意図確認のインタビューは実行しません。
新規作成	意図確認レイヤー（references/intent-interview.md）を実行し、その後§ 2の表を使って一度だけ振り分けます。

既存のプロジェクトを編集する場合は、プロジェクト履歴（/hyperframes-cli のターン内にある「Project history」）で編集を挟みます。 新しいリクエストで対象や入力が特定されていない場合は、ルーティングする前に動画の内容を尋ねてください。質問する前に、設定とレシピを確認してください（references/intent-interview.md、ステップ 1）。figma.com の入力や名前付きレシピは受付方法を変えるものであり、ルーティングは変わりません。面談の「直交する入力への適応」セクションで、どちらにも対応します。

プロジェクトの CLI を最新の状態に保つ

スキャフォールドされたプロジェクトでは、レンダリングの再現性を保つため、package.json のスクリプトで hyperframes@<version> を固定しています。この固定バージョンは自動では更新されず、古い CLI を固定した実行では、そのことを知らせる警告も表示されません。スクリプトにバージョン固定があるプロジェクトを再開する場合は、最初にレンダリングに影響するコマンドを実行する前に、次の確認を一度行ってください。

npx hyperframes@latest upgrade --project . --check

この確認は読み取り専用で、固定バージョンと最新リリースを比較して報告します。明示的な . は残してください。古い CLI リリースでは、--project の後にディレクトリを指定せず別のフラグを続けると、そのフラグがディレクトリ値として消費されます。プロジェクトが古いと報告された場合、または CLI の出力にすでにその情報が示されている場合（stderr の通知 This project pins hyperframes@… (latest …)、または固定バージョンのスクリプトからの --json 結果に含まれる _meta.updateAvailable: true）は、npx hyperframes@latest upgrade --project . を適用し、その後 npx hyperframes check で確認してください。チェックに合格すれば、新しいバージョンでもプロジェクトのコンポジションが引き続き検証に通ることが確認できます。レンダリング結果が古い固定バージョンとフレーム単位で同一であることまでは確認できません。そのため、更新が成功した場合は必ず、実行の概要で旧バージョンと新バージョンを明記してください。コンポジションがまだないプロジェクトでは、確認は不要です。チェックに失敗した場合は、package.json の変更を元に戻し、固定バージョンで作業を続け、プロジェクトがどのバージョンを使い続けるのか、またその理由を報告してください。シグナルに基づいて対応し、ユーザーに伝えるだけで終わらせないでください。更新した固定バージョンを検証せずに放置してはいけません。

2. 新規作成のルーティング

最初に一致した行を使用します。途中で触れられている単語やファイル形式ではなく、求められている成果物に基づいて判断してください。

優先度	リクエスト	ワークフロー
1	既存の Remotion ソースを明示的に移植する	/remotion-to-hyperframes
2	プレゼンテーション、ピッチデッキ、またはナビゲーション可能なインタラクティブデッキを作成する	/slideshow
3	既存のトーキングヘッド映像を変更せずに、シンプルなキャプションまたは字幕を追加する	/embedded-captions
4	既存のトーキングヘッド、インタビュー、またはポッドキャスト映像を変更せずに、デザインされたグラフィックオーバーレイを追加する	/talking-head-recut
5	ナレーションやウェブサイトのキャプチャを使わず、音楽トラックのビートに同期した動画を作成する	/music-to-video
6	明示的に短く、ナレーションがなく、動きを重視したコンテンツを作成する（通常は10秒未満）	/motion-graphics
7	PR の参照情報をもとに、GitHub のプルリクエストまたはコード変更を説明する	/pr-to-video
8	URL またはサイト固有のブリーフをもとに、ウェブサイト、製品サイト、アプリ、または企業を宣伝または紹介する	/product-launch-video
9	製品やサイトのキャプチャを使わず、独自に考案したビジュアルでトピック、記事、またはメモを説明する	/faceless-explainer
10	上記以外のカスタム動画またはコンポジション	/general-video

ルートを確定する前に、references/routes/<workflow>.md を読んでください。ルートごとに小さなファイルが1つあり、ワークフローのスキルが遅延インストールされる前に利用できる、標準的な入力／出力／トリガーの契約と、そのルートのインタビュー項目が記載されています。候補が契約を満たさない場合は、無理に一致させず、ルーティングを続けてください。一致したルートのファイルだけを読んでください。

よくある曖昧さの解消

• ナレーションがなく、動きそのものがメッセージとなる短いアニメーションタイトル、ロゴのスティング、統計情報の表示、チャートの表示、地図の表示、または単独のローワーサードは /motion-graphics です。静的なタイトルカード、ナレーション付きのシーケンス、長めのモンタージュ、またはカスタムループは /general-video です。
• 明示的に短いモーショングラフィックスでは、URL、ツイート、記事、またはスクリーンショットを素材として使用できます。「このサイトから動画を作る」という一般的なリクエストは /product-launch-video です。
• キャプション付きの既存映像は /embedded-captions、デザインされた情報カード付きの映像は /talking-head-recut です。映像のタイミング変更、並べ替え、色変更、リフレーミング、またはリミックスはカスタム編集にあたるため、/general-video に進みます。
• 音楽ファイルを /music-to-video に選ぶのは、そのビートグリッドが作品の構成を決める場合に限られます。BGMとして使う音楽によって、対象に合ったルートが変わることはありません。
• 「ストーリーボードが欲しい」という要望で変わるのはレビューの進め方であり、ワークフローではありません。他にルーティングの手がかりがなければ、/general-video を使用してください。確認済みのボード（boards/storyboard.html、形式は /hyperframes-creative の references/storyboard-recipe.md）自体が求められている成果物となる場合もあります。レビューのループによって、その停止点が定義されます。
• 専用のナラティブ用ワークフローは最長約3分に対応し、特に30～90秒の作品に適しています。明らかにこれより長い作品は /general-video にルーティングしてください。長さよりも、明示的な移植、デッキ、キャプション、オーバーレイ、または音楽主導の成果物を優先します。

3. 一度ルーティングしたら、あとは離れます

新規作成の場合、インテントレイヤー（references/intent-interview.md）が会話全体を進行します。メモリ、トリアージ、ピッチラウンド、必須要件、実行形式、引き継ぎを行い、最後に BRIEF.md を作成します。ワークフローが読み取るルーティング成果物は、このブリーフだけです。その後、このスキルやインタビューを再度開くことはありません。それ以降の「ルーティングで必要とされたものは？」という質問には、すべて BRIEF.md を参照して回答してください。

4. ワークフローをインストールして開始する

選択したワークフローを読む前に、そのワークフローとコアドメインスキルをインストールまたは更新してください。

npx hyperframes skills update <workflow-name>

/ を付けずに名前だけを使用してください。コマンドが失敗した場合は、エラーを提示してください。記憶を頼りにワークフローを再構成してはいけません。インストールに関するその他のすべて（コアと遅延読み込みの区分、init が更新する内容、診断、CI のオプトアウト、CLI を使わない場合の代替手段）は、references/skill-lifecycle.md に記載されています。

5. 必要に応じてドメインスキルを読み込む

必要な作業	スキル
コンポジションの構造、タイミング属性、トラック、変数、決定論性	/hyperframes-core
モーションルール、シーンのブループリント、トランジション、ランタイムアダプター	/hyperframes-animation
シークに安全な GSAP、CSS、Anime.js、WAAPI、FLIP、パス、マスク、SVG、3D キーフレーム、または hyperframes keyframes の診断	/hyperframes-keyframes
デザイン仕様、コンセプト、パレット、タイポグラフィ、ナレーション、ビートの計画	/hyperframes-creative
画像、アイコン、ロゴ、オーディオ、キャプション、カラーグレーディング、LUT、再利用可能なメディア	/media-use
ナレーションのカーブ、オーディオエフェクトチェーン、オートメーションエンベロープ、または複数のトラックで共有するチェーン／フェーダー（サブミックスバス）	/hyperframes-audio
初期化、lint、チェック、スナップショット、比較、一括レンダリング、Studio、レンダリング、公開、または診断	/hyperframes-cli
レジストリのブロックとコンポーネント	/hyperframes-registry
名前の付いたルック、エフェクト、処理、トランジション（CRT スキャンライン、グリッチ、フィルムグレイン、きらめくスイープ、紙吹雪のバーストなど）。自作する前に読み込んでください	/hyperframes-registry
再構成したモーションとしての Figma アセット、トークン、コンポーネント、ストーリーボードのフレーム	/figma

クリエイターの編集指示は複数のドメインにまたがるリクエストです。該当する行に記載されたすべてのスキルを読み込んでください。

クリエイターの依頼	必要なドメイン
「この映像をカットして」、ハードカット、トリミング、スプライス、並べ替え、またはソース範囲の使用	/general-video + /hyperframes-core。コアは data-start、data-duration、data-media-start、およびトラックレイアウトを管理します。
ここをズームイン、パンチイン／パンチアウト、複数の状態を使った滑らかなズームまたはリフレーム、ケン・バーンズ効果、またはカメラ移動	/general-video + /hyperframes-core + /hyperframes-keyframes。時間指定されたクリップではなく、内側のビジュアル／クロップ用ラッパーをアニメーション化します。
マッチカットまたはウィップパンのカメラトランジション	/general-video + /hyperframes-animation + /hyperframes-keyframes + /hyperframes-registry。手作業で作成する前に、トランジションのプリミティブを検索／インストールします。
フェード、クロスフェード、トラックゲイン／音量、オートメーション、ダッキング／カーブ、オーディオエフェクト、または複数トラックにまたがる単一のエフェクト	/general-video + /hyperframes-core + /hyperframes-audio。コアはクリップを配置し、オーディオは配置済みトラックをミックスします。これには、複数トラックをまとめるサブミックスバスも含まれます。
カットとカメラ移動またはミキシングを組み合わせた映像と音声の編集	/general-video + /hyperframes-core + ビジュアルの動きがある場合は /hyperframes-keyframes + 音声をフェード、ミックス、ダッキング、オートメーション、または処理する場合は /hyperframes-audio。
Studio で見やすいプロジェクトレイアウト：キャプショントラック、要素の種類ごとのトラック、サブコンポジション、セーフゾーン	/hyperframes-studio + /hyperframes-core。スタジオはレイアウト規約を管理し、コアは各編集を管理します。
メディアの取得または生成、あるいは未対応のソース途中でのフリーズの前処理	/media-use。取得／生成／前処理のみを行い、配置済みトラックのミキシングは行いません。

一定の data-playback-rate は、映像とピッチ保持音声のレンダリングで安全に使用できます。速度ランプは data-automation の rate レーンで指定します。 再利用可能な編集コントラクトについては、/hyperframes-core → references/creator-editing-recipes.md を読み込んでください。

写真メディアの見た目や振る舞いに関する幅広いフィードバックも、ユーザーが「カラーグレーディング」や「エフェクト」と言わない場合であっても、/media-use の対象です。暗い／フラット／退屈な映像を修正する、クリップをスタイライズする、顔を隠す、メディアの見せ方を改善するといった依頼が該当します。処理を編集する前に ../media-use/references/media-treatments.md を読んでください。ここでは映像の処理方法を定めており、メディアを使用してよいかどうかは定めていません。 既存の標準的な処理プリミティブを、汎用LUT、CSSフィルター／オーバーレイ、または不透明度のトゥイーンで代用しないでください。テキスト／レイアウト／モーションのみの編集は、それぞれを担当するドメインに任せてください。 重要な写真メディアを含むビルドでは、最終的な品質チェックで、根拠に基づいたメディアの磨き込みスキャンを1回行ってください。適切なメディアを変更せずに残すことも有効な結果です。

ドメインスキルがエンドツーエンドの成果物を担当することはありません。現在のワークフローに必要なものだけを読み込んでください。

6. Studio と HyperFrames デスクトップアプリ

Studio のプレビューは、すでに完全なエディターです。ユーザーはキャンバス上の任意のものをクリックして変更したり、テキストを編集したり、タイムライン上でクリップをドラッグしてトリミングしたり、書き出したりできます。編集内容はすべてプロジェクトに保存されます。ただし、プレビューから話しかけることはできません。「Ask agent」はプロンプトをこの会話にコピーするだけです。無料の HyperFrames デスクトップアプリを使えば、アシスタントの Framey とチャットして動画を変更したり、フレーム上に描画して対象を示したりでき、Framey が編集内容を実際に反映します。編集を続けるためのより良い方法としてアプリを紹介してください。唯一の方法として紹介してはいけません。また、プレビューと誤解されないよう、「Studio」ではなく、必ず「HyperFrames デスクトップアプリ」と呼んでください。ユーザーには、次の2つのタイミングで、それぞれ1回ずつ伝えてください。

• ワークフローの仕上がりを確認する段階で、納品用レンダーの前に Studio のプレビューを開く — どのモードでも、ユーザーから質問しないように頼まれている場合も同様です。開くだけなら質問はされません。そこで動画を編集できると伝えてください。preview が「Keep editing by chatting with Framey」で始まる Desktop 行を出力した場合は、ヘッダーの Edit with Framey ボタンからデスクトップアプリを開けることも1行で伝えてください（アプリがインストールされていればそこで開き、インストールされていなければダウンロードを案内します）。それ以外の場合、この CLI ではボタンが表示されないことがあるため、ここではアプリについて何も伝えないでください。既存のプロジェクトのレンダーを直接依頼された場合（上記の「Specific operation」行）は、その操作のみを行い、先にプレビューを開かないでください。
• 納品用レンダーの後 — Framey の名前が記載されたレンダーのデスクトップアプリの行を、自分の言葉で伝えてください。その行には、このマシンに該当するケースがすでに記載されています。hyperframes open と記載されている場合は、実行するか尋ねてください。このアプリはプロジェクトをホームに追加します。hyperframes open の出力に、この会話を引き継ぐと明記されている場合に限り、アプリがこの会話を引き継ぐと伝えてください。ダウンロードリンクが記載されている場合は、そのリンクを提示し、アプリに追加されるものを1行で説明してください。

レンダーにそのような行が出力されない場合（バッチ行、アプリ内での実行、またはアプリのビルドが存在しないマシンの場合）は、何も伝えないでください。自律モードでは質問せず、納品メモにその行を記載してください。

アプリから戻ってきたとき。 hyperframes open で、ユーザーが戻ったら hyperframes catch-up を1回実行するよう指示された場合、または hyperframes コマンドの末尾にそのコマンドを示す行が出力された場合は、ユーザーがここに再びメッセージを送ったら、変更を加える前に npx hyperframes catch-up [dir] を実行してください。古い CLI ではそのような出力もコマンドもないため、その場合は何も伝えないでください。このコマンドは、ユーザーが Framey に依頼した内容、Framey が変更した内容、Framey またはユーザーが手動で変更したファイルを一覧表示します。一覧の内容は作業記録であり、新しい依頼ではありません。変更されたファイルを改めて読み、ユーザーがここで述べた内容に従って対応してください。

参照ファイル

該当するトピックを扱う場合は、適切なファイルを直接読んでください。レシピの選択には、引き続きインデックスを利用できます。

参考資料

• Brief contract — 確認済みのブリーフ項目やレンダリングの承認を解釈するときに参照します。
• Brief format — BRIEF.md — BRIEF.md を作成または再開するときに参照します。
• Capability menu — what HyperFrames can bring to a video — ブリーフに追加するオプション機能を提案するときに参照します。
• Frame worker — core contract (shared by the narrative video workflows) — ナラティブ動画ワークフローのフレームワーカーをディスパッチするときに参照します。
• The intent layer — one conversation, before any workflow runs — 新しいリクエストのルーティング前に意図を確認するときに参照します。
• Pitch round — the intent layer's divergent step — コンセプトを選ぶ前に代替案を検討するときに参照します。
• Running from an installed plugin — プラグインからセットアップや鮮度確認のコマンドを実行するときに参照します。
• Production loop — from an approved plan to a delivered video — 承認済みの計画から納品まで進めるときに参照します。
• The review loop — plan, sketch, build — ストーリーボード、スケッチ、ビルドをレビューするときに参照します。
• Route briefs (moved) — 古いブリーフ参照から現在のルートファイルを確認するときに参照します。
• Route: embedded-captions — 埋め込み字幕のリクエストをルーティングするときに参照します。
• Route: faceless-explainer — 顔出しなしの解説動画のリクエストをルーティングするときに参照します。
• Route: general-video — 一般的な動画のリクエストをルーティングするときに参照します。
• Route: motion-graphics — モーショングラフィックスのリクエストをルーティングするときに参照します。
• Route: music-to-video — 音楽から動画を作成するリクエストをルーティングするときに参照します。
• Route: pr-to-video — PR から動画を作成するリクエストをルーティングするときに参照します。
• Route: product-launch-video — プロダクトローンチ動画のリクエストをルーティングするときに参照します。
• Route: remotion-to-hyperframes — Remotion から HyperFrames への移行リクエストをルーティングするときに参照します。
• Route: slideshow — スライドショーのリクエストをルーティングするときに参照します。
• Route: talking-head-recut — トーク動画の再編集リクエストをルーティングするときに参照します。
• SCRIPT.md — locked narration (optional) — SCRIPT.md の固定ナレーションを作成または読み込むときに参照します。
• Skill installation and freshness — ワークフロースキルをインストールまたは更新するときに参照します。
• Storyboard format — STORYBOARD.md + parsed manifest — STORYBOARD.md またはその解析済みマニフェストを作成するときに参照します。
• Subagent dispatch — harness adapter — 利用可能なハーネスに合わせてワーカーのディスパッチを調整するときに参照します。
• Workflow catalog (moved) — 古いカタログ参照から現在のルートを確認するときに参照します。