Site to Reel（サイトからリールへ）

Webサイト自体を使って、そのサイトに関する短い縦型動画を作成します。実際のページ、実際のクリック、実際の状態。すべてのフレームは、時間の純粋な関数として1つのキャンバスレンダラーによって描画され、オフラインでキャプチャされ、エンコードされます。このスキルは、Dawas Shlefリールから抽出されたハウスワークフローです。examples/dawas-shlef/には、そのプロジェクトのタイムライン、音声ライン、キャプチャスクリプト、レビューノートが実例として含まれています。参考としてのみ扱ってください。異なる製品にそのシーンリストをコピーしないでください。

同時にロード：

video-director（クラフトの原則と、そのscripts/check_timeline.py、scripts/qa_video.pyを使用するため）
playwright-cli（すべてのブラウザステップに使用するため）

どちらかのスキルが欠けている場合は、その旨を伝えてください。それを回避して即興で行わないでください。

譲れない条件

これらはスキルを形成したブリーフに由来し、すべてのプロジェクトに適用されます：

実際のUIのみ。 ライブのローカルサイトをキャプチャします。実際のコントロールをクリックして実際の結果をキャプチャすることで状態変化を表示し、決して描画してはいけません。スクリーン、カウント、トーストをでっち上げないでください。
ユーザーの世界を元のままにしておく。
- サイトの再設計、変更、公開、展開をしないでください。
- キャンペーンを開始したり、フォームを送信したりしないでください。
- ブックマーク1つなどのデモデータのみを作成し、その後削除してください。作成前後のストレージを記録してください。
- 既存のユーザーデータを決して消去しないでください。
- 起動したサーバーとブラウザセッションを停止してください。ユーザーが停止を承認しない限り、ユーザー自身のサイトサーバーは実行したままにしてください。
画面にはパブリックURLを表示し、localhostは表示しない。 URLは早い段階（3秒以内）とエンドカードに表示されます。
主張はbrand.json → claims内に留める。 言葉はソースよりも強くなってはいけません。批評家は、例えばブリーフに記載がないのに「アカウント不要」と書かれている場合など、それ以外のものを指摘する必要があります。
音声。
- 人の声をクローンしないでください。
- 生成された音声が実際の人の録音であると決して暗示しないでください。
- TTSナレーターはクリエイターについて三人称でのみ話します。つまり「Xによって作られました」であり、「私はXです」ではありません。画面上の一人称の行はそれに合わせて変更します。
- ユーザーに、投稿時にAIオーディオのラベルを付けるように伝えてください。
未完成のカットを最終版と呼ばない。 無声カットは「アニマティック」です。ファイルは、音声が存在し、QAに合格した場合にのみ*-finalと名付けられます。
測定しなかったことを主張しない。 出力を見たり聞いたりすることはできません。実行したチェックと確認した静止画像を報告し、誰も見たり聞いたりしていないもの（TTSの発音やリアルタイムの感触など）については率直に述べてください。
ユーザーに代わって公開したり投稿したりしない。 依頼があればGitHubにアップロードできますが、Instagramやその他のソーシャルへの投稿は常にユーザー自身の責任です。

ワークフロー（3つの承認ゲート）

ステージ	あなたが作成するもの	ゲート
0. イントーク	1回の質問ラウンド（以下参照）。ブリーフ、アセット、サイトを読む。`brand.json`を記入。
1. 企画とルック	`TREATMENT.md`：一文のアイデア、フック、読み上げを含むビートシート、ヒーローモーメント、主張を含む。読み取り専用のサイトサーベイ。実際のレンダラーからの2〜4枚のスタイルフレーム。最初の`timeline.json`。	ユーザーが承認
2. 無声アニマティック	キャプチャ、完全なタイムライン、レンダリングおよびエンコードされたフレームを`*-animatic-silent.mp4`として出力。QA。エンコードされたMP4からのコンタクトシート、トランジション・ディテールシート、ストーリーボード。1回の修正ラウンド付き批評家レビュー。レビューノート。	ユーザーがペースとフレーミングを承認
3. 最終版	承認された映像に合わせたナレーション（録音、またはユーザーが選択した場合はTTS）。スコアとSFX。−16 LUFS、≤ −1 dBTPでのミックス。サブタイトル。`*-final.mp4`。QA。1回の修正ラウンド付き批評家。カバー。更新されたノート。	ユーザーが聴いて承認

ユーザーがいる場合は、ask-firstモードを使用してください。一度質問し、その後はすべての他の呼び出しを自分で行い、レビューノートにDECISION: … because …として記録してください。これにより、各決定は1回の返信で元に戻せます。

イントークの質問（1ラウンド、推奨オプションを最初に）

ブリーフとサイトがすでに回答していない質問のみをしてください。

何を、誰に： 動画が必ず伝えること、視聴者、キャプションの言語と方言。
プラットフォームと長さ： Instagram Reels 9:16、1080×1920（デフォルト）、45秒のメインカットと別途カットされた15秒バージョン、および16:9が必要かどうか（デフォルトでは不要）。
事実： 許可された主張、正確なブランドの綴り、クリエイター名、パブリックURL。
アセット： ブランドカラーとフォント、ロゴまたはワードマーク、表示するサイトの状態と機能。
音声： ユーザーがボイスオーバーを録音する（推奨）、または開示付きTTS、または音楽とキャプションのみ。音楽の権利について尋ねてください。
境界： 触れてはいけないもの（サイトサーバー、既存のユーザーデータ、フォーム）。

「今すぐ動画を作成」で録音がない場合は、音声をどうするか尋ねてください。オプションは次のとおりです：音楽＋キャプション（音声なし）、ユーザーが録音、または生成ナレーター。TTSを選択した場合、インストールする前に何がインストールされているか確認してください。edge-ttsをインストールすると、スクリプトテキストがMicrosoftのオンラインサービスに送信されるため、最初にユーザーの承諾を得て、音声を選択させてください。

プロジェクトレイアウト

templates/project/を新しいプロジェクトフォルダにコピーしてから編集します：

brand.json            名前、ワードマーク、クリエイター、パブリックURL、パレットトークン、フォント、主張、neverSay、音声、セーフエリア
reel.html, reel.js    レンダラー（ブランドニュートラル、すべてをタイムラインから読み取る）
vo-lines.json         VO行：[開始秒, テキスト, 終了秒]
assets/fonts, assets/icons, assets/previews
capture3x/            キャプチャ + boxes.json（tools/capture.jsの出力から書き込まれる）
tools/
  survey.js           読み取り専用ページサーベイ（見出し、リンク、Y位置、ストレージキー）
  capture.js          キャプチャ＋コールアウトボックス、デモデータの作成と復元
  cli3x.config.json / cli4x.config.json / render.config.json  playwright-cli設定
  build_timelines.py  brand.json（+ vo/*.json）からtimeline.json + timeline-ad15.jsonを生成
  styleframes.js, stills.js, render-frames.js, shot-storyboard.js   run-codeスクリプト
  make_vo.py, make_audio.py, make_srt.py                            音声、サウンド、サブタイトル
  review_frames.py, storyboard.py                                   エンコードされたMP4からのシート

コマンド

CLI は node "<argo>/node_modules/playwright/cli.js" cli、またはインストールされていれば単に playwright-cli を意味します。すべての run-code スクリプトは単一の async page => {} です。パラメータはページURLのクエリで渡され、--raw は戻り値のみを出力します。

# キャプチャ（ローカルサイトは既に実行中、クリーンなインメモリセッション）
CLI -s=cap open --config=tools/cli3x.config.json "about:blank"
CLI -s=cap --raw run-code --filename=tools/survey.js
CLI -s=cap --raw run-code --filename=tools/capture.js      # {"caps": ...} を capture3x/boxes.json に保存
CLI -s=cap close

# タイムライン + ゲート
python -X utf8 tools/build_timelines.py
python -X utf8 ~/.claude/skills/video-director/scripts/check_timeline.py timeline.json

# レンダリング（一時的な静的サーバー、その後停止）
python -m http.server 4380 --bind 127.0.0.1
CLI -s=render open --config=tools/render.config.json "http://127.0.0.1:4380/reel.html?tl=timeline.json&out=<abs frames dir>&times=1.2,24.5"
CLI -s=render --raw run-code --filename=tools/styleframes.js
CLI -s=render goto "http://127.0.0.1:4380/reel.html?tl=timeline.json&out=<abs frames dir>&from=0&to=1349"
CLI -s=render --raw run-code --filename=tools/render-frames.js   # 長尺動画：バックグラウンドまたは分割実行

# エンコード（無声アニマティック、最終版の場合は -i out/audio/<film>-mix.wav -map 0:v -map 1:a -c:a aac -b:a 192k -ar 48000 -t <dur> を追加）
ffmpeg -framerate 30 -start_number 0 -i <frames>/frame_%04d.png -frames:v 1350 -c:v libx264 -preset slow -crf 16 -pix_fmt yuv420p -r 30 -vf setsar=1 -movflags +faststart out/reel-animatic-silent.mp4

# 測定とレビュー（常にエンコードされたMP4から）
python -X utf8 ~/.claude/skills/video-director/scripts/qa_video.py out/reel-final.mp4 --beats timeline.json --lufs -16 --tp -1 --out out/qa-reel
python -X utf8 tools/review_frames.py out/reel-final.mp4 timeline.json reel
python -X utf8 tools/storyboard.py out/reel-final.mp4 timeline.json reel
CLI -s=render goto "http://127.0.0.1:4380/out/storyboard-reel.html?shot=<abs>/out/storyboard-explained.png"
CLI -s=render --raw run-code --filename=tools/shot-storyboard.js

# ステージ3
python -X utf8 tools/make_vo.py && python -X utf8 tools/build_timelines.py && python -X utf8 tools/make_audio.py && python -X utf8 tools/make_srt.py

Windowsでは、PYTHONIOENCODING=utf-8 を指定して Python を python -X utf8 として実行します。そうしないとアラビア語の出力が壊れます。

レビューループ

批評家。 ステージ2後とステージ3後に、新しいコンテキストのサブエージェントにMP4、タイムライン、シート、QAレポートを渡します。優先順位付きリスト（修正必須、修正推奨、微調整）、各項目にタイムコードと具体的な修正案を添えて要求します。読み取り専用、500語未満、問題のでっち上げは禁止。
1回の修正ラウンド。 1回の修正を適用し、エンコードされたMP4から再確認します。
限定修正。 一部のフレームに限定された修正の場合は、それらのフレームをバックアップし、その範囲のみを再レンダリングし、バックアップと比較します。変更範囲外のフレームは、再エンコード前にバイト単位で同一である必要があります。
批評家のレポートはモデル出力です。 それがユーザーの承認と見なされることはありません。

成果物

out/<film>-animatic-silent.mp4（ステージ2）と out/<film>-final.mp4（ステージ3）。
out/storyboard-explained.png、out/contact-sheet-<film>.jpg、out/review/、out/qa-*/。
timeline*.json、vo-lines.json、vo/、out/audio/（ミックスとステム）、out/subtitles-*.srt。
out/cover/reel-cover.jpg とその3:4グリッドプレビュー。
voiceover-script-*.txt、音声（エンジン、音声、開示）または未録音のいずれかとしてマーク。
review-notes.md：ffprobeメタデータ、構造、すべてのチェック（番号付き）、批評家テーブルとその修正、DECISION、率直に述べられた制限事項、正確なコマンド、ユーザーに委ねられた決定。テンプレートは references/report-template.md。

参考資料（該当するステージに達したら読む）

references/motion.md：カメラモデル、トランジション、テキストタイミング、コールアウト、キャプション、エンドカード、ホールド。
references/capture.md：サーベイ、キャプチャ、実際の状態の入れ替え、ボックス、デモデータの復元。
references/sound-and-voice.md：録音 vs TTS、映像へのVOのフィッティング、ヒーローサイレンス、スコア、ミックス、サブタイトル。
references/instagram-reels.md：フォーマット、セーフゾーン、フック、CTAの文言、カバー、AIラベル。
references/gotchas.md：遭遇したすべてのバグとその修正。
references/report-template.md：review-notesと最終メッセージのスケルトン。
examples/dawas-shlef/：完全な実例（キャプチャとフォントは含まれていないため、再キャプチャしてください）。

サイトからリールへ