setup

Remotion Superpowers — セットアップウィザード

Remotion Superpowers プラグインのセットアップウィザードを実行しています。以下の手順に注意深く従い、各手順をユーザーに案内してください。

ステップ 1：システムの依存関係を確認する

以下のチェックを実行し、結果を報告してください。

node --version
npm --version
python3 --version 2>/dev/null || python --version 2>/dev/null
which uvx 2>/dev/null || echo "uvx not found"

必須：

• Node.js 22.18 以降（Remotion と MCP サーバーに必要です）
• npm（Node.js に付属しています）

推奨：

• Python 3 と uv／uvx（任意の非推奨 ElevenLabs MCP サーバーでのみ使用します）
  • 見つからない場合は、ユーザーに curl -LsSf https://astral.sh/uv/install.sh | sh を伝えてください。
• 字幕には追加のものは不要です。単語レベルの字幕には、公式の remotion-captions フロー（WebGPU を使ったローカル Whisper）または、GPU がない場合は ElevenLabs Scribe を使用します。

それぞれを、バージョンとともに ✓ または ✗ で報告してください。

ステップ 2：Remotion プロジェクトを確認する

現在のディレクトリに Remotion プロジェクトがすでにあるか確認してください（package.json に remotion 依存関係があり、通常は remotion.config.ts もあります）。

ある場合： Remotion プロジェクトが検出されたことをユーザーに伝えてください。

ない場合： ここに作成するか、既存のプロジェクトに移動するかをユーザーに尋ねてください。作成する場合は、公式の remotion-create スキルの指示どおりにスキャフォールディングしてください。

1. まず現在のフォルダーを確認します。隠しファイルも含めてください（ls -la）。.env や .git などのファイルは意味のある内容として扱い、削除してよいのは .DS_Store などの OS メタデータのみです。
2. 空のフォルダー（または削除可能なメタデータのみがあり、先に削除した場合）：

   npx create-video@latest --yes --blank --no-tailwind .
   npm i
   

3. 意味のある内容があるフォルダー：サブフォルダーにスキャフォールディングし、その中に移動します。

   npx create-video@latest --yes --blank --no-tailwind my-video
   cd my-video
   npm i
   

ユーザーから求められない限り、TailwindCSS を追加しないでください。公式スキルは TailwindCSS なしでスキャフォールディングします。

ユーザーが Remotion プロジェクトのディレクトリに移動するまで、先に進まないでください。新しいフォルダーに移動した場合は、その場所からエージェントを再起動してください。remotion-media ツールは、エージェントの起動元ディレクトリの public/ にファイルを書き込むためです。

ステップ 3：Remotion の公式エージェントスキルをインストールする（必須）

Remotion Superpowers は、Remotion の公式エージェントスキルを基盤としています。これらは必須の補完要素です。このプラグインはメディアを生成して取り込み、公式スキルは Remotion のマークアップ、スキャフォールディング、プレビュー、字幕、レンダリングを担います。これらがないと、ワークフローで Remotion API のガイダンスを利用できません。

次の 12 個がすべてインストールされているか確認してください（たとえば .claude/skills/、.agents/skills/、.codex/skills/、.gemini/skills/ など）。

remotion-best-practices、remotion-captions、remotion-create、remotion-docs、remotion-interactivity、remotion-maps、remotion-markup、remotion-multimedia、remotion-render、remotion-saas、remotion-studio、remotion-upgrade

不足しているスキルがある場合：

npx skills add remotion-dev/skills

npx skills はインストール済みのエージェント（Claude Code、Codex、Gemini CLI、Cursor、Copilot など）を検出し、それぞれにインストールします。インストールするスキルを尋ねられた場合は、12 個すべてを選択してください。

常に最新の状態に保ってください。 Remotion は頻繁にリリースされ、スキルもリリースごとに更新されます。プロジェクトから次を実行してください。

npx remotion upgrade

これにより Remotion とそのパッケージがアップグレードされ、プロジェクトローカルの Remotion スキル（公式の remotion-upgrade）も更新されます。@remotion/cli がローカルにインストールされていない場合は、スキルを直接更新してください。

npx skills update remotion-best-practices remotion-captions remotion-create remotion-docs remotion-interactivity remotion-maps remotion-markup remotion-multimedia remotion-render remotion-saas remotion-studio remotion-upgrade --yes

このプラグインが基盤としているプロバイダースキルもインストールしてください。

npx skills add elevenlabs/skills   # voice, sound effects, music, transcription
npx skills add replicate/skills    # only if the user wants Replicate models

次のようにユーザーに伝えてください。「Remotion の公式スキルがインストールされました。エージェントは Remotion の最新 API、プレビュー、字幕、レンダリングに対応しました。Remotion Superpowers はその上にメディア生成機能を追加します。」

ステップ 4：API キーを設定する

各 API キーについて、ユーザーを順に案内してください。キーごとに次の内容を行います。

1. サービスが提供する機能を説明します。
2. 登録 URL を案内します。
3. 環境変数名を伝えます。
4. 設定するよう依頼します：export VAR_NAME=their-key
5. 永続化するために、~/.zshrc または ~/.bashrc に追加することを勧めます。

Gemini CLI： 拡張機能はシェル環境を引き継ぎません。キーは拡張機能のインストール時に入力を求められます。後から変更する場合は、キーをエクスポートする代わりに gemini extensions config remotion-superpowers "ElevenLabs API key"（または該当する設定名）を実行してください。

4a. ElevenLabs API Key（必須：音声、効果音、音楽）

• 内容： ナレーション、効果音、音楽（Eleven Music。商用利用は有料プランで許可されています）、およびGPUがない場合に単語単位のキャプションを作成するための文字起こしに使用します。公式のElevenLabsスキルを通じて生成します。
• 登録： https://elevenlabs.io（無料プランあり。商用音楽には有料プランが必要です）。または、`npx -y @elevenlabs/cli@latest onboard init` を実行すると、サインインしてプロジェクト用のキーが保存されます。
• 変数： ELEVENLABS_API_KEY
• コマンド： export ELEVENLABS_API_KEY=your-key-here
• 永続化： echo 'export ELEVENLABS_API_KEY=your-key-here' >> ~/.zshrc

4b. KIE API Key（必須：AI画像、動画クリップ）

• 内容： remotion-media サーバーを通じて、AI画像生成（Nano Banana Pro）とAI動画クリップ（Veo 3.1）を利用できます。安価な音声のドラフトも作成できますが、KIEはモデルの所有者のライセンスを得ずにそれらのモデルを再販しているため、商用利用する最終音声にはElevenLabsを使用してください。
• 登録： https://kie.ai（アカウントを作成し、ダッシュボードからAPIキーを取得してください）
• 変数： KIE_API_KEY
• コマンド： export KIE_API_KEY=your-key-here
• 永続化： echo 'export KIE_API_KEY=your-key-here' >> ~/.zshrc

4c. TwelveLabs API Key（必須：動画の理解、AIレビュー）

• 内容： エージェントが動画を確認できるようになります。映像の分析、場面の検索、レンダリングした動画のレビューを行い、実行可能な修正案を提示します。
• 登録： https://www.twelvelabs.io（無料プランあり）
• 変数： TWELVELABS_API_KEY
• コマンド： export TWELVELABS_API_KEY=your-key-here
• 永続化： echo 'export TWELVELABS_API_KEY=your-key-here' >> ~/.zshrc

4d. Pexels API Key（推奨：無料のストック映像）

• 内容： 無料のストック写真と動画。キーワードで検索し、HD/4Kのクリップをプロジェクトにダウンロードできます。
• 登録： https://www.pexels.com/api/（無料、すぐに利用可能）
• 変数： PEXELS_API_KEY
• コマンド： export PEXELS_API_KEY=your-key-here
• 永続化： echo 'export PEXELS_API_KEY=your-key-here' >> ~/.zshrc

4e. Replicate API Token（任意：特定の画像・動画モデル）

• 内容： 特定のモデルを使いたい場合、またはKIEのクリップ生成に失敗した際の代替手段として、数百種類のモデル（FLUX.2、Kling、Seedance、Wanなど）を利用できます。
• 登録： https://replicate.com（アカウントを作成し、APIトークンを取得してください）
• 変数： REPLICATE_API_TOKEN
• コマンド： export REPLICATE_API_TOKEN=your-token-here
• 永続化： echo 'export REPLICATE_API_TOKEN=your-token-here' >> ~/.zshrc

キーを1つ設定するごとに、次のキーに進む前に設定が完了したかユーザーに確認してください。任意のキーは省略してもかまいません。

Step 5: シェルを再読み込みして確認する

シェルを再読み込みするようユーザーに伝えてください：

source ~/.zshrc

次に、環境変数が設定されていることを確認します：

echo "ELEVENLABS_API_KEY: ${ELEVENLABS_API_KEY:+SET}"
echo "KIE_API_KEY: ${KIE_API_KEY:+SET}"
echo "TWELVELABS_API_KEY: ${TWELVELABS_API_KEY:+SET}"
echo "PEXELS_API_KEY: ${PEXELS_API_KEY:+SET}"
echo "REPLICATE_API_TOKEN: ${REPLICATE_API_TOKEN:+SET}"

Step 6: MCP 接続を確認する

MCP サーバーの状態を確認するようユーザーに伝えてください：

/mcp

設定したすべてのサーバーが接続済みと表示されるはずです。接続に失敗するサーバーがある場合：

• APIキーの環境変数が設定されていることを確認します
• uvx ベースのサーバーの場合は、uv がインストールされていることを確認します
• npx ベースのサーバーの場合は、Node.js がインストールされていることを確認します
• エージェント（Claude Code、Codex、Gemini CLI…）を再起動してみます

Step 7: セットアップ完了

次の概要を出力します：

🎬 Remotion Superpowers — Setup Complete!

✓ Dependencies verified
✓ Remotion project detected
✓ Remotion official skills installed (12)
✓ API keys configured
✓ MCP servers connected

🎬 Production Commands:
  /create-video      — Full video production from a prompt
  /create-short      — Short-form vertical video (TikTok/Reels/Shorts)

🎨 Asset Commands:
  /find-footage      — Search & download stock footage from Pexels
  /generate-image    — Generate AI images for your video
  /generate-clip     — Generate AI video clips

🔊 Audio Commands:
  /add-voiceover     — Generate and add narration
  /add-music         — Generate and add background music
  /transcribe        — Transcribe audio/video to text

✨ Enhancement Commands:
  /add-captions      — TikTok-style animated captions
  /add-transitions   — Professional scene transitions

👁️ Analysis Commands:
  /analyze-footage   — Analyze existing video files with AI vision
  /review-video      — AI feedback loop (renders frames and the video for review)

Keep Remotion and its skills current: npx remotion upgrade

Try it: "Create a 30-second product demo video for a todo app"