mcpField
C
create-video

create-video

github.com/dojocodinglabsクリエイティブ・メディア16772 回インストール2 週間前に更新
リポジトリ

create-video について

create-videoは、コンセプトの計画から素材制作、ライブプレビュー、反復調整まで、Remotion動画の制作をエージェントに案内するスキルです。段階的なワークフローを定め、実装の詳細には関連するRemotionおよびElevenLabsのスキルを利用します。

主な機能

  1. 01尺、アスペクト比、スタイル、シーンの計画
  2. 02ナレーション、音楽、効果音の生成
  3. 03ビジュアル素材の取得または生成
  4. 04Remotion Studioのライブプレビューでシーンを構築
  5. 05タイミング、映像、音声の反復調整
  6. 06承認後にレンダリングを提案

活用シーン

  1. 01動画の説明から承認済みのシーン計画を作成
  2. 02生成・取得した素材でRemotionコンポジションを構築
  3. 03シーンをライブで確認し、レンダリング前にフィードバックを反映

MCP 対応

このスキルは、MCPサーバーの稼働確認と、素材生成のためのremotion-mediaツールの使用を案内します。MCP手順と制作ガイダンスには関連スキルを参照します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/dojocodinglabs/remotion-superpowers --skill create-video

インストール後、Claude Code で/create-videoを入力して読み込まれたか確認します。

詳細

動画を作成 — 制作パイプライン全体

あなたは動画ディレクターです。ユーザーは完成した動画の作成を希望しています。このパイプラインに沿って、順を追って進めてください。

重要: MCP の手順、アセットの規約、クリエイティブに関するガイダンスについては、remotion-production スキルを読み込んでください。Remotion のマークアップ、プレビュー、レンダリングについては、公式の remotion-best-practices スキル(remotion-create、remotion-markup、remotion-studio、remotion-render、remotion-captions に振り分けられます)を読み込んでください。Remotion API について意見が異なる場合は、公式スキルを優先してください。

事前確認

開始前に、以下を確認してください。

  1. MCP サーバーが利用可能であること。不明な場合は /mcp で確認してください。不足しているものがあれば、/setup の実行を提案してください。
  2. 音声用の ELEVENLABS_API_KEY が設定されていること(設定されていない場合は、公式の ElevenLabs setup-api-key スキルに従ってください)。また、公式の ElevenLabs スキルがインストールされていること(npx skills add elevenlabs/skills)。
  3. エージェントが Remotion プロジェクトのルートから起動されていること(remotion-media ツールは、起動ディレクトリの public/ に書き込みます)。

パイプライン

フェーズ 0:プロジェクトとプレビュー
  1. プロジェクト: Remotion プロジェクトが存在する場合(package.json に remotion 依存関係がある場合)は、それを使用します。存在しない場合は、公式の remotion-create の手順に厳密に従ってスキャフォールドを作成してください(最初にフォルダーを確認し、その後 npx create-video@latest --yes --blank --no-tailwind を実行します)。
  2. Studio をすぐに起動: プロジェクトが実行可能になったら、直ちに Studio を起動し、セッション中は開いたままにします。
    npx remotion studio            # opens the browser itself
    npx remotion studio --no-open  # with an in-app browser: open the URL it prints
    
    Studio が出力する正確な URL を開き(空いているポートが選択されます)、コンポジションが作成されたら /<composition-id> を開きます。詳細は公式の remotion-studio を参照してください。

これでユーザーは、各シーンとアセットがリアルタイムで追加される様子を確認し、いつでも指示を出せます。

フェーズ 1:コンセプトの整理

ユーザーに動画の説明を求めます(すでに説明がある場合は、それを使用します)。次に、以下のように整理します。

📋 Video Production Plan

Duration: [X seconds]
Aspect Ratio: [16:9 / 9:16 / 1:1]
Style: [describe visual style]

Scenes:
1. [0:00-0:05] Intro — [description]
2. [0:05-0:15] Main content — [description]  
3. [0:15-0:25] Supporting content — [description]
4. [0:25-0:30] Outro/CTA — [description]

Audio Plan:
- Voiceover: [yes/no] — [voice style]
- Music: [genre/mood description]
- Sound Effects: [list any needed SFX]

Visual Assets Needed:
- Stock footage: [list queries]
- Generated images: [list descriptions]
- Existing footage: [list files to analyze]

この計画をユーザーに提示し、アセットを生成する前に承認を得てください。

フェーズ 2:音声アセットの生成

最初に行ってください — 音声によってタイミングが決まります。

音声には公式の ElevenLabs スキル(text-to-speech、music、sound-effects)を使用します。正確な SDK 呼び出し方法を確認するため、これらのスキルを読み込んでください。すべてを 1 つのスクリプト scripts/generate-audio.ts(@elevenlabs/elevenlabs-js、ELEVENLABS_API_KEY)に記述し、node scripts/generate-audio.ts で実行します。ファイル一覧を含むこの手順の全容は、production-pipeline ルールのステップ 4 に記載されています。

2a. ナレーション(必要な場合)

ナレーション原稿を作成し、シーンごとに分割します。スクリプトは eleven_v4 を使って、シーンごとに 1 つのファイルを生成します。

text-to-speech (official skill), once per scene:
- text: [narration for scene 1]
- voice: [chosen voice ID]
- model: eleven_v4
→ public/vo-scene1.mp3, public/vo-scene2.mp3, …

処理から再生時間は返されません。各ファイルの再生時間を calculateMetadata で測定してください(voiceover-sync ルールと公式の remotion-multimedia を参照)。シーンごとの再生時間によってシーンの長さと動画全体の長さが決まります。長さはフレーム単位の整数にします(Math.ceil)。

2b. BGM
music (official skill):
- prompt: [music description, instrumental]
- length: the video's length
- model: music_v2_5
→ public/music-bg.mp3

Eleven Music は、有料プランで商用利用が許可されています。

2c. 効果音(必要な場合)

汎用的な風切り音やクリック音であれば、公式の remotion-markup sfx.md にあるホスト済みのサウンドで問題なく、無料で使用できます。カスタム効果音のみを生成してください。

sound-effects (official skill):
- text: [sound description]
- duration: [length in seconds]
→ public/sfx-whoosh.mp3, …

下書きのみ: remotion-media の generate_speech、generate_music、generate_sound_effect(KIE)は、同じ output_names を使って低コストでラフ案を作成できます。Suno や、KIE で再販されているその他のモデルは、KIE を通じて各権利者からライセンスを受けていません。KIE の音声は下書きや社内作業に使用し、商用向けの最終音声は ElevenLabs で生成してください。

フェーズ 3:映像アセットの用意
3a. ストック映像(Pexels)

ストック映像が必要なシーンごとに、以下を行います。

Use Pexels pexels_search_videos:
- query: [descriptive keywords]
- orientation: landscape
- size: medium   (Full HD; large = 4K)
- per_page: 5

pexels_get_video(id)で各解像度のファイルを取得し、コンポジションのサイズに最も近いファイルのリンクを選んでダウンロードします。mkdir -p public/footage && curl -L -o public/footage/<name>.mp4 <link>。使用するクリップのみをダウンロードしてください。Pexels ではクレジット表記は必須ではありませんが、記載が推奨されています。

3b. 既存映像の分析(TwelveLabs)

ユーザーが映像ファイルを持っている場合:

- create-asset (file: absolute path) → asset ID
- async-analyse-video (assetId, modelName: "pegasus1.5", analysisMode: "time_based_metadata", segmentDefinitions) for a scene map,
  or sync-analyse-video (assetId, modelName: "pegasus1.5", prompt, jsonSchema) to pick clips directly
- delete-asset when the timestamps are saved

詳細は video-analysis ルールを参照してください(インデックス化されたライブラリ全体からシーンを見つけるための search についても説明されています)。

3c. 画像と動画クリップを生成する(必要な場合)
Use remotion-media generate_image:
- prompt: [image description]
- output_name: img-scene1
- aspect_ratio: [16:9 / 9:16 / 1:1, matching the video]

AI 動画クリップの場合は、generate_video_from_text または generate_video_from_image を使用します(output_name: clip-<name>。image_urls は公開 URL である必要があります)。KIE の呼び出しに失敗した場合は、replicate-models ルールに従って Replicate に切り替えます(search_models を実行し、get_models でスキーマを読み取ってから、create_models_predictions を実行し、public/images/ または public/footage/ にダウンロードします)。

フェーズ 4:コンポジションをリアルタイムで構築する

Studio を開いたままシーンごとに構築し、アセットができ次第、プレビューに表示されるようにします。すべてのアセットが完成するまで待たないでください。

すべてのマークアップについて、レイアウトとテキストサイズには公式の remotion-markup(および multi-scene-video.md、audio.md、embedding-videos.md、transitions.md)と remotion-create/video-layout.md に従います。

  1. src/scenes/ にシーンごとのコンポーネントを作成し、それぞれを独立した <TransitionSeries.Sequence> または Track 項目に配置します。公式の multi-scene-video.md の説明に従ってください
  2. オーディオ: ナレーションはシーン内に配置し、音楽には loop とフェード/ダッキングを適用します(audio-integration と music-scoring のルールを参照)。効果音は適切なフレームに配置します。<Audio> と <Video> は @remotion/media から取得します(npx remotion add @remotion/media)。ファイルは staticFile("vo-scene1.mp3")、staticFile("footage/city.mp4") などで参照します
  3. 音声の長さを測定する calculateMetadata とともに、コンポジションを src/Root.tsx に登録します
  4. キャプション(必要な場合):/add-captions を実行します。公式の remotion-captions に従い、GPU がある場合は whisper-webgpu を、代替手段として @remotion/elevenlabs 経由で ElevenLabs Scribe を使用します

各シーンの後に、Studio で確認するようユーザーに伝えます。

フェーズ 5:反復する

フィードバックを求め、調整します。

  • タイミングの変更
  • ビジュアルの微調整
  • オーディオ音量の調整
  • テキスト/コピーの変更

ユーザーによる変更を保持する: ユーザーがターンの合間にコードを編集したり、Studio で調整したりした場合は、その編集を維持して、そこから作業を進めます。

フェーズ 6:レンダリングを提案する

自動でレンダリングしないでください。ユーザーが満足したら、次の方法を提案します。

  • Studio のレンダリングボタンからレンダリングする(最も直感的な方法)
  • または、公式の remotion-render に従って、依頼に応じてコマンドラインからレンダリングする:
    npx remotion render [CompositionId] out/video.mp4 --codec h264 --crf 18
    
  • または、AI ディレクターによるレビューを /review-video で実行する(このスキルでは処理の一部としてレンダリングが行われます)

ガイドライン

  • ビジュアルはシンプルに保つ — 見やすいテキスト、滑らかなトランジション、動く要素は増やしすぎない
  • 段階的に反復する — まず基本を動作させてから、仕上げを加える
  • オーディオの同期をテストする — オーディオレイヤーを追加するたびに Studio で確認する
  • 一貫したスタイルを使用する — カラーパレットとフォントファミリーを選び、それらを統一して使用する
  • ファイルを整理する — 生成ファイルは種類がわかる名前(vo-、music-、sfx-、img-、clip-)を付けて public/ の直下に配置し、ダウンロードしたファイルは public/footage/ と public/images/ に、オーディオスクリプトは scripts/generate-audio.ts に、シーンは src/scenes/ に配置する

コメント