KishoreCR728/project-video

Project-to-Video

あらゆるプロジェクトをプレミアムなマーケティング動画に変換します。このスキルはプロジェクトのリポジトリ内（またはURLに対して）で実行され、製品の実態を分析し、実際の機能とUIに基づいたRemotion動画を生成します。

黄金律: パイプラインは「分析 → ストーリーボード → 承認 → ビルド → レンダリング」です。ユーザーがストーリーボードを承認する前にRemotionのコードを書いてはいけません。

AUTO MODE: ユーザーのリクエストに「フルオート」「中断なし」「一気に」「オートパイロット」、または明らかに中断のないエンドツーエンドの実行を求める表現が含まれている場合、オートモードに切り替えます。ストーリーボード承認の一時停止をスキップし（video/storyboard.md を書き、オートモードで進行中であることを伝えて、そのままビルドに進む）、未解決の質問は妥当なデフォルト（説明動画タイプ、1080×1920 @ 30fps、標準的な優先順位によるブランドトークン）を使用して自動決定し、実際のブロッカー（サイトにアクセスできない、3回の修正試行でも解決しないレンダリングエラー）が発生した場合のみ停止します。ローカル開発サーバーの起動には明示的なユーザー承認が必要ですが、「フルオート」とユーザーが実行コマンドを提供した場合、またはリポジトリに明確な標準開発コマンド（npm run dev、docker compose up）がある場合は、その承認も与えられたものとみなします。オートモードでも、ユーザーが後で確認し、シーンレベルの変更を要求できるよう、ストーリーボードをMP4と一緒に提供します。

フェーズ0 — 入力の検出

利用可能な情報を優先順位に従って確認します:

1. ライブURL（本番またはUAT/ステージング）— 最良の情報源。指定されていない場合はユーザーに尋ねます。
2. ローカル開発サーバー — リポジトリは存在するが何も起動していない場合、起動を提案します。package.json / docker-compose.yml / Makefile / READMEを読んで開発コマンドを見つけます。開始する前にユーザーに確認を求めます（環境変数、ポート、データベースは異なります）。起動できない場合は、コードのみの分析にフォールバックします。
3. コードのみ — リポジトリを静的に分析します。ビジュアルは純粋なSVGによる再現になります。

また、（文脈から、またはユーザーに尋ねて）以下を確認します:

• どのアーキタイプか？（explainer / demo / launch / teaser — references/video-archetypes.md を参照）
• どのアスペクト比か？デフォルト: 1080×1920 縦長、30 fps。16:9と1:1を追加レンダリングとして提供します。
• ブランドトークンはあるか？リポジトリにデザイントークンJSONがないか確認します。ない場合はライブサイトから色/フォントを抽出します。それもない場合は assets/brand-theme.json のデフォルトを使用します。

フェーズ1 — プロジェクトの分析

目標: 後続のすべての主張の根拠となる video/project-brief.md ファイルを作成します。

静的解析 — README、docs/、リポジトリ内のランディングページのコピー、ルート/ページ構造、機能モジュール、製品名とタグラインを読みます。

ライブ解析（URLが存在する場合） — scripts/capture-screens.mjs をPlaywrightで実行し、以下を行います:

• 主要ページ（ホーム/ヒーロー、ダッシュボード、コア機能画面3～5つ）を対象のアスペクト比とデスクトップサイズでスクリーンショット撮影
• アーキタイプがdemoまたはlaunchの場合、1～2のコアフローの短い（3～6秒）画面キャプチャを記録
• サイトの実際の色、フォント、見出しのコピーを抽出

video/project-brief.md に以下を書き込みます: 製品の内容、ターゲットオーディエンス、トップ5～7の機能（それぞれに証拠のソースを添付）、ビジュアルアイデンティティ（色/フォント/ロゴ）、キャプチャしたアセットのリスト（ファイルパス付き）。

ルール: 機能の捏造や誇張は禁止。 リポジトリ、ドキュメント、またはライブサイトに存在しないものは、動画に含めてはいけません。

フェーズ2 — ストーリーボード（必須の承認ゲート）

選択したアーキタイプのシーン構造と尺について references/video-archetypes.md を読み、次に references/storyboard-template.md を埋め、プロジェクト概要からのみ素材を使用してシーンごとに記入します。

• ナレーションは画面上のテキストであり、音声ではありません。画面上のテキストは短く（最大約8単語/行、同時に最大2行）、各テキストが読めるようにペースを調整します（画面上で最低約0.35秒/単語）。
• 各シーンのフレーム数を事前に割り当て、合計がアーキタイプの尺と正確に一致するようにします。
• 各シーンについて、どのビジュアルがSVGで、どのビジュアルがデバイスフレーム内の実際のUIキャプチャかをマークします（ハイブリッドスタイル — 標準ドキュメントを参照）。
• 最後に音楽とサウンドの提案セクションを含めます（ジャンル、BPMの雰囲気、アクセントを置く場所）。オーディオファイルのソース特定や埋め込みは行いません。

video/storyboard.md として保存し、ユーザーに提示して停止します。ユーザーが承認または編集するまで先に進まないでください。（例外: AUTO MODEでは、ストーリーボードの概要を提示し、待たずにすぐに続行します。）

フェーズ3 — Remotionプロジェクトのビルド

承認後、references/remotion-standards.md を完全に読んでください。これには必要なアニメーション値、トランジションルール、ハイブリッドSVG＋スクリーンショットデバイスフレームパターンが含まれています。その後、以下をスキャフォールディングします:

video/
├── remotion.config.ts
├── src/
│   ├── index.ts            # registerRoot
│   ├── Root.tsx            # アスペクト比ごとの <Composition>
│   ├── config.ts           # fps、尺、シーンごとのフレーム割り当て
│   ├── theme.ts            # すべての色/フォント/スペーシング — 単一の情報源
│   ├── scenes/             # ストーリーボードのシーンごとに1ファイル
│   ├── components/         # DeviceFrame, CountUp, AnimatedChart, ConnectorLine, ParticleField, TextReveal…
│   └── assets/screens/     # フェーズ1のキャプチャ（staticFile経由でインポート）

ハードルール:

• すべての色、フォント、角丸、影は theme.ts から取得します。シーン内でハードコードされた値は禁止。
• シーンの尺は config.ts から取得し、合計がアーキタイプの総尺と一致する必要があります。
• すべての図表/グラフ/アイコンはインラインSVGです。実際の製品UIは、フェーズ1のスクリーンショットを使用した DeviceFrame コンポーネント内でのみ表示されます — 実際のスクリーンショットが存在する場合に、SVGで製品スクリーンショットを偽装してはいけません。
• 全体をTypeScriptで記述、Remotion 4.x、シーン変更には @remotion/transitions を使用。

フェーズ4 — プレビュー、レンダリング、納品

1. npx remotion studio — すべてのアニメーションを確認し、実際の再生速度でテキストの可読性を確認し、タイミングを確認します。
2. 問題を修正し、npx remotion render <CompositionId> out/<archetype>-vertical.mp4 を実行します。
3. 要求に応じて追加のアスペクト比をレンダリングします。
4. 納品: MP4ファイル、storyboard.md、project-brief.md、および編集可能なプロジェクト。theme.ts と config.ts がリブランディングやタイミング変更のために調整すべき2つのファイルであることを伝えます。

参考ファイル

• references/video-archetypes.md — 解説動画（60秒）、デモ（75～90秒）、機能発表（30秒）、ティーザー（15秒）のシーン構造と尺。フェーズ0/2で読みます。
• references/storyboard-template.md — シーンごとのテーブル形式。フェーズ2で読みます。
• references/remotion-standards.md — アニメーション値、トランジション、ハイブリッドデバイスフレームパターン、SVGルール。フェーズ3の前に完全に読んでください。
• scripts/capture-screens.mjs — Playwrightキャプチャスクリプト。フェーズ1で実行します（node scripts/capture-screens.mjs <url> <outDir>; 事前に npm i playwright + npx playwright install chromium が必要です）。
• assets/brand-theme.json — フォールバックブランドトークン。可能な限りプロジェクトから抽出した値で上書きします。