mcpField
R
remotion-studio

remotion-studio

github.com/remotion-devクリエイティブ・メディア5.8k192.3k 回インストール2 日前に更新
リポジトリ

remotion-studio について

動画の作成や編集時に Remotion Studio を使うスキルです。ライブプレビューを通じて、ユーザーが変更を確認し、作業を導けるワークフローを支援します。

主な機能

  1. 01Remotion Studio の起動
  2. 02Studio プレビューの起動・再利用
  3. 03ブラウザー起動方法の選択
  4. 04ログとポートの設定
  5. 05Studio インスタンスの追加起動

活用シーン

  1. 01動画コンポジションの構築中にプレビュー
  2. 02ライブ Studio 画面を見ながら編集を進行

インストール

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

$npx skills add https://github.com/remotion-dev/skills --skill remotion-studio

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

同梱ファイルagents/openai.yamlassets/remotion-icon.svg

詳細

動画を作成または編集するときは、プロジェクトが実行可能になったら、コンポジションを組み立てる前に Studio を起動し、プレビューを開いてください。作業中は開いたままにして、ユーザーが変更を確認して指示できるようにしてください。

Cursor では、ブラウザーが自動的に開くように --no-open を付けずに Studio を実行します。

npx remotion studio

ほかのエージェントクライアントでも、上記のコマンドを使って Studio にブラウザーを自動的に開かせることができます。アプリ内ブラウザーがあり、それを使用する場合は、次を実行します。

npx remotion studio --no-open

Studio がすでに開いている場合は、URL が出力され、コマンドは終了します。 それ以外の場合は、長時間実行されるプロセスが起動し、URL が出力されます。

--no-open を使用する場合は、出力された正確な URL をアプリ内ブラウザーで開き、Studio が読み込まれることを確認してください。コンポジションができたら、その動画プレビューが読み込まれることを確認してください。アプリ内ブラウザーで URL を開けない場合は、--no-open を使用しないでください。

便利なフラグ

引数用途
--log=<level>error、warn、info（デフォルト）、または verbose のログレベルを設定します。
--port=<number>Studio サーバーのポートを指定します。指定しない場合、Remotion が空いているポートを探します。
--force-new同じプロジェクトとポートですでに Studio インスタンスが実行中でも、別のインスタンスを起動します。

コメント

Markdown 対応