remotion-best-practices について
remotion-best-practices は、Remotion で動画を制作するためのエージェントスキル集です。コンポジットの作成、Studio プレビューの起動、Remotion のマークアップ規約に沿った実装をエージェントに案内します。コードで動画を制作する開発者に適しています。
主な機能
- 01新規 Remotion プロジェクトとコンポジションの作成手順
- 02Studio の起動とインタラクティブなプレビュー
- 03React マークアップのベストプラクティス
- 04マップ、マルチメディア、キャプションの各トピック
- 05ドキュメントとアップグレード手順の必要時読み込み
活用シーン
- 01コーディングエージェントによる新しい Remotion 動画コンポジションの作成
- 02Remotion Studio でのプレビューと内容の調整
- 03Remotion と関連パッケージのアップグレード
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/remotion-best-practicesを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/openai.yamlassets/remotion-icon.svgremotion-captions/display-captions.mdimport-srt-captions.mdREFERENCE.mdtranscribe-captions.mdremotion-captions/agents/openai.yamlremotion-captions/assets/remotion-icon.svgremotion-create/REFERENCE.mdtailwind.mdvideo-layout.mdremotion-create/agents/openai.yamlremotion-create/assets/remotion-icon.svgremotion-docs/REFERENCE.mdremotion-docs/agents/openai.yamlremotion-docs/assets/remotion-icon.svgremotion-interactivity/inline-effects.mdREFERENCE.mdtimeline-structure.mdremotion-interactivity/agents/openai.yamlremotion-interactivity/assets/remotion-icon.svgremotion-maps/REFERENCE.mdremotion-maps/agents/openai.yamlremotion-maps/assets/remotion-icon.svgremotion-maps/techniques/cesium/assets/cesium-path.jsonCesiumFlythrough.tsxcity-path.jsonexample-Root.tsxflight-path.tssample-river.geojson詳細
ユーザーによる変更の保持
ユーザーが会話の外でコードを編集することがあります。
その間に予期しない変更が加えられていることに気づいた場合は、上書きせず、意図的な変更とみなすか、確認してください。
動画の作成
ユーザーが新しい動画やコンポジションの制作、作成、構築を依頼した場合は、Remotion プロジェクトがすでに存在するかどうかにかかわらず、Create a new Remotion video を読み込んでください。
新規プロジェクトのセットアップ
Remotion プロジェクトがまだ存在しない場合は、Create a new Remotion project を読み込んでください。
React マークアップのベストプラクティス
Remotion React マークアップを記述する場合は、Remotion Markup Best Practices を読み込んでください。
マップ
静的マップ、アニメーションルートやマーカー、地理情報の解説、Mapbox、MapLibre、MapTiler、GeoJSON、または 3D 地理情報フライオーバーの場合は、Remotion Maps を読み込んでください。
マルチメディア
動画のトリミングやクロップ、メタデータの取得など、ブラウザーでマルチメディア関連のタスクを行う場合は、Remotion Multimedia を読み込んでください。
インタラクティブ性の向上
Remotion マークアップを適切に構成することで、ユーザーが Studio で項目をインタラクティブに変更し、その内容をコードに反映できるようになります。関連する場合は、Interactivity Best Practices を参照してください。
プレビューを開く
ユーザーが動画の「制作」や「作成」などを依頼した場合は、特に明確な指示がない限り、デフォルトで動画をレンダリングしないでください。代わりに、インタラクティブなプレビューを見たいと考えています。 プロジェクトを実行できるようになったら、コンポジションの構築や編集を始める前に Studio を起動し、ブラウザーでプレビューを開いてください。作業中は開いたままにして、ユーザーが進捗を確認し、方向性を指示できるようにしてください。
Cursor を使用している場合
Studio を起動するときに --no-open を付けず、ブラウザーが自動的に開くようにしてください。
npx remotion studio
アプリ内ブラウザーを備えた別のエージェントクライアントを使用している場合
上記のコマンドで Studio を起動してブラウザーを開くか、次のコマンドを実行してください。
npx remotion studio --no-open
これにより、長時間実行されるプロセスが起動し、プレビュー用のサーバー URL が出力されます。
サーバーがすでに起動している場合は、URL が出力されます。
--no-open を使用する場合は、出力された正確な URL をアプリ内ブラウザーで開き、Studio が読み込まれることを確認してください。コンポジションが存在する場合は、その動画プレビューが読み込まれることも確認してください。アプリ内ブラウザーで開けない場合は、--no-open を付けずに Studio を実行してください。
/[composition-id] に移動すると、特定のコンポジションを表示できます。たとえば、http://localhost:3000/MapAnimation です。
:::note Studio は WebMCP ツールに対応しています。 :::
アプリ内ブラウザーがない場合
これにより、ブラウザーで Studio が開きます。すでに開いている場合は、そのウィンドウが前面に表示されます。
npx remotion studio
その他のオプション
Remotion Studio でプロジェクトを起動する方法、正確なローカル URL を開く方法、または Studio CLI フラグを設定する方法については、Remotion Studio を読み込んでください。
動画のレンダリング
ユーザーが明確に依頼した場合に限り、レンダリングしてください。
例：「動画をレンダリングして」「エクスポートして」「MP4 をください」。
プレビューには、より直感的なレンダリング用インターフェイスもあります。レンダリングにはコマンドラインの代わりにそちらを使うことも検討してください。
npx remotion render
その他のオプションについては、Rendering を参照してください。
単純な npx remotion render を超える高度なレンダリングについては、Rendering Best Practices を参照してください。
キャプション
キャプションを扱う場合は、Remotion Captions を読み込んでください。
SaaS、自動化、アプリケーションの作成
<Player>、Lambda でのレンダリング、Vercel、Cloudflare、Express.js 経由の処理、クライアントサイドレンダリングなど、Remotion を活用した SaaS アプリに関する知識や、適切な SaaS テンプレートを探すには、Remotion SaaS skill を使用してください。
Remotion API とドキュメントの検索
最新の Remotion ドキュメントを探して読むには、Remotion Docs を読み込んでください。
アップグレード
Remotion、関連パッケージ、互換性のある Mediabunny パッケージ、およびインストール済みの Remotion Agent Skills をアップグレードするには、Remotion Upgradeを読み込んでください。