ConardLi/garden-skills

Motion Showreel

あるアイデアを、グラフィック、テキスト、または UI アニメーションを主軸とした動画に仕上げ、MP4 と再構築可能なソースコードを納品します。短編の持つアニメーション密度とクリエイティブな自由度を維持しつつ、チャプター構成で最長 20 分のコンテンツも制作可能です。

原理: ページは決定論的な render(t) を公開し、スクリプトがフレームごとにスクリーンショットを取得、ffmpeg で MP4 に合成します。映像、ナレーション、BGM、効果音はすべて timeline.js を共有します。ナレーションがない場合はコンテンツと音楽のビートに合わせて映像を構成し、ナレーションがある場合は実際の音声のタイムラインを基準に音楽と効果音を配置します。

良い動画はどこから生まれるか: 変化の密度、動きの質感、記憶に残る一点、音と映像の関係。この 4 つが通常、作品の印象を決定づけます。しかし、具体的にどう動かすか、どれだけ動かすかは、スタイルとコンテンツによって決まります。すべての動画にマルチアングル撮影、バネのような動き、画面いっぱいの効果音が必要なわけではありません。全体としては、いくつかの最低限のルール（「最低条件」参照）を守るだけで、それ以外はモデルにとっての出発点であり、上限ではありません。

映像としての感覚: 解説動画、プロダクトデモ、ナラティブ動画では、オブジェクトの動作と関係性がコンテンツの展開に伴って変化し、カット間の空間的なつながりを維持します。ナレーションの一文一文を静的なタイトルカードに置き換え、フェードイン、ズーム、背景パーティクルでごまかしてはいけません。絵コンテでは、まず「視聴者が何の変化を理解すべきか」、「主体の前後の状態はどうか」、「前のカットとどうつなぐか」を明確に記述し、その上でモーションエフェクトを選択します。ロゴ、ダイナミックタイポグラフィ、ループ、意図的に静止するスタイルは、それぞれの文法に従って制作します。絶え間ない動きや強制的な 60fps で良し悪しを判断しません。具体的な方法は references/craft.md の「連続的なナレーション」を参照してください。

---

適用範囲

ユーザーの要望	このスキルを使用する？
プロダクトプロモーション動画、モーションデザインポートフォリオ、UI アニメーション、ダイナミックタイポグラフィ/ビート合わせ、ロゴアニメーション、イントロ、ループアニメーション	✅
動画モデルで生成したグリーンバックの人物 + コードで作ったシーン、大きなテキスト、アニメーション	✅ 人物はユーザーが提供（references/formats.md H クラス）
ユーザーがナレーション原稿や録音を提供し、解説付きの MP4 を出力したい	✅ ナレーションドリブンモード。TTS はユーザー提供の原稿を使用する必要があります
クリックで進行、ライブプレゼンテーション、インタラクティブな Web デモ、または記事のナレーション原稿化	web-video-presentation を使用
Web ページ、ランディングページ、インタラクティブプロトタイプ、静的ビジュアルモック	❌ web-design-engineer を使用
写実的な人物の演技、実写感、既存素材の編集、動画モデルによる直接的な映像生成	❌

長さ: 最長 20 分（1200 秒）、ユーザーが確認した長さに従います。短編動画は 5～60 秒が適しており、長編動画を 20 分間の高密度ビート合わせにすることは避けます。2 分を超える場合は、references/long-form.md を読み、チャプターごとに計画、制作、レビューを行います。ユーザーが指定した長さと、ナレーションの実際の長さやコンテンツ量が矛盾する場合は、一旦停止して調整案を確認し、許可なくナレーションを切り詰めたり、速度を変更したり、動画の長さを変更したりしません。

Opus の長所とデフォルトの落とし穴

• 長所: 1 つのファイルに Canvas、SVG/DOM、WebGL、Three.js を混在させたり、セクションごとに異なるメディアを切り替えたりできます。動きは数式で正確に計算できます（閉じた形のバネ、ビートグリッド、サブフレームモーションブラー）。音声と映像は同じタイムテーブルを読みます。「静止画をレンダリング → 確認 → 修正」を自律的に長時間実行できます。美的判断力が高く、「全力を尽くしてください」という指示で驚くほど素晴らしい結果を生み出すことがあります。
• デフォルトの落とし穴: 制約がない場合、映像は暗い背景、中央揃えの大きなテキスト、すべての要素の同時フェードイン、紫/青のグラデーションに発光、固定カメラワークに偏ります。BGM は A マイナーの四つ打ち、ビートの強い部分にインパクト＋クラッシュシンバル、鐘の音でエンディング、というパターンに陥り、複数の動画が同じ曲のように聞こえてしまいます。そのため、まずリファレンス（映像と音声の両方）を見つけ、スタイルと禁止リストを明確に記述する必要があります。ただし、制約を絶対的なものにしてはいけません。このスキルのスタイルライブラリとテクニックライブラリはあくまで出発点であり、テーマに応じて自由に改造、ミックス、カスタマイズできます。
• 苦手なもの: 写実的な人物、複雑な手/布/髪の毛、リアルな物理シミュレーションを必要とするもの、フォトリアルなプロダクト（ただし、ユーザーがモデルや画像を提供する場合は除く）。これらに遭遇した場合は、スタイライズして処理するか、グリーンバックの人物＋コードで作ったシーンという役割分担に切り替えます。

---

ワークフロー

0 環境チェック（一度だけ）
1 要件確認 ──────── 必須項目を補完し、要件をまとめる → 🛑 ユーザー確認を待つ
2 brief.md ──────── リファレンス → 用途 + スタイル → Reel Read → 絵コンテ + サウンドプラン
3 スタイルフレーム ──── スタイル確定済み：3 枚のフレーム；未確定：3 方向それぞれ 1 枚 → 🛑 ユーザー確認を待つ
4 制作 ──────────── ナレーションあり：先に実際の音声とタイムスタンプを準備 → timeline → カットごと → プレビュー → 本番
5 BGM とミキシング ── BGM、効果音は独立してソースを選択；ナレーションがある場合は音声を優先
6 検収 ──────────── 技術チェック（プログラム判定、すべて合格必須）+ レビュー（静止画を見て問題をリストアップし、ユーザーに最終判断を委ねる）
7 納品

作業ディレクトリ：ユーザーの現在のディレクトリに <slug>/ を作成し、すべてのファイルをその中に配置します：brief.md、index.html、motion.js、timeline.js、score.mjs または score.tone.js（scaffold の --audio オプションに従う）、build.sh、fonts/、assets/、audio/、qa/、out/。

ステップ 0：環境

初回実行時に sh <skill>/scripts/setup.sh を実行します。Playwright と Chromium をインストールし、check-env.mjs を実行します。Node 18+ と ffmpeg が必要です。不足している場合はユーザーにインストール方法を伝え、代わりにシステムソフトウェアをインストールしないでください。ツールにはテストが付属しています：cd <skill>/scripts && npm test。

ステップ 1：要件確認（一旦停止してユーザーを待つ）

不足している項目を集中的に質問し、すでに提供されている情報を繰り返し質問しないでください。以下の情報は明確に決定する必要があり、固定のデフォルト値でユーザーの決定を代用することはできません。

必須情報	明確にすべきこと
コアテーマ、制作内容	何を表現するか、どのコンテンツを必ず含めるか
長さ	秒数または分数を明確に。多少の変動を許容するかどうか。1200 秒を超えないこと
横画面または縦画面	選択に応じて実際のサイズを決定。ユーザーが 1:1 など他のアスペクト比を明示的に指定できるようにする。解像度、フレームレートは提案可能であり、確認サマリーに記載する
BGM ソース	AI 自動作成 / ユーザー提供。ユーザーは明示的にオフにすることも可能
効果音ソース	AI 自動作成 / ユーザー提供。BGM とは別に選択可能。オフにすることも可能
ナレーション方法	ナレーションなし / AI TTS / ユーザー提供の録音

条件付き必須：TTS を選択する場合、ユーザーがナレーション原稿を提供する必要があります。代わりに作成、補完、変更して合成することはできません。同時に、TTS サービスと必要な API 設定を明確にします（既存の設定は再利用し、認証情報は環境変数を使用し、brief に記述しない）。Gemini、MiniMax、およびカスタムアダプターをサポートします。必要に応じて references/narration.md を参照してください。ユーザー録音を選択する場合、録音ファイルまたはアクセス可能な URL が必要です。ユーザー BGM/効果音を選択する場合、対応するファイルが必要です。ナレーションの言語、声色などは原稿や設定から判断できるものはサマリーに記載し、そうでない場合は併せて質問します。

オプション情報：関連資料、対象視聴者と公開プラットフォーム、テーマスタイル。対象視聴者とプラットフォームが提供されていない場合は、コンテンツから推測し、サマリーでその旨を説明します。スタイルが提供されていない場合は、スタイルフレーム段階で 3 つの方向性を提案するために保留します。

素材の扱い：ユーザーがすでに具体的なコンテンツを提供し、AI による生成を許可している場合は、それに基づいて制作します。ユーザーが十分な具体的コンテンツを提供していない場合は、必要な資料を質問します。テーマに基づいてオンラインリサーチを行い、出典を保持することもできます。ナレーション原稿がある場合は、まず原稿から情報を抽出し、ユーザーに重複して記入させることはしません。AI はイラスト、シーン、抽象的なグラフィック、および明確に注釈が付けられた説明用コンテンツを生成できます。実際の製品機能、数値、ブランド素材については、引き続き「最低条件」を遵守し、架空の情報を実際のコンテンツとして偽装してはいけません。ブランドロゴや実際の製品スクリーンショットの要件については references/stack.md を参照してください。

• ユーザーが参考動画を提供した場合：まず inspect.mjs sheet <ref> --cells 30 で全体像を把握し、inspect.mjs grid <ref> --strips でカットポイントとそれらが位置するビートグリッド（BPM 候補、各セクションの歩数、各トランジションの連続フレーム）を計測し、inspect.mjs heat <ref> で各セクションのどこがどの程度の面積で動いているかを確認します。計測した数値は brief のリファレンス欄に記入します。構造とテクニックのみを学び、素材を流用しません。
• ユーザーが楽曲を提供した場合：ナレーションがない場合は、まず audio.mjs beats <track> --out <slug>/audio/beats.json を実行します。ナレーションがある場合は、音楽のビートは語りのリズムに従属します。
• 画面に表示する必要がある製品、ブランド、技術用語については、不確かな場合は事前に確認します。

補完後、テーマ、長さ、アスペクト比、BGM/効果音の各ソース、ナレーション方法、素材の状況をまとめ、一旦停止してユーザーに確認を求め、その後 brief を記述します。初回のリクエストで情報がすべて揃っている場合でも、まずサマリーを送信して確認を求めます。ユーザーが「全力を尽くして」「驚かせて」「お任せします」と言った場合、それはクリエイティブな選択の自由を与えるものであり、必須情報の省略や確認のスキップを意味するものではありません。ユーザーが特定の確認を明示的にスキップするよう指示した場合のみ、その指示を記録して続行します。

フリーハンドモード：クリエイティブな自律性を保持し、最低条件と技術パイプラインのみを守ります。スタイル、構造、テクニックは自身で判断でき、スタイルライブラリをまったく使用しないことも可能です。それでも brief を作成し、3 つの方向性を提供し、上記のルールに従って 2 回の確認を実行します。ユーザーが明示的に免除した確認を除きます。

ステップ 2：brief.md

まずリファレンスを見つける：制作を開始する前に、この動画（このテーマ＋この用途）に対して 1～2 つのリファレンス作品を選びます。映画のタイトルシークエンス、広告、ゲーム、モーションデザイン作品、デザインスタイルなどが考えられます。brief には「何を学ぶか」（構図、リズム、カメラワーク、配色理論、音楽の構造）と「何を学ばないか」（キャラクター、特定のショット、メロディー、ロゴ、フォントファイル）を記述します。リファレンスは、どのルールよりも品質の上限を引き上げるのに役立ちます。

次に 3 つの候補構造を考える：例えば、旅、ビフォーアフター、カウントダウン、変形、ワンカット長回しなど。それぞれを 2～3 行で記述し、1 つを選択してその理由を明確にします。最初に思いつくアイデアは、往々にしてそのスタイルのありきたりなものです。

用途とスタイルは別々に選択します：

• 用途（何を撮るか、どのような構造で見せるか）は references/formats.md を参照し、該当するセクションのみを読みます。
• スタイル（どのように見えるか、どのように動くか、どのような音か）は、まず references/styles/INDEX.md を参照し、次に選択した 1～2 つのスタイルファイルのみを読みます。スタイルはそのまま使用するか、改造（1 つまたは 2 つのルールを置き換える）、ミックス（メインとサブ、またはセクションごとにメディアを切り替える）、または styles/_template.md に従ってカスタマイズできます。スタイルのルールは変更せず、ストーリー、ショット、構造はユーザーのテーマから導き出し、他の動画のものを流用しないでください。各スタイルファイルには「識別シグナル」と「最もありきたりなバージョン」のセクションがあります。テーマに応じて 2～3 つのシグナルを選択し（少なくとも 1 つはありきたりなものではないもの）、brief に、ありきたりなルールのうちどれを破棄したか、またはなぜ保持したかを明記します。ユーザーがスタイルを選択した場合、そのスタイルと一目でわかることを求めており、2～3 つのシグナルで十分です。
• 必要に応じて references/craft.md（テクニックライブラリ）も参照します。

references/brief-template.md に従って brief を作成します。核心は次のとおりです。

Reel Read:
  format: [用途、formats.md のタイプ]
  benchmark: [リファレンス作品・何を学ぶか・何を学ばないか]
  structure: [3 つの候補構造 → 選択したもの、理由]
  style: [styles/ のスタイル（改造点を含む）、またはミックス案、またはカスタムルール]
  signals: [選択した 2～3 つの識別シグナルとその理由；破棄したありきたりなルール]
  takeaway: [視聴者が覚える一言または一つの映像]
  hook: [最初の 1 秒に何が起こるか]
  signature: [記憶に残るポイント：何秒目、どのようなテクニック]
  palette / type / motion / camera / texture: [選択したスタイルに従って具体的な値を記述]
  sound: [無音 / 合成（サウンドリファレンス、グルーヴ、ハーモニー、楽器編成、カーブ、sound.md 第 2 節参照）/ ユーザー楽曲（BPM、ドロップ）]
  audio-sources: [BGM と効果音のそれぞれのソース：AI / ユーザー / オフ]
  narration: [なし / ユーザー原稿 TTS / ユーザー録音；ナレーションがある場合、センテンスタイムラインのパス、音声優先]
  forbidden: [この動画の禁止リスト]

続いて絵コンテテーブルを作成します。ナレーションがない場合は、ビートグリッド＋絵コンテテーブルを保持します。ナレーションがある場合は、センテンスをショットとイベントに関連付け、ショット / センテンス ID | 説明する変化 | オブジェクトの開始/終了状態 | 継承するオブジェクトと空間 | キーイベントとその時間的根拠 | ショットとサウンド を記述します。1 つのショットで複数のセンテンスをカバーできます。1 つのセンテンスに複数のアクションを含めることができます。ナレーションの区切りをカット切り替えの指示として扱ったり、すべてのセンテンスを画面いっぱいに表示することを要求したりしてはいけません。実際の時間範囲は、音声準備後に埋めます。文字数からの推定時間を、最終的な同期の基準として使用しないでください。長編動画の場合は、別途チャプターテーブル、各チャプターの長さ、チャプター間の一貫性ルールを作成します。

ユーザーが「全力を尽くして」とだけ言った場合も、それを上記のような具体的な制約に変換する必要があります。そうしなければ、結果は運任せになります。

ステップ 3：スタイルフレーム（2 回目の停止、ユーザーを待つ）

プロジェクトを作成：sh <skill>/scripts/scaffold.sh <slug> [--audio synth|tone|layer|file|none]（synth = 第 1 段階のシンセサイザー；選択した score のみをコピー、file は準備済みの最終オーディオトラックを使用）。スキャフォールドのエンジンのデフォルト値は技術的な初期化のためだけに使用され、要件確認の代わりにはなりません。スターターはパイプラインが動作することを確認するためだけに使用し、映像とテキストはすべて置き換えます。

A. ユーザーがすでにスタイルを決定している場合（または明確なリファレンスがある場合）： 以下のコマンドの秒数は単なる例であり、実際にはこの動画のオープニング、記憶に残るポイント、エンディングの有効な時間を取得します。短編動画と長編動画の両方で 14.5 秒をそのままコピーしないでください。

1. 実際のコードを使用して、フックフレーム、記憶に残るポイントのフレーム、エンディングフレームを作成します。カラーパレット、フォント、テキストはすべて最終版を使用します。
2. render.mjs <slug> --still 0.6,7.2,14.5 --sheet を実行し、まず自分で確認します。明らかな問題を修正してからユーザーに提示します。動きの方向に依存する場合は、以下の指示に従って連続プレビュー（--start --duration）も別途出力します。
3. Reel Read のサマリー、絵コンテ概要、スタイルフレームをユーザーに送信し、「方向性はこれで合っていますか？」と質問します。

B. ユーザーがスタイルを決定していない場合（フリーハンドモードを含む）：3 つの明確に異なる方向性を提示します。ルールは styles/INDEX.md を参照：

• A はテーマ/ブランドに適合、B は異なるビジュアル言語（別のグループから）、C は大胆なもの（カスタム、ミックス、または構造的に非常に挑戦的で、少なくとも 1 つの方向性は既存のライブラリにないもの）。
• 各方向性について、ミニ Reel Read（スタイル、リファレンス、記憶に残るポイント、音楽の方向性、3～5 行）を書き、実際のコードでそれを最もよく表すキーフレームを 1 枚レンダリングします。3 つの方向性のページは同じプロジェクト内に配置し、?dir=a|b|c で切り替えます。B と C はこの 1 枚のキーフレームのためだけに機能し、再生可能な完全な動画にする必要はありません。
• render.mjs <slug> --directions a,b,c --at 14.5,2,0 を実行して 3 枚のフレームを一度にレンダリングし、ラベル付きの qa/directions.png として結合し、ユーザーに送信して「どれを選びますか、またはどのようにミックスしますか？」と質問します。

どちらの場合も実際にユーザーの返信を待ってから制作に進みます。TTS プロジェクトの場合は、同時にユーザー提供原稿のセグメンテーション案と音声サンプル（ユーザーが提供したテキストのみを使用）を添付して、サウンドの方向性も一緒に確認します。追加の必須停止ポイントは設定しません。ユーザーが事前に確認不要と明示的に述べている場合は、自分で選択し、理由を明記して自己チェック後に続行します。納品時に、選択しなかった方向性もユーザーに提供します（B の場合は qa/directions.png を添付、A の場合は他の 2 つの可能性のある方向性をそれぞれ 1 行ずつ記述）。これにより、ユーザーが後で方向性を変更したい場合に備えます。

動きの方向性に依存するスタイルの場合、静止フレームに加えて、6～10 秒の代表的なモーションプレビュー（6 秒未満の動画の場合は全編）を添付し、1 回の状態変化とその前後の継承をカバーします。事前に連続フレームを自分で確認し、跳びが発生していないことを確認します。プレビューはスタイルフレームと一緒に確認しますが、3 回目の必須停止は追加しません。ナレーションがまだ生成されていない場合は、動作の予行演習であることを明確に示し、音声と正確に同期されていると主張してはいけません。

ステップ 4：制作

制作前に references/stack.md（ページ契約、決定性、各技術の落とし穴）を読んでください。既成のコードが必要な場合は references/recipes.md を参照してください。

ナレーションがある場合は、まずナレーションのタイムラインを確定します：references/narration.md に従ってユーザー原稿を合成するか、ユーザー録音をインポートして、実際の長さとセンテンスのタイムスタンプを取得し、その後で映像を構成します。ユーザー録音の場合は、利用可能な文字起こしツールまたはユーザー提供の SRT/JSON からテキストと時間を取得する必要があります。信頼できるタイムスタンプがない場合、センテンスごとの同期が完了したと主張することはできません。長さの矛盾が発生した場合は、まず確認し、黙って埋めたり、切り詰めたり、速度を変更したりしません。実際の時間範囲をショットテーブルにインポートし、ナレーションの間や強調部分を保持し、音楽の小節に強制的に合わせません。2 分を超える場合は references/long-form.md に従ってチャプターごとに制作し、チャプターのキャッシュを保持します。

センテンスは同期の範囲を提供するだけであり、ショットとオブジェクトの動きは複数のセンテンスにわたって連続的に行うことができます。キーとなる変化に単語レベルの同期が必要な場合は、実際の単語の時間または手動で注釈を付けたアンカーポイントを使用し、narration.js を介してクエリを実行することで、映像と効果音が同じイベントを参照できるようにします。センテンスレベルの時間しかない場合は、センテンスレベルの同期を維持し、単語単位の時点を偽装しません。制作中は preview.mjs を使用して、音声付きでドラッグとフレームバイフレームの確認を行います。プレビューは同じ render(t) を駆動するだけで、正式なレンダリングには入りません。

1. すべての時点は timeline.js に記述し、ページと score.mjs はここからインポートします。ショットテーブルは SHOTS に記述し（検収時にショットごとに動きを報告）、意図的な停止は HOLDS に記述し（例：エンディング [[b(36), DUR]]）、息継ぎが必要な強いビートは DROPS に記述します。検収ツールがこれらを読み取ります。トランジションをビートに合わせる必要がある場合は、revealOn(ビート位置, トランジション時間, 表示開始点) を使用して開始点を逆算し、新しい映像が表示されるフレームがビートに正確に合うようにします。
2. ショットごとに制作します。各ショットの開始、中間、終了の 3 枚の静止フレームをレンダリングします。キーとなる状態変化とショットの継ぎ目は、別途連続プレビューで確認し、オブジェクトが突然リセットされたり、動作速度が急変したり、ショットが途切れたりしていないかをチェックします。静止フレームが美しいことは動作チェックの代わりにはなりません。高速な動きの場合は inspect.mjs strip を使用して連続フレームを確認します。
3. 決定性チェック render.mjs <slug> --determinism を実行します。合格しない場合は先に修正します。
4. 動画の長さが 30 秒以上、またはレンダリングが遅い場合は、まず低解像度プレビューを出力します：--size 960x540 --out out/proxy.mp4。
5. 本番レンダリング：まず build.sh の先頭で brief に従って FPS、SIZE、AUDIO、LOOP を設定し、次に sh <slug>/build.sh を実行します。これにより BGM が構築され、まず決定性チェックが実行され（合格しないとレンダリングされません）、次にレンダリングされ、続いてテキストフレームチェックが実行され（レビュー用資料のみ出力、ビルドはブロックしません）、最後に同じ仕様で技術チェックが実行されます（長さは timeline.js の DUR を使用）。--subframes、--dpr、--grain は後ろにパラメータとして追加し、スタイルの必要性に応じて使用します。これらのパラメータは処理時間を大幅に増加させるため、レンダリングを開始する前に予想時間を報告します。

ミックスオーディオトラックは AUDIO=file AUDIO_FILE=audio/final.wav sh build.sh を使用します。古い synth/tone/layer/none の構築方法も引き続き使用可能です。長編動画では build-long.mjs を使用して永続的なチャプターごとの構築を行います。詳細は references/long-form.md を参照してください。

ハードルール：

• 映像は t によってのみ決定されます：Math.random、Date.now、rAF、タイマー、CSS アニメーションを使用せず、フレーム間で状態を保持しません。
• フォントと素材がすべて読み込まれた後、READY = true を設定します。フォントはプロジェクト内でセルフホスティングします。
• レイアウトは stageSize() から返される幅と高さから導き出し、ピクセル値をハードコードしません。

ステップ 5：BGM、効果音、ミキシング

references/sound.md を参照してください。BGM と効果音はそれぞれ確認されたソースに従って制作します。ユーザーが BGM を提供し、効果音を AI で生成するなどの組み合わせを許可します。以下の表は AI 合成のエンジン選択です。エンジンのデフォルト値を使用して、確認済みの素材ソースを上書きしないでください。サウンドの方向性（リファレンス、グルーヴ、ハーモニー、楽器編成、カーブ）は brief ですでに決定されています。

段階	使用するもの	適しているもの
第 1 段階・内蔵シンセサイザー	score.mjs、Node 内のシンセサイザー（ドラム、ハンドドラム、ベース、パッド、アルペジエーター、マリンバ/グロッケン/カリンバ、オルガン、ボーカルパッド、FM、アンビエントノイズ、効果音、サイドチェイン、リバーブ、lo-fi 処理）、依存関係ゼロ	エレクトロ、UI、チップミュージック、アンビエント、lo-fi、ハンドメイド/おもちゃ感、ほとんどのモーション動画
第 2 段階・Tone.js	score.tone.js、ヘッドレスブラウザで Tone.js を使用してオフラインレンダリング：サンプリング楽器（audio.mjs samples salamander で CC BY ピアノをダウンロード）、コンボリューションリバーブ、よりリッチなシンセサイザーとエフェクト	リアルな楽器、空間表現、映画的なスタイルが必要な場合
外部楽曲	ユーザー提供の音楽（自作、ライセンス取得済み、AI 音楽サービスで生成したもの）	ユーザーがすでに BGM を持っている場合

• 構築：audio.mjs build <slug>/score.mjs または score.tone.js を実行すると、どちらも −14 LUFS の audio/music.wav を出力します。
• ユーザー楽曲：ナレーションがない場合は、まず audio.mjs beats を実行し（librosa が利用可能な場合は自動的に使用）、timeline を同期してから、score 内で S.load() を使用して効果音を重ねます。ナレーションがある場合は、音楽のビートを参考としてのみ使用し、音楽と効果音を音声に合わせて調整し、確認済みのナレーションタイムラインを移動しません。
• 無音：BGM、効果音、ナレーションがすべてオフの場合にスキップします。BGM のみをオフにすることは、動画全体が無音であることを意味しません。
• ナレーションあり：音楽は主旋律、密集した打楽器、大きなダイナミクスを控えます。効果音は情報伝達に役立つアクションのみに留め、キーワードや文頭を避けます。独立したトラックを保持し、narration.mjs mix を使用して、ナレーション中の音量調整、統一定ラウドネス、ピーク処理を行います。実際のセンテンスタイムスタンプを使用して映像を確認しますが、最終的な聴感はユーザーのレビューに委ねます。

ビルドのたびに、最終ミックスに対して audio.mjs check を実行し、数値とグラフを確認します。ホストが試聴をサポートしている場合はさらに聴き、数値の合格をもって「聴感確認済み」と見なしてはいけません。timeline.js に DROPS が記述されている場合、強いビート前のディップとリフトも計測され、呼吸がない場合は WARN が表示されます。

ステップ 6：検収

技術チェック：プログラムによって判定され、不合格の場合は納品できません。

node <skill>/scripts/inspect.mjs qa <slug>/out/final.mp4 --out <slug>/qa/final \
  --expect-size 1920x1080 --expect-fps 30 --expect-duration 16 --audio required   # 無音動画の場合は --audio none；ループ動画の場合は --loop を追加

ファイルのデコード可能性、サイズ、フレームレート、長さ、フレーム数、オーディオトラック、黒フレーム、ラウドネス、トゥルーピーク、およびループの継ぎ目（必要な場合）をチェックします。1 つでも FAIL があると、終了コードは 1 になり、修正する必要があります。渡されなかった仕様項目は NOT CHECKED としてリストされますが、この場合も検収合格とは見なされません。build.sh は自動的に仕様を適用します。レンダリングツール自体も、フレーム数が合わないファイルの公開を拒否します。

レビュー：人間の判断用であり、プログラム判定ではありません。抽出した静止画、スマートフォンサイズの抽出静止画、フリーズセクション（HOLDS で宣言されたものは意図的な停止としてマークされ、それ以外は無駄な空白かどうかを判断）、カットポイント、ショットごとの動きとフラッシュフレーム、テキストフレームのマーク画像（qa/text-*.png）、オーディオグラフを確認し、references/review.md のレビューテーブルに従って項目ごとに観察結果と最も深刻な 3 つの問題を書き留めます。数字やグラフがある動画の場合は、コンテンツと数値の整合性を確認します。修正後は、問題のあるセクションのみを再レンダリングし、その後全体をレンダリングします。このプロセスは qa/review_log.md に記録します。ホストがサブエージェントをサポートしている場合は、制作に関与していない別のエージェントにこれらの資料のみを見せて問題を指摘させます（review.md「独立レビュー」）。

ナレーションがある場合は、追加で narration.mjs check を実行し、センテンス時間のカバレッジ、オーディオ長と確認済み仕様の一致を確認します。原稿、映像、音声の一致をセンテンスごとにレビューします。自動チェックは聴感レビューの代わりにはなりません。長編動画はチャプターごとにレビューし、結合部分の映像、音声、タイムラインをチェックします。

レビュー結論はユーザーへの参考情報であり、ユーザー自身が動画を視聴する代わりにはなりません。該当しない項目は「該当なし」とマークします（例：無音作品の音声同期）。無理に点数をつけないでください。

ステップ 7：納品

ユーザーに以下の情報を伝えます：

• out/final.mp4 と out/poster.png のパス（poster：render.mjs <slug> --poster <t>）。
• brief.md：完全な構造化プロンプト、2 回の確認記録。再利用可能で、API 認証情報は含まれません。
• ナレーションがある場合は、ユーザー原稿、センテンスタイムライン、各トラックのソースを添付。長編動画の場合は、チャプターマニフェストと中断再開コマンドを添付。
• 技術チェック結果（すべて PASS）、レビュー記録の未解決問題、レンダリング時間。
• 再構築方法（sh build.sh）、一部のみを変更する方法。
• サードパーティ素材（フォント、ユーザー素材、楽曲）の出典とライセンス。事実系コンテンツについては、ユーザーに再確認を促す注意喚起。

レビュー結果と再確認証拠はプロジェクトの qa/review_log.md に保存し、今回の制作ファイルと一緒に納品します。

---

最低条件（すべてのスタイルで遵守すべきこと）

1. 要件と原稿：必須情報は確認済みであること。動画は 20 分を超えないこと。TTS 原稿はユーザーからのものであること。長さの矛盾は確認し、許可なく原稿を変更、切り詰め、または速度を変更しないこと。
2. 事実の正確性：製品機能、数値、名称はユーザーまたは信頼できる情報源のみから取得し、不確かなものはその旨を明記すること。
3. テキストの可読性：スマートフォンサイズの画面でもフォントサイズが読み取れ、読了に十分な表示時間があること（craft.md 第 7 節参照）。テキストがはみ出したり、重なったり、隠れたりしないこと。
4. 素材のライセンス：ロゴ、スクリーンショット、フォント、楽曲はすべて使用可能なものであり、納品時にリストアップすること。
5. 技術的正確性：決定論的レンダリング。技術チェックにすべて合格すること。黒フレームがないこと。エンディングが突然途切れないこと（エンディングの静止またはシームレスなループ）。
6. スタイルの一貫性：選択したスタイルのルールを最初から最後まで守り、brief の禁止リストに該当しないこと。

これら以外の、ショットの動きの量、バネを使うかどうか、効果音の密度、リズムの速さなどは、スタイルとコンテンツに応じて決定します（references/styles/ および craft.md 参照）。

---

ツールクイックリファレンス（S=<skill>/scripts）

目的	コマンド
依存関係のインストール / 環境チェック / セルフテスト	sh $S/setup.sh · node $S/check-env.mjs · cd $S && npm test
プロジェクトの作成	sh $S/scaffold.sh <slug> [--audio synth|tone|layer|file|none]
静止フレーム＋モンタージュ	node $S/render.mjs <slug> --still 0.5,3,7.2 --sheet · --range 0:15:1 --sheet
3 方向 / ポスター	node $S/render.mjs <slug> --directions a,b,c --at 14.5,2,0 → qa/directions.png · --poster 14.5 → out/poster.png
決定性	node $S/render.mjs <slug> --determinism
テキストフレーム（レビュー用資料）	node $S/render.mjs <slug> --text-check [--safe auto|none|T,R,B,L] → qa/text.json + マーク画像（build.sh が自動実行）
リファレンス動画の分析	node $S/inspect.mjs grid <ref> --strips（カットポイント＋ビートグリッド＋トランジション連続フレーム）· heat <ref>（各セクションのモーションヒートマップ）
プレビュー / 本番 / セグメント	--size 960x540 --out out/proxy.mp4 · 本番 sh <slug>/build.sh --subframes 2 --grain 4（仕様は build.sh の先頭で設定）· --start 6 --duration 3 --out out/seg.mp4
サウンド	node $S/audio.mjs build <slug>/score.mjs（または score.tone.js）· samples salamander · beats <track> --out audio/beats.json · check audio/music.wav（DROPS を読み取り）
ナレーション / 最終ミックス	node $S/narration.mjs tts … · import … · mix … · check …（パラメータは narration.md 参照）
長編動画の再構築	node $S/build-long.mjs <slug>/chapters.json（パラメータは long-form.md 参照）
音声付きプレビュー	node $S/preview.mjs <slug> --size 1920x1080 --fps 30（--audio audio/final.wav を追加可能。使用方法は stack.md 参照）
検収とレビュー資料	node $S/inspect.mjs qa out/final.mp4 --expect-…（build.sh が自動適用）· sheet · phone · strip --at 4.2 · loop · motion（SHOTS / HOLDS を読み取り：ショットごとの動き、跳び、フラッシュフレーム）

リファレンスファイル（必要に応じて読む）

ファイル	いつ読むか
references/formats.md	ステップ 2：用途。例：プロモーション動画、ポートフォリオ、UI アニメーション、タイポグラフィビート合わせ、ロゴ、データビジュアライゼーション、グリーンバック合成
references/styles/INDEX.md	ステップ 2：43 のスタイルのインデックス、3 方向ルール、ミックスルール。その後、選択した styles/<slug>.md のみを読む。カスタムは styles/_template.md を使用
references/craft.md	ステップ 2 と 4：リズム、モーション、トランジション、カメラワーク、タイポグラフィ、カラーパレット、テクスチャ、記憶に残るポイント、デフォルトテイストのリスト
references/brief-template.md	brief 作成時
references/stack.md	ステップ 4：ページ契約、決定性、各技術の落とし穴、フォント、素材、マルチアスペクト比、パフォーマンス
references/recipes.md	既成のコードが必要な場合
references/sound.md	ステップ 2（第 2 節：サウンドの方向性）とステップ 5
references/review.md	ステップ 6：技術チェック説明、レビューテーブル、独立レビュー、よくある問題、納品チェックリスト
references/narration.md	TTS、ユーザーナレーション、独立 BGM/効果音ミキシングを選択する場合
references/long-form.md	2 分を超える場合：チャプター計画、永続的キャッシュ、セグメントオーディオと中断再開ビルド