remotion-studio について
Remotionで動画を作成・編集するためのスキルです。コンポジションの構築前にStudioを起動し、プレビューを確認しながら制作を進められます。ブラウザーでの起動方法やサーバー設定も示します。
主な機能
- 01コンポジション構築前のStudio起動
- 02ブラウザーでStudioを開く
- 03Studioと動画プレビューの確認
- 04ログレベルとポートの設定
- 05Studioの別インスタンス起動
活用シーン
- 01動画開発中のプレビュー確認
- 02アプリ内ブラウザーでのStudio確認
- 03指定ポートでのStudio起動
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/remotion-studioを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yaml
詳細
動画を作成または編集するときは、プロジェクトが実行可能になったら、コンポジションを組み立てる前に 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 対応