remotion-script-writer

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)。 intake を入力オブジェクトに正規化するときに読んでください。
• rules/script-generation.md — 権威ある出力 JSON 構造と生成手順。スクリプトを出力する前に読んでください。以下のスケルトンは要約であり、このファイルが契約です。
• rules/animation-patterns.md — 承認されたアニメーション/トランジションの語彙と、正確な JSON 形状およびタイミングのガイドライン。animation または transitionToNextScene の値を指定するときに読んでください。それ以外のアニメーションタイプを考案してはいけません。
• rules/scene-templates.md — 一般的なケース(タイトルカード、機能紹介、コードウォークスルー、データビズ、アウトロ/CTA)向けの既製シーン JSON。シーンが既知のパターンに一致するときに読んでください。テンプレートから始めて編集します。
• examples/product-demo-example.json — 完全な実例スクリプト。粒度の基準として読んでください。

ヒアリング

不足しているものだけを、1回の簡潔なバッチで尋ねてください(フィールド名は rules/prompt-structure.md に準拠)。

1. goal と targetAudience — 動画は何を達成すべきで、誰向けですか?
2. videoType — product-demo | coding-tutorial | animation | data-visualization | social-media?
3. duration(秒)と配信先プラットフォーム(幅/高さ/fps を決定します)。
4. code — 動画でアプリやコードを取り上げる場合は、コードベースへのパス、リポジトリ URL、またはスニペット。
5. 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 or asset ref",
        "elements": [
          { "type": "text|image|code|chart", "content": "exact content",
            "animation": { "type": "<from rules/animation-patterns.md>", "durationInSeconds": 1 } }
        ]
      },
      "audio": { "voiceover": "Exact spoken sentence(s)." },
      "transitionToNextScene": { "type": "<from rules/animation-patterns.md>", "durationInSeconds": 1 }
    }
  ],
  "requiredAssets": { "images": [], "videos": [], "audio": [], "fonts": [], "logos": [] },
  "technicalRequirements": { "remotionPackages": [], "thirdPartyLibraries": [] }
}

JSON の後に、短い Markdown の引き継ぎメモを続けてください: 合計時間のチェック（シーンの計算式を示す）、行った 1～3 個の前提、およびレンダリング前にユーザーが用意する必要があるアセット。

品質基準（提出前に確認）

• シーンの長さ + トランジションのオーバーラップの合計が、正確に videoMetadata.durationInSeconds と一致すること。計算式を引き継ぎメモに示してください。
• すべての animation とトランジションの type が rules/animation-patterns.md に存在すること — 存在しないタイプをでっち上げないでください。
• すべてのボイスオーバー行が、毎秒約 2.5 語でそのシーンに収まること。ボイスオーバーやタイトルで目的が示されていないビジュアルを持つシーンがないこと。
• いずれかのシーンで参照されているすべてのアセットが requiredAssets に含まれること。テキスト要素で使用されるフォントが列挙されていること。
• 仕様に Remotion の正確性が織り込まれていること: useCurrentFrame() によるフレームベースのタイミング、表示には damping: 200 のスプリング、タイプライターは文字ごとの不透明度ではなく文字列スライスによる実装、確定的なランダム性のみ（remotion の random() を使用し、Math.random() は決して使わない）、重いシーケンスには premountFor、順序付けには <Sequence>/<Series>/<TransitionSeries>。
• content フィールドは最終的なコピーであり、「feature description here」のようなプレースホルダーではないこと。
• ボイスオーバーは自動で下書きされています — ユーザーが調整したいと思うかもしれないことを引き継ぎメモに記載してください。

統合

• 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 を消費して、コンポーネントの構築、プレビュー、レンダリングを行います。