repo-cinema

repo-cinema Director スキル

コードベースから Screen Studio 級の 60fps プロダクトデモ動画を直接作成します。アドホックな画面収録や目的のないカーソル移動ではなく、repo-cinema は analyze -> plan -> stage -> render -> verify の 5 段階決定論的パイプラインを実行します。

中核アーキテクチャ原則

1. ペルソナ優先のユースケース（analyze）: 内部デバッグ統計や生の設定画面を決して見せません。エントリポイント、CLI コマンド、ルート、コンポーネント、テストを読み取り、具体的な ペルソナ -> 課題 -> ユーザーアクション -> 持続的成果 のシーンを合成します。
2. 因果結合フレーミング（plan）: マウスポインタを追うのではなく、和集合バウンディングボックス bbox(trigger ∪ outcome) をフレーミングします。コンテンツ幅がステージの 70% 以上を占める場合は、水平フォーカスを fx = viewport.width / 2 に固定し、軸やヘッダー、右列が画面外にクリップされないようにします。
3. 静止読み取りホールド: アクションの前にカメラズームをイーズインし、インタラクション中および理解中は (zoom, fx, fy) を 100% 固定 して、視聴者がチャートやトースト更新を実際に読めるようにします。
4. 決定論的仮想クロック 60fps（render）: ページ読み込み前に仮想クロックシャム（Date、performance.now、requestAnimationFrame）を注入し、CSS トランジション、ECharts アニメーション、C2 最小躍度カーソル軌跡（sin^3(pi * u) 曲線、<=12% 速度膨張、+/-6 度傾き、矢印 <-> 指差しハンド変形）、およびデュアルクリックリップルがフレームごとに決定論的に FFmpeg に渡されるようにします。
5. コンタクトシート自己検査（verify）: 3x3 の contact-sheet.png + verify-report.json（ffprobe ストリーム検証 + 画面外クリックゼロ）を生成し、出荷前にすべてのパネルを目視検査します。

ユーティリティ CLI コマンド（repo-cinema）

グローバルインストールした場合、またはリポジトリから実行した場合（npx repo-cinema ... または node dist/cli.js ...）、各ステージは構造化ファイルを出力します。

# 1. 任意のリポジトリを読み取り、ユースケースシナリオを抽出（オプションで先に repomix を実行）
repo-cinema analyze --repo ./my-project --output ./out/dossier.json [--repomix]

# 2. 因果カメラ/カーソルストーリーボード JSON + ビジュアル HTML プレビューを構築
repo-cinema plan --dossier ./out/dossier.json --output ./out/storyboard.json --html ./out/storyboard.html --theme aurora-indigo

# 3. 4-in-1 ステージを構築（web-url | plugin-or-component | cli-terminal | hybrid）
repo-cinema stage --dossier ./out/dossier.json --plan ./out/storyboard.json --output ./out/stage.html [--url http://localhost:3000]

# 4. 決定論的 60fps CDP キャプチャ + 48kHz ステレオ SFX（またはオプションの TTS）
repo-cinema render --plan ./out/storyboard.json --stage ./out/stage.html --output ./out/demo.mp4 --gif ./out/demo.gif --audio sfx

# 5. ストリーム、テレメトリ境界を検証し、3x3 ビジュアルコンタクトシートを構築
repo-cinema verify --video ./out/demo.mp4 --telemetry ./out/demo.telemetry.json --contact-sheet ./out/contact-sheet.png --output ./out/verify.json

# または、5 段階パイプライン全体を 1 コマンドで実行:
repo-cinema run --repo ./my-project --out-dir ./out --theme aurora-indigo

ディレクターワークフロー

ステップ 1: リポジトリとオーディエンスを分析

repo-cinema analyze --repo <path> --output <dossier.json> を実行します。生成された useCases を読み取ります。

• 検出された archetype（web-app、desktop-or-ide-plugin、cli-tool、ui-library、hybrid）を確認します。
• リポジトリに専門ワークフローがある場合は、キャプションを洗練するか、ドメインに即したサンプルフィクスチャを追加します（注意: 個人データゼロ、開発者専用カウンターもゼロ）。

ステップ 2: ストーリーボードを計画し、フレーミングを承認

--html を付けて repo-cinema plan を実行し、storyboard.html を検査します（または beats、captionWarnings、cameraKeyframes を確認）。

• Anti-Slop キャプションリンターからの警告（「類を見ない」「次世代」「シームレス」、または 96 文字を超えるキャプション）を修正します。
• 開始フレーム（t=0）と終了フレーム（t=durationMs）が zoom: 1.0 でクリーンに収まり、シームレスな README GIF ループが実現することを確認します。

ステップ 3: ステージアダプターを選択

• web-url: アプリがローカルで動作中（http://localhost:PORT）。レコーダーはライブページに直接、仮想クロックシャム＋非侵入型カーソル/カメラ/キャプションオーバーレイを注入します。
• plugin-or-component: デスクトッププラグイン（Obsidian、VS Code、Raycast）または UI コンポーネントパッケージ。実際のコアモジュールを esbuild でバンドルしたダーク macOS Studio クローム内でレンダリングします。
• cli-terminal: ターミナルツール。同期的なコマンド出力、KPI タイル、成果インパクトカードとともに、ガラスの macOS ターミナル内で披露します。
• hybrid: CLI 実行とライブビジュアル出力およびアーキテクチャ図を並べて表示するマルチタブ macOS Studio。

ステップ 4: 60fps マスター + GIF + オーディオをレンダリング

repo-cinema render を実行します。

• デフォルトの --audio sfx は、依存関係ゼロの 48kHz ステレオマイクロ SFX（カーソル x に合わせたステレオパンクリック、穏やかなズーム風切り音、確認トーストチャイム）を合成します。外部 API キーは不要です。
• オプションの --audio tts --tts-provider <macos-say|edge-tts|openai|elevenlabs> は、ナレーションをマイクロ SFX とクリーンにミックスします。

ステップ 5: 検証と目視検査

repo-cinema verify を実行し、contact-sheet.png をファイル/画像ビューアーで直接検査します。

• passed: true、offscreenClicks: 0、および 9 個のキーフレームサムネイルすべてでテキストが読み取れることを確認します。
• 要素がビューポート端近くでクリップされている場合は、computeCausalFraming で marginPx を増やすか、zoom を 0.06 減らして再レンダリングします。

リファレンスガイド

• カメラ＆カーソル物理演算
• 4-in-1 ステージアダプター
• ストーリーボードスキーマ
• オープンソースアーキテクチャ＆帰属

よくある間違い

• 入力中やドラッグ中にポインタをフレームごとに追従する: 映像が酔いを引き起こします。ホールド中は常にビートごとにカメラフレーミングを固定してください。
• 実時間の setTimeout / リアルタイム画面キャプチャを使用する: CPU がスパイクするとフレームがドロップし、24～40fps の粗い録画になります。常に __rcStep(dtMs) でアニメーションを駆動してください。
• 広いチャートやテーブルでズームを強め過ぎる（> 1.35x）: Y 軸ラベルや右端のサマリー列がクリップされます。wideLockRatio は 0.70 に保ち、fx = width / 2 としてください。
• 生の大きな .mp4 バイナリを GitHub リポジトリにコミットする: パレット最適化された軽量 .gif + contact-sheet.png を docs/assets/ で追跡し、.mp4 は GitHub Releases に添付するか、ローカルで *.mp4 を無視設定にしてください。