デモ動画
完成された、デザインされたアプリの動画が必要です。このスキルは、テスト済みでバッテリー同梱のパイプラインです。HyperFrames（HTML→動画）を基盤としていますが、再発見するのが面倒な部分（アプリの録画方法、このマシンのffmpeg回避策、正確な編集レシピ、ブランド化されたデザインシステム、時間を浪費する落とし穴）を追加しています。
ここにあるものはブランド化されていません。 ルックは1つのデザインで、交換可能なトークンを持ちます。動画がどのブランドのものかは、ステップであり、前提ではありません — フェーズ0Bを参照してください。
🚦 フェーズは作業順ではなくトピックでグループ化されています
以下の内容を順番に読む前に、これを読んでください。キャプチャの仕組みはまとめてドキュメント化されていますが、キャプチャが最初に行うことではありません:
コンセプトが先: これは何のため？ → アーク → PLAN.md（+ SCRIPT.md）→ 承認
（これは `video-plan` スキルの仕事であり、このスキルではありません） │
│
↓ ここで初めて映像が存在する ───────────────────────────────────────────────────────────────────┘
フェーズ0 環境 → 0B ブランド → 1A キャプチャ / 1B インジェスト → 3 準備 → 4 構成
→ 5 検証 → 6 レンダリング
最初に撮影する方が速そうに見えますが、そうではありません。見直しで変わるのはアークであり、合意されていないアークに対してキャプチャされたすべてのビートは再キャプチャされます。フェーズ0と0Bは早期に実行できる2つのことです。ツールをインストールし、パレットを決定します。フェーズ1のすべては、承認された計画を待ちます。
🚀 試してみる — 高速パス
🚨 呼び出し元がこのモードを選択します。あなたが選択することは決してありません。 あなたはそれを提案しても構いません（1つの質問で）。状況から結論を導き出してはいけません。特に以下は同意とはみなされません:
- スキルパッケージを添付または展開した場合 — それは誰かがツールをインストールする方法であり、それで何を作りたいかという声明ではありません;
- リクエストが探索的に聞こえる、または概要なしで来た場合;
- それが彼らが要求した最初のものである場合;
- あなたにとって高速パスの方が便利な場合。
「example.comの動画を作って」と言う人は、example.comの動画を要求しています。彼らに代わって使い捨ての動画を本当に望んでいると判断すると、完成品を期待していた彼らに、サイレントで非ブランドの1080pドラフトを渡すことになります。そして、スキップした部分（アーク、言葉、ブランド）こそ、後から追加できないものです。
不明な場合は、質問してください。 「これは簡単なスモークテストですか、それとも実際に誰かに見せる動画ですか？」一言で、どちらのモードにいるかが決まります。
以下の承認ゲートは、誰かが見る動画は間違えるとコストがかかるために存在します。使い捨ての実行はそうではありません。そして、キャプチャが機能するかどうかを確認するためにレビュアーにコンセプトラウンドを課すことは、良いツールが最初の10分で放棄される原因です。どちらの失敗も現実的です。どちらが該当するかを知っているのは呼び出し元だけです。
呼び出し元が選択した場合の高速パス:
- それを繰り返す — 一文で:「これをスモークテストとして受け取ります。承認ラウンドとブランドをスキップします。本プロセスを希望する場合はお知らせください。」確認は宣言よりも優れています。別のモードにいる呼び出し元に、最後の安い修正の機会を与えます。
- 2行の
PLAN.md— アークを一文で、3～4ビート。SCRIPT.mdなし、サインオフラウンドなし。 - ニュートラルパレット。 ブランド抽出なし、承認プレビューなし。
- サイレント。 ナレーションなし、ElevenLabsキーなし、トランスクリプトチェックなし。
- 1080pのみ。 4Kなし、公開ステップなし。
- 内部のみ — 顧客に見せたり、公開されることはありません。誰かに見せたいことが判明した場合、それは別の動画です。ドラフトに承認を後付けするのではなく、適切に実行してください。
このファイルの他のすべては引き続き適用されます — キャプチャパス、検証、不明瞭な同意の中止。これらは儀式ではなく、壊れた動画が問題なく見えるのを防ぐものです。
🛑 コンセプトゲート
このスキルはリクエストから始まりません。承認された PLAN.md から始まります（顧客向けのものには逐語的な SCRIPT.md も含みます）。上記の高速パスは唯一の例外であり、部屋の外に誰も結果を見ない場合にのみ利用可能です。
もし PLAN.md がない場合、それは video-plan スキルの仕事であり、1回のパスが必要です: 動画の目的、デモかガイドか、言語、アーク、ビートリスト、コピー。それを最初に行い、戻ってきてください。計画を書くためにアプリを読むことは問題ありません — 録画することはそうではありません。
計画を誰が書いたかに関係なく、あなたが負うべき2つのことがあり、どちらも質問であり、宣言ではありません:
最初に分析するかどうかを尋ねてください。 「アプリケーションを見て、何を表示するか提案しましょうか、それともすでにご存知ですか？」製品を適切に読むには実際の時間がかかります。呼び出し元は異なる開始画面や完成したアイデアを持っているかもしれません。あなたの仮定に彼らの時間を費やさないでください。
撮影前にビートリストを承認してもらってください。 全体の PLAN.md を再承認する必要はありません — 計画はすでに承認されています — しかし、あなたが録画しようとしている具体的なショットリスト: これら4つのビート、この順序で、これらのものをスポットライトします。1メッセージで済み、最後の安い瞬間です。キャプチャ後、順序を変更することは再撮影を意味します。なぜなら、異なるアークに対してカットされたビートは、既存のカットに収まらないからです。
チャットでキャプチャ元を確認してください。 どの環境が録画されるか、つまり製品のどのバージョンが対象かは、ユーザーの判断であり、ターゲットは動きます。
🚦 最初の決定: 映像はどこから来るのか？
被写体が到達可能なWebページの場合 → 自分で録画してください。画面キャストを要求しないでください。
到達可能なURL? ── yes ──┬── あなた自身のもの（または顧客のもの、概要あり）
│ │ └─▶ フェーズ1A · キャプチャ (references/playwright-capture.md)
│ │
│ └── 他の誰かのWebサイト
│ └─▶ フェーズ1A · キャプチャ、さらに references/foreign-sites.md
│ （許可ゲート、同意壁、スティッキーヘッダー、
│ レイジーロード矩形ドリフト — 最初に読んでください。キャプチャ
│ プリミティブは他人のDOMではそのままでは安全ではありません）
いいえ（デスクトップアプリ、Figma、ネイティブツール、モバイル、
またはユーザーがすでに .mov を提供している）
▼
フェーズ1B · 画面キャストを取り込む
自社アプリとサードパーティサイトは、異なるキャプチャパスを持つ同じパイプラインです。 構成、デザインシステム、検証レイヤー、ボイスオーバーは変わりません。ブランド抽出はライブWebサイトを読み取ります。変わるのは、デフォルトでは公開のみで、状態をシードできず、何も書き込んではならず、あなたの下で動くDOMを測定していることです。（認証されたサードパーティキャプチャは可能ですが、推奨されません: ドメインごとの明示的な承認、ブラウザサンドボックスの有効化、セッションファイルの最後の破棄が必要です — references/foreign-sites.md §0。）
これはスタイルの好みではありません — キャプチャパスの方が映像が良く、作業量もおよそ半分です。手動の画面キャストは、タイムラインをピクセルから逆解析し、作成者のリトライを探してカットし、すべてのスポットライトを手動で測定し、ブラウザのクロームをトリミングし、プライバシーを監査することを強制します。スクリプト化されたキャプチャは、これらの問題を構造上すべて排除し、クロームがなく、テキストサイズを選択でき、UIが変更されたときに再実行できます。同じフローで測定: 高密度のフレームスキャンが必要な71秒の画面キャスト vs すべてのソース時間と要素矩形を beats.json で受け渡す28秒のキャプチャ — そして完成フレームでは1.5倍のテキストサイズ。
それでも、ユーザーがすでに何かを録画している場合は、キャプチャする前にそれを見てください。 それは、ユーザー自身の製品に対するモデル（どの機能をどの順序で表示するか、ポイントは何か）をエンコードしています。その編集判断こそ、キャプチャパスが無料で提供しない唯一のものです。
リファレンスはオンデマンドで読んでください — プリロードしないでください:
| ニーズ | 読むもの |
|---|---|
| この動画はどのブランドのものか？（トークン、ロゴ、タイプ — Webサイトで可） | references/brand-style.md |
| アプリを自分で操作・録画する; 2倍速; カーソル; 認証; beats.json | references/playwright-capture.md |
| 対象は自分が所有していないWebサイト（許可ゲート、同意壁、スティッキーヘッダー、レイジーロード矩形ドリフト、ライブメディア） | references/foreign-sites.md — キャプチャ前に読んでください |
| コンテナまたはCIでヘッドレス実行（CJK/絵文字フォントの欠落、最初のキャプチャでChromiumがクラッシュ、「実行可能ファイルが存在しない」とインストール直後に表示） | references/container-capture.md |
capture-lib.js に何かを変更した後 | node <skill>/scripts/test-foreign-sites.mjs — ローカルフィクスチャ、ネットワーク不要; すべてのケースは出荷された欠陥です |
| スポットライトが間違ったピクセルをフレーミングしたが、座標は正しかった | references/foreign-sites.md §4 — boundingBox ではなく stableRect で測定 |
| 別の言語で再キャプチャ; タイムラインを再構築せずに既存のカットを再タイミング | references/playwright-capture.md §9-10 |
リトライだらけの .mov を渡された — クリーンテイクを選んでカットする | references/multiple-takes.md |
| ffmpeg/CLI が実行できない、「0 GB 空き」、bunx、権限 | references/pitfalls.md §6 + scripts/setup-render-env.sh を実行 |
| 正確なカット/クロップ/スピード/静止画/フレーム削除 コマンド | references/ffmpeg-recipes.md |
| ルック: ウィンドウ、スポットライト、カード、クロスフェード、フリーズフレーム | references/design-system.md (+ assets/template.html) |
| 2部構成の機能ガイドの構築（コンセプトパネル、アクションビート、振り付け） | references/guide-track-build.md |
| ナレーション / ElevenLabs ボイスオーバー、クオータと音声の落とし穴 | references/voiceover.md |
| 音声が実際にスクリプトを言っているか？（ブランド名、頭字語） | scripts/verify-narration.mjs — exit 1 = 修正 |
| アプリがキャプチャ前に空、500、または「オフライン」をレンダリングする | references/pitfalls.md §17 |
| TIMELINE.md コントラクト; 「0:12 引きずる」フィードバックへの対応 | references/timeline-and-review.md |
| スポットライトをどこに置くか？（決して目視で判断しない） | references/design-system.md → 「座標を決して目視で判断しない」 |
| どのパディングを使っても、スポットライトの端が何かをスライスし続ける | scripts/measure-spots.mjs — 代わりにレイアウトの空白を測定 |
| コントロールを本当にフレーミングできない（どの端にも6pxの帯がない） | references/design-system.md → 「時にはボックスがないこともある」 |
| アプリのクロームがキャプションカードの位置にある | references/design-system.md → ビートごとのカード配置 + カットでカードを分割 |
| 静止画がクリック後の状態を示している（空のスペースにスポットライト） | references/playwright-capture.md §16 — _hover マークでフリーズ |
| スクリプト化されたチャットメッセージが消えた; エージェントが「終了」したが、実際は終了していなかった | references/playwright-capture.md §17-18 |
| 「なぜ映像がフリーズ/位置ずれ/エラーになるのか」 | references/pitfalls.md |
| クリック時の奇妙な黒いリング; 修正が黙って何もしなかった | references/pitfalls.md §11-13 |
| チェックがPASSと言ったが、実際は間違っている | references/pitfalls.md §15 |
| すべてのレンダリング前（機械的監査、exit 1 = 修正） | scripts/audit-composition.mjs |
| 被写体が実際に見えているか？（スポットのクリアランス + カードの遮蔽; exit 1 = 修正、exit 2 = チェック不可） | scripts/verify-material.mjs |
| スナップショット後: スポットライトごとにズームクロップ（全フレーム読み取りはスライスされたテキストを見逃す） | scripts/crop-spots.mjs |
| フレームは音声が話していることを示しているか？（ナレーションガイド、トピックごと） | scripts/verify-topics.mjs |
| アプリがあなたの操作を記録する — 前にスナップショット、後に復元 | scripts/app-state.mjs |
| 動画の横にあるスタンドアロンのトレーニングドキュメント（要求された場合のみ） | references/companion-docs.md |
スナップショットでループを回し、レンダリングではない。 snapshot --at t1,t2,… は数秒で済みます。レンダリングは数分かかります。フレーミング、スポットライト座標、コピー、プライバシーを静止画で正しく設定し、その後一度レンダリングして動きを検証します。
フェーズ0 — 環境（マシン/セッションごとに一度）
1つのコマンドですべてのケースを処理します — macOS または Linux、正常なマシン、ffmpeg がないか削除されている、HyperFrames がない、または誤った「0 GB 空き」statfs バグ。手動で診断しないでください:
render_env="$(bash <skill>/scripts/setup-render-env.sh)" && eval "$render_env"
source <(…) ではありません。 Bash は source のステータスを報告し、それを供給するプロセス置換のステータスは報告しません。そのため、途中で死ぬブートストラップ（ネットワークなし、インストール失敗）は成功を報告し、そのエクスポートの半分を設定したままにします。最初にキャプチャすると、失敗が表面化し、失敗した場合には何も適用されません。
これは、hyperframes（固定版）をインストールし（存在しない場合）、完全な ffmpeg を解決し、このOSに実際にバグがある場合にのみディスクチェックをパッチし、HYPERFRAMES_FFMPEG_PATH、HYPERFRAMES_FFPROBE_PATH、PRODUCER_BROWSER_GPU_MODE、HYPERFRAMES_CLI をエクスポートします。
ffmpeg という名前のバイナリではなく、フィルタをプローブします。 パイプラインは fps/pad（フェーズ3 フレームピン留め）、crop（フェーズ1B クローム除去）、freezedetect（audit-composition.mjs + フェーズ6 デッドエアスイープ）を必要とします。2つのストリップビルドがすでに PATH 上にあり、単純なチェックを通過してからパイプラインの途中で失敗することがよくあります: Playwright のバンドル版 ffmpeg と Remotion のコンポジターバンドル。解決順序: 完全なシステム ffmpeg → brew（macOS）→ ~/.hyperframes-cli の ffmpeg-static/ffprobe-static パッケージ（すべてのプラットフォーム、sudo 不要 — Linux での通常のパス）→ ラップされた Remotion コンポジターバンドル（最後の手段として、freezedetect がないため警告が出るため、これら2つのフリーズチェックは黙って通過し、手動で検証する必要があります（落とし穴 #1、#16））。
次に、それが指し示すローカル CLI（$HYPERFRAMES_CLI）を介してレンダリングします。決して bunx/npx hyperframes ではありません — これらは毎回新しいコピーを再マテリアライズします。
…
[翻訳のために切り詰められています]