leecyno1/boutique-skills

video-shotcraft：映画感のある製品ビデオ制作

自己完結型の制作機能ライブラリ：152 枚のショットレシピカード（デモ実装のソースコードと動的サンプルギャラリー付き）、検証済みの完全プロモーションテンプレート、再利用可能なコンポーネントとオーディオアセット、6 段階のワークフロー。 現在の焦点は Web/デスクトップ製品のプロモーションビデオですが、ショットカード自体は汎用的なモーション語彙です——個々のショットを任意のビデオに抽出して使用することもできます。

呼び出し時にモードを判断する

完全なプロモーションビデオには、相互にマージされない 3 つのモードがあります。素材収集、ストーリーボード作成、または実装を開始する前に、まずユーザーが明確に選択しているかどうかを判断します。すでに選択されている場合は、そのまま実行し、繰り返し質問したり、別のモードに変更したりしないでください。

1. テンプレートを直接使用する：Ink Press の既存の置き換えフローを維持します。template/TEMPLATE.md を読み、既存のショット構造に従って、ターゲット製品のスクリーンショット、コピー、ブランド情報を置き換えます。
2. 自律的自由制作：references/pipeline.md を読みます。エージェントはユーザーの既存の要件とプロジェクト内容に基づいて、ビジュアルディレクション、ショットマッピング、ストーリーボード、素材、オーディオを自律的に決定し、完成まで連続的に進めます。製品ブリーフ、スタイルフレーム、ショットマッピング、またはストーリーボードの段階でユーザーの確認を待って一時停止することはありません。
3. 共同制作：references/guided-free-creation.md を読みます。エージェントはまず根拠のある判断と提案を行い、ユーザーは製品ブリーフ、要件決定、ビジュアルディレクション、ショットマッピング、最終ストーリーボードを順次確認します。ストーリーボードが許可された後、references/pipeline.md の最終素材収集と制作段階に進みます。

ユーザーがプロジェクトパス、URL、スクリーンキャプチャ、またはページスクリーンショットを提供したが、まだモードを選択していない場合は、最初に最小限の読み取り専用製品チェックを実行します：製品のポジショニング、主要機能、ページビジュアル、表示可能な状態、および素材のリスクを理解します。ビジネスプロジェクトを変更したり、機密データを収集したり、ビデオコードを作成したりしないでください。チェック後、3 つのモードを説明し、以下を示します。

• Ink Press がその製品に適しているかどうか、適している/適していない具体的な根拠
• 自律的自由制作と共同制作がそれぞれ適しているかどうか、どの製品ビジュアルキューが保持される見込みか
• エージェントが推奨するモードとその根拠およびトレードオフ

次に、明確に尋ねます：「上記の製品チェックに基づき、×× モードの使用を推奨します。このモードで続行しますか？」 同時にユーザーに通知します：動的サンプルを閲覧し、ビデオで使用したいモーションエフェクトショットを選択するには、https://vincentwei1021.github.io/video-shotcraft/ にアクセスできます。

ユーザーがチェック可能なプロジェクトやページを提供していない場合は、3 つのモードを簡単に紹介してから尋ねます。Ink Press が既製のテンプレートだからといって、デフォルトでそれを推奨しないでください。

• ユーザーがテンプレートを選択：template/TEMPLATE.md をすべて読み、元のテンプレートフローに従って実行します。
• ユーザーが自律的自由制作を選択：references/pipeline.md をすべて読み、エージェントが自律的に進め、段階ごとに確認を待ちません。
• ユーザーが共同制作を選択：references/guided-free-creation.md をすべて読み、その中の確認ノードに従って協力します。
• ユーザーが未決定：ここで選択を待ちます。ユーザーに代わってデフォルトで選択したり、制作を開始したりしないでください。

例外その 1：ユーザーが Ink Press テンプレートを明示的に指定した場合、テンプレートモードが選択されたと見なします。 例：「Ink Press テンプレートを使って私の製品のプロモーションビデオを作ってください」。この場合、再度尋ねず、すぐに template/TEMPLATE.md をすべて読み、テンプレートルートに従って実行します。

例外その 2：ユーザーが特定のショットカードの使用または参照を明確に指定した場合、ショットの制約はすでに選択されています。 例：「deck-deal-flyin と row-embed を使ってこのビデオを作ってください」または「spotlight-hero-card のエフェクトを参考にしてください」。この場合、テンプレートを紹介したり、テンプレートの使用を尋ねたりしないでください。ギャラリー名解決ルールに従って指定されたショットを確認し、各カードをすべて読み、カードの「参考実装」に従って正確なデモソースコードを特定します。単一ショットはターゲット素材が明確になった後に実行できます。完全なプロモーションビデオで、自律的自由制作と共同制作のどちらを使用するかまだ説明されていない場合は、これら 2 つのモードのみを尋ねます。指定されたショットはその後の制作制約として扱われ、自動的に共同制作と見なされることはありません。

4 つの使用方法

1. 完全なプロモーションビデオ（テンプレートルート）：テンプレートビデオと非常によく似たエフェクトが必要な場合 → template/TEMPLATE.md を読み、「製品置き換えガイド」に従って素材をショットごとに適応させます。
2. 完全なプロモーションビデオ（自律的自由制作）：新しいスタイルが必要で、エージェントに自律的な決定を委ねる場合 → references/pipeline.md を読み、製品理解から最終チェックまで連続的に進め、途中で段階ごとに確認を待ちません。
3. 完全なプロモーションビデオ（共同制作）：重要な決定に参加したい場合 → references/guided-free-creation.md を読み、製品ブリーフ、要件決定、ビジュアルディレクション、ショットマッピング、最終ストーリーボードを確認します。許可後、パイプラインの最終素材収集から続行します。
4. 単一ショット/単一モーションエフェクト：references/shots/ からカードを選択（またはユーザーに gallery/ ギャラリーで選択させ）、カード全文を読み、「参考実装」に従って正確なデモソースコードを特定し、ターゲット素材に適応させます。

自律的自由制作と共同制作の境界

自律的自由制作は、クリエイティブおよびエンジニアリングの決定をエージェントに委ねます。エージェントはプロジェクトコンテンツから製品の重要ポイント、ビジュアルディレクション、ショットマッピング、ストーリーボード、素材処理、オーディオ計画を動的に導き出し、重要な判断を記録した後、直接実行します。安全に推測できない必要な入力がない限り、質問したり、段階ごとに一時停止したり、中間成果物の確認を求めたりしません。ユーザーの既存の明確な要件は常に制約であり、エージェントのデフォルト選択によって上書きされることはありません。

共同制作でのみ段階ごとの確認を使用します。デフォルトで references/guided-free-creation.md を読み、各ラウンドで手戻りを最小限に抑える 1〜3 個の質問のみを行い、製品ブリーフ、要件決定、ビジュアルディレクション、ショットマッピング、最終ストーリーボードで一時停止してユーザーの確認を待ちます。ユーザーはビジネスとクリエイティブの方向性を確認します。エージェントは収集方法、実装パラメータ、SFX ピン留めフレーム、Remotion プロジェクト、レンダリング、テクニカル QA を自律的に完了します。

共同制作において、ユーザーが「すべてあなたに任せる」または「確認をスキップして直接実行して」と明確に述べた場合、自律的自由制作に切り替え、この選択を記録します。自律的に進めると主張しながら、段階ごとの確認を要求し続けないでください。

機能からショットへのマッピングは「どのモーションシンタックスを使用するか」に過ぎず、完全なストーリーボードではありません。共同制作でマッピングが確認された後、エージェントはショットの順序、長さ、具体的なビジュアル、ページ状態、素材ソース、字幕、トランジション、SFX を引き続き提供する必要があります。完全なストーリーボードが確認された後にのみ、最終素材収集に進みます。ユーザーがギャラリーからショット名をコピーする場合、カード名または「カード名 · スタイル名」を提供するだけでよく、エージェントはローカルのレシピカードとデモソースコードを読み取ります。

核心理念

1. 既存ページの再現には実際のスクリーンショットを使用する必要があります。手書き UI は非再現シナリオに限定され、品質と表現の明確性は厳格な基準です。 製品の実際のページを表現する場合、最初のステップとしてローカル dev サーバーを起動し、ヘッドレスブラウザを使用して全ページの 2x テクスチャ、要素レベルの切り抜き、layout.json 座標テーブルをキャプチャします。非再現シナリオ（抽象的なオープニング/ブランドセグメント/独立した表示コンポーネント）では手書き UI が許可されますが、出版品質に達しないか、視聴者が何を表現しているか理解できない場合は、スクリーンショットルートに戻ります。ページデータはリスクに応じて処理します。公開デモデータは、製品ブリーフで明確に確認された場合にのみ保持できます。顧客、個人、内部、秘密鍵、リアルタイム、またはその他の機密データは、架空または匿名化されたコンテンツを使用し、収集前にフリーズする必要があります。

2. ビデオ全体のビジュアル言語は製品自体から成長する必要があり、無関係な「プロモーションビデオスキン」を別途作成してはなりません。 スタイルフレームを作成する前に、製品/Web サイトのデザインシステム、ソースコード、または computed styles からデザインスペックを抽出して書き込みます：フォントファミリーと太さ、フォントサイズ階層、行高/文字間隔、グリッド、スペーシング、配置、情報密度と角丸、背景/サーフェス/本文/強調/状態色、グラデーションとマテリアル。ビデオ内のすべてのタイトル、字幕、数字、テキストカード、タイポグラフィ、トランジション、パーティクル、ライトエフェクト、その他のモーションエフェクトの配色は、このトークンを再利用するか、控えめに拡張し、同時に製品のトーン、センス、質感に一致させる必要があります。テンプレートまたはショットカードルートを使用する場合、そのショット構造、モーションシンタックス、リズム、調整済みパラメータのみを継承します。フォント、タイポグラフィ、配色、マテリアルは、ターゲット製品に合わせて再スキニングする必要があります。ナレーションのニーズにより製品ビジュアルから逸脱する必要がある場合、共同制作では最初に理由を説明し、ユーザーに確認を求めます。自律的自由制作では、理由とトレードオフをデザインスペックに書き込んだ後、続行します。

3. 映画感はカメラワーク、光と影、リズム、サウンドの協調から生まれ、派手なアニメーションからは生まれません。 繰り返し認められているのは、単一の主人公の完全なアクションアーク（スポットライト→ズームイン→ホバー→定位置）、物理的メタファーによって駆動される加速度（カードを配る）、斜めの軌道を周回するクローズアップ、ライザー→インパクト→スパークルのサウンドパターンです。バッチ要素の入場はモーション自体に依存し、個々の発光には依存しません——装飾的なグリント/一斉発光は安っぽく、単一の高品質ライトエフェクトは許容されます。

4. 各ショットは 1 つのモーションエフェクトのみを表現します。重要な情報が着地した後は、呼吸のための間が必要です。 1 つのアニメーション手法（フライングイン/スタッキング/ページめくり）はビデオ全体で 1 回のみ主役を務め、繰り返しショットや繰り返しタグラインはすべて削除します。リズムの好みは一方的です：歴史的なフィードバックはすべて「スローダウン/停止」を指しており、「遅すぎる」というフィードバックは一度もありません——ブランドロゴが着地したら hold ≥1s、バッチモーションエフェクトの終了時には 0.5s の静止、オープニングの主人公のアクションには十分な 3s を与えます。タイムラインを組む際には、事前に hold/rest のフレーム予算を確保します。

5. 強リズムの BGM を使用するビデオでは、すべてのトランジションとモーションエフェクトをビートに合わせる必要があります。 ユーザーがすでに音楽を選択している場合 → 作業開始前にリズム分析を実行します（librosa グリッドフィッティングで実際の BPM/位相 + kick/snare/hihat の 3 分類ドラムヒット位置を取得）。グリッドがトランジェントカバレッジで検証された後にのみストーリーボードを作成します。タイムラインは拍記号 beatF(n) で記述し、スパースアクセントはグリッド補間点ではなく実際のトランジェントにピン留めします。レンダリング後、完成ビデオからオーディオトラックを抽出してカットポイントの誤差が ≤3f であることを確認します。方法論は references/music-beat-sync.md を参照してください。 BGM を配置したビデオの最終レンダリングでは、常に 2 バージョンを提供します：BGM 付きバージョン + BGM なしバージョン（SFX は保持）。bgm inputProp を使用して同じタイムラインからレンダリングし、ユーザーが後で自分で音楽を合わせられるようにします。

6. ショットカードモーションエフェクトを使用するには、まずギャラリーインデックスを解析し、正確なデモ実装コードを読み取る必要があります。 最初に gallery/api/library.json を使用してカード名と style-key を検証し、次にカードドキュメントの「参考実装」に従って特定の TSX を特定します。レシピカードはセマンティクスとパラメータテーブルを提供します。正確なデモソースコードこそが調整済みパラメータの真実です（イージング、時間配分、マスク解除タイミング、既知の落とし穴の回避方法）。適合性のための変更は許可されますが、カードに「既知の落とし穴/クリティカルポイント」としてマークされたパラメータはダウングレードしてはなりません——品質基準は引き上げるのみで、引き下げることはありません。カード名と理解のみに基づいて新規作成することは、すべての調整の蓄積を放棄することになります。

7. 共同制作では安価な確認を前置きし、自律的自由制作では同じ判断を実行記録として残します。 製品ブリーフ→要件から実行決定テーブル→テキストディレクション→スタイルフレーム→ショットマッピング→ストーリーボードの順序は変わりません。共同制作では段階ごとにユーザーに確認を求め、自律的自由制作ではエージェントが自律的に選択し、連続的に進めます。どちらのモードでも、方向性が定まっていない段階でショットごとの実装に入るべきではありません。

8. 検証はプロセス全体にわたって + 納品前に独立したレビュー。 フェーズ 5 以降、各ショットは npx remotion still で静止フレームを出力して自己チェックし、修正ラウンドごとにビデオ全体をレンダリング + ffmpeg でフレームを抽出して確認します。納品前に、クリーンなコンテキストのサブエージェントを派遣して独立した最終レビューを実行する必要があります。レビュー入力には、完成ビデオ、キーフレーム、製品ブリーフ、要件から実行決定テーブル、現在のモード確認または記録されたビジュアルディレクション/スタイルフレーム、機能からショットへのマッピング、ギャラリーカード名/バリアント、正確なデモ TSX、ギャラリー参考サンプル/抽出フレーム、最終ストーリーボード、選択されたショットカード、美的基準が含まれます。references/final-review.md に従って、計画の一貫性、機能の完全性、ショットの再現度、ビジュアル/オーディオの技術品質、データセキュリティを同時にチェックし、フレーム番号の証拠を付けて項目ごとに報告します。作成者は自分の成果に確証バイアスがあるため、最初のチェックは決してユーザーに任せてはいけません。

9. 決定論的レンダリング：Date.now()/Math.random() を禁止し、すべての擬似乱数は固定シード（mulberry32/ハッシュ、シードはインデックスから派生）を使用し、フレームごとに再現可能にします。

ワークフロー

自律的自由制作は references/pipeline.md に従ってフェーズ 0 から連続的に実行し、段階ごとにユーザーの確認を待ちません。共同制作はまず references/guided-free-creation.md に従ってフェーズ 0〜3（製品理解、ビジュアルディレクション、ショットマッピング、ストーリーボード確認）を完了し、その後パイプラインフェーズ 4 の最終素材収集から続行します。質問を繰り返したり、再設計したりしないでください。フェーズ 2〜3 では references/shots/ の各カードの frontmatter をスキャンし、エネルギーカーブに従ってショットを選択します。フェーズ 5〜7 では継続的に references/aesthetic-rules.md と照らし合わせて自己チェックします。フェーズ 6 では references/sound-design.md を読みます。ビート同期ビデオでは、プロセス全体で references/music-beat-sync.md を適用します。

すべてのモードで完成ビデオを納品した後、デフォルトでユーザーに一度、剪映プロジェクトファイルの同時エクスポートが必要かどうかを尋ねます（剪映で字幕の内容/フォントサイズ/色の変更、ショットの速度変更/並べ替え、オーディオの調整/置き換えが可能）。ユーザーが必要とするか、直接エクスポートを指定した場合、references/jianying-export.md を読んで実行します。

どのファイルをいつ読むか

タイミング	読むファイル
プロジェクト開始、モード未確定	最小限の読み取り専用チェックを実行し、3 つの完全プロモーションモードを提供して推奨
自律的自由制作	pipeline.md（エージェントがフェーズ 0〜7 を自律的に完了し、段階ごとに確認を待たない）
共同制作	guided-free-creation.md（フェーズ 0〜3 を確認）、その後 pipeline.md のフェーズ 4 から続行
ユーザーが BGM を選択済み	music-beat-sync.md（最初に分析、次にストーリーボード）
テンプレートルート	template/TEMPLATE.md 全文
ストーリーボード設計	sequences/ ブリッジテンプレート（ビデオ全体の骨格を先に入力）；shots/ すべての frontmatter；選択したカードの全文
ショットごとの実装	該当ショットカード全文 + 「参考実装」に従った正確なデモソースコード全文 + assets/lib/ 対応コンポーネント
サウンドデザイン	sound-design.md + assets/audio/
検収	final-review.md + aesthetic-rules.md 全文のチェックリスト（独立したサブエージェントが実行）
完成ビデオ納品後（剪映プロジェクトエクスポート）	jianying-export.md + jianying-export/ プラットフォームモジュール

アセットの使用方法

• assets/lib/ コンポーネントは 新しいプロジェクトにコピー した後、自由に変更できます（このライブラリを import しません）。 リスト：PageCam（2.5D ページカメラ——すべての「実際のページ」ショットの基盤）、DigitRoll、FlashCut、Caption、FlatPanel、VerticalTicker（3D 無限スクロールウォール）、helpers(rand/shake/camera/motion)。FlatPanel と helpers/camera には three + @react-three/fiber + @remotion/three の依存関係が必要です。その他は remotion のみ必要です。
• assets/scripts/capture-template.mjs をコピーし、上部の CONFIG（BASE/ルート/セレクター）を変更します。
• assets/audio/ サウンドエフェクトは直接コピーして使用できます（無料商用ライセンス、audio/ATTRIBUTION.md を参照）： audio/bgm/ はリズミカルな BGM のオプションです。audio/sfx/<カテゴリ>/ には 149 のサウンドエフェクトが 16 カテゴリに分類されています（transition impact riser camera ui text paper film light data scifi mech glass fluid crowd counter）。サウンドを探す際は、まずカテゴリディレクトリに移動し、リストは sound-design.md を参照してください。 用語集：sparkle のディレクトリ名は light/ です（sparkle/ はありません）。S1 では音色を禁止しますが、動作は禁止しません——画面上で実際のクリックやスイッチがある場合は、それに合わせた擬音を配置する必要があります。ただし、ui/ 内の半分は合成フィードバックサウンド（tone/bleep/notification）であり、個別に試聴する必要があり、ディレクトリ全体を許可してはいけません（リストは sound-design 3.3 を参照）。長いサンプルと軽いオーディオ素材にはそれぞれ特別な処理が必要なリストがあります（sound-design 4.1）。
• demos/ 各カードの実装ソースコード：ほとんどは自己完結型のグレースケールデモです（一部は demos/_fixtures/Fixtures.tsx の偽 UI シーンコンポーネントを import し、個別は demos/_textures/ の実際のページテクスチャを import します）。Remotion プロジェクトにコピーして実行できます。一部のデモは @remotion/motion-blur（CameraMotionBlur）を使用しており、npm i @remotion/motion-blur が必要です。リストは demos/README.md を参照してください。
• template/ 完全にレンダリング可能なプロジェクト：npm install && npx remotion render src/index.ts AiflPromo out/promo.mp4。
• jianying-export/ 剪映プロジェクトエクスポートモジュール：mac_draft.py（Mac 剪映 11.2 でテスト済み）、windows_draft.py（上流のサポートパスに従って実装、実機未検証）、smoke_test.py（新しい環境で最初に実行する最小限のスモークテスト）。フロー、タイムライン抽出、トラック作成方法は references/jianying-export.md を参照してください。venv + pip install pyJianYingDraft が必要です。
• gallery/ 静的ギャラリー：優先的にユーザーにオンラインバージョン https://vincentwei1021.github.io/video-shotcraft/library.html を提供します。ローカルで実行する場合は、最初に gallery/fetch-media.sh を実行してサンプルビデオを取得し（mp4 は git に含まれていません）、次に cd gallery && python3 -m http.server 4178 を実行します。152 カード 209 の動的サンプルビデオを閲覧/検索/複数選択してカード名をコピーできます——ユーザーがサンプルを見ながらショットを選択するのに適しています。