Remotion スクリプトライターは何をしますか？

ビデオの目標と（オプションで）コードベースから、Remotion スクリプト JSON を生成します。これは、Remotion エージェントが追加の質問をせずに実装できるほど詳細な、シーンごとの仕様書です。基本原則: スクリプトはレンダリングの唯一の情報源 — すべての秒数、要素、アニメーション、ナレーションは数値と正確な文字列で記述され、「約5秒」や「紹介テキスト」のようなあいまいな表現は使用しません。同じ入力を受け取った 2 つのエージェントは、構造的に同一のスクリプトを出力しなければなりません。

使用する場合 / 使用しない場合

出力を Remotion でプログラム的にレンダリングする場合に使用: Web アプリのプロダクトデモ、アニメーションコード付きコーディングチュートリアル、モーショングラフィックス、データ可視化ビデオ、短尺ソーシャルアニメーション。
製品ビデオのコンセプトとビートがまだ決まっていない場合 → 最初に skills/creative/product-video を実行します。そのビートシートがこのスキルのシーンリストになります。
実写のトーキングヘッドビデオ → skills/creative/talking-head (Remotion は適切なツールではありません)。
静的グラフィック → skills/creative/social-graphics。
このスキルはスクリプトのみを作成します。React コンポーネントの実装、Remotion Studio でのプレビュー、レンダリングは、下流の Remotion エージェントスキルが担当します。

ルールファイル — スクリプト作成前に必読

rules/prompt-structure.md — スクリプトの基盤となる入力フィールド (goal、targetAudience、code、videoType、duration、style、animations、transitions)。入力を入力オブジェクトに正規化する際に参照してください。
rules/script-generation.md — 信頼できる出力 JSON 構造と生成手順。スクリプトを出力する前に必読。以下のスケルトンは要約であり、このファイルが契約です。
rules/animation-patterns.md — 承認されたアニメーション/トランジションの語彙と、正確な JSON 形状およびタイミングガイドライン。animation または transitionToNextScene の値を指定する際に必読。このファイルにないアニメーションタイプを独自に作成しないでください。
rules/scene-templates.md — 一般的なケース (タイトルカード、機能紹介、コードウォークスルー、データ可視化、アウトロ/CTA) の既製シーン JSON。シーンが既知のパターンに一致する場合に参照し、テンプレートから開始して編集してください。
examples/product-demo-example.json — 完成したスクリプトの例。粒度の調整のために参照してください。

情報収集

不足している情報のみを、一度のまとまったバッチで質問します (フィールド名は rules/prompt-structure.md に従う):

goal と targetAudience — ビデオは何を達成すべきか、誰に向けてか？
videoType — product-demo | coding-tutorial | animation | data-visualization | social-media？
duration (秒数) と配信プラットフォーム (幅/高さ/fps が決まります)。
code — ビデオでアプリやコードを紹介する場合、コードベースへのパス、リポジトリ URL、またはスニペット。
style — ビジュアル/ブランディングの制約 (色、フォント、ロゴ。skills/creative/creative-strategist のスタイルガイドが存在すればそれを使用)。

質問せずに推測する: language はコードベースから。寸法はプラットフォームから (デフォルトは 1920×1080 横向き、縦型ソーシャルは 1080×1920、fps 30)。アニメーション/トランジションの選好は style から (指定がない場合)。止まらないでください: goal + videoType + duration がわかれば、仮定を述べて先に進みます。

ワークフロー

1. ソース資料の分析

code が提供された場合、それを探索します: 主要な機能、ユーザーフロー、データ構造、紹介する価値のある UI サーフェスを特定します。goal との関連性で機能をランク付け — ビデオでは最上位の 3～5 個を表示し、すべては表示しません。コードがない場合、ユーザーの説明から同等のリストを抽出します。

2. シーンの構造化

videoType による決定ルール:

product-demo → タイトルカード → 問題/コンテキスト → 機能ごとに 1 シーン (最上位 3～5 個) → アウトロ/CTA。
coding-tutorial → タイトル → コンセプト説明 → コードのステップごとに 1 シーン (コードを表示してから説明) → まとめ。
data-visualization → タイトル → コンテキスト → チャート/インサイトごとに 1 シーン → 要点。
social-media → フックシーン (≤3 秒) → 1～2 の決定的シーン → CTA。合計 ≤60 秒。
animation → クリエイティブコンセプト (または skills/creative/product-video のビートシート) からビートを導出します。

時間計算は必須: シーンの継続時間とトランジションのオーバーラップを合計し、duration に正確に一致させます。TransitionSeries トランジションは隣接するシーンとオーバーラップします — オーバーラップを考慮し、単純に継続時間を加算しないでください。合計は約 5 分以下に抑えます (レンダリングパフォーマンスのヒューリスティック)。

3. 各シーンを完全に指定

すべてのシーンについて、すべてのフィールドを入力: sceneNumber、title、durationInSeconds、visuals.background、visuals.elements[] (type、正確な content 文字列、font、size、color、position、rules/animation-patterns.md からの animation)、audio.voiceover (話される正確な文 — 約 2.5 語/秒でシーンの継続時間に収まることを確認)、および transitionToNextScene。一致する場合は rules/scene-templates.md のテンプレートを使用します。

4. アセットと技術要件のコンパイル

いずれかのシーンで参照されるすべての画像、ビデオクリップ、オーディオトラック、フォント、ロゴを requiredAssets にリストします — 参照されているものはリストから欠落してはいけません。アセット生成は範囲外: 各アセットをユーザー提供とマークするか、正確に記述します。静止画像は skills/creative/image-generation で生成できます (リポジトリパイプライン: docs/creative_cli.py、モデル fal-ai/nano-banana-pro)。remotionPackages (例: トランジション使用時は @remotion/transitions) とサードパーティライブラリをリストします。

5. 品質基準に対する検証、そして JSON の提供

スクリプトとハンドオフノート (下記) を提供します。下流の Remotion エージェントがコンポーネントを生成し、コンポジションを設定し、Studio でプレビューし、レンダリングします。

必須出力形式

rules/script-generation.md の構造に完全に一致する JSON オブジェクト 1 つを出力します:

{
  "videoMetadata": {
    "title": "...", "durationInSeconds": 60,
    "width": 1920, "height": 1080, "fps": 30,
    "videoType": "product-demo"
  },
  "scenes": [
    {
      "sceneNumber": 1, "title": "...", "durationInSeconds": 5,
      "visuals": {
        "background": "#RRGGBB またはアセット参照",
        "elements": [
          { "type": "text|image|code|chart", "content": "正確なコンテンツ",
            "animation": { "type": "<rules/animation-patterns.md から>", "durationInSeconds": 1 } }
        ]
      },
      "audio": { "voiceover": "話される正確な文。" },
      "transitionToNextScene": { "type": "<rules/animation-patterns.md から>", "durationInSeconds": 1 }
    }
  ],
  "requiredAssets": { "images": [], "videos": [], "audio": [], "fonts": [], "logos": [] },
  "technicalRequirements": { "remotionPackages": [], "thirdPartyLibraries": [] }
}

JSON の後に、短いマークダウンのハンドオフノートを付けます: 合計時間の確認 (シーン計算の表示)、行った 1～3 の仮定、およびレンダリング前にユーザーが提供する必要があるアセット。

品質基準 (提供前の確認)

シーンの継続時間 + トランジションのオーバーラップが videoMetadata.durationInSeconds に正確に合計されること。計算式をハンドオフノートに表示すること。
すべての animation と transition の type が rules/animation-patterns.md に存在すること — 独自のタイプは不可。
すべてのナレーション行が約 2.5 語/秒でシーンに収まること。ナレーションやタイトルで目的が示されていないビジュアルのみのシーンがないこと。
いずれかのシーンで参照されているすべてのアセットが requiredAssets に出現すること。テキスト要素で使用されているフォントがリストされていること。
Remotion の正確性が仕様に組み込まれていること: useCurrentFrame() によるフレームベースのタイミング、公開用の damping: 200 のスプリング、文字列スライシングによるタイプライター (文字ごとの不透明度ではない)、決定論的乱数のみ (Math.random() ではなく Remotion の random() を使用)、重いシーケンスの premountFor、順序付けのための <Sequence>/<Series>/<TransitionSeries>。
content フィールドは最終的なコピーであり、「機能説明ここに入力」のようなプレースホルダーではないこと。
ナレーションは自動ドラフトであること — ハンドオフノートでユーザーが洗練したい場合があることを示すこと。

統合

skills/creative/product-video → 入力: 製品ビデオのコンセプト + ビートシート + キーフレーム。各ビートが 1 シーンになります。
skills/creative/creative-strategist → 入力: visuals と style に適用されるスタイルガイド (色、フォント、ムード)。
skills/creative/original-design → 入力: デザイン言語の概要。すべてのシーンのビジュアル語彙はその世界観から来なければなりません。
skills/creative/image-generation → 出力: requiredAssets.images にリストされている静止アセット。
skills/creative/social-graphics → 消費: 投稿アセット用のレンダリング済み静止画/サムネイル。
下流: このリポジトリ外の Remotion エージェントスキルが JSON を消費してコンポーネントを構築、プレビュー、レンダリングします。

Remotion スクリプトライター