remotion-best-practices

Remotion に関するすべてのスキルのルーター

remotion-best-practices とは?

このスキルは、Remotion を使用した動画作成プロジェクトにおいて、適切なサブスキルを自動的に選択・ロードするルーターとして機能します。ユーザーのリクエスト(新規動画作成、プロジェクトセットアップ、React マークアップ、地図、マルチメディア、インタラクティブ性、キャプション、SaaS、レンダリングなど)に応じて、最適なリファレンスドキュメントを動的に切り替えます。Cursor や他のエージェントクライアントでの動作を想定し、Studio プレビューの起動方法やレンダリングの注意点も詳細に指示しています。ユーザーの明示的な意図を尊重し、特にレンダリングは明確に要求された場合のみ実行するなど、安全かつ効率的な開発フローを提供します。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/remotion-dev/skills/tree/main/skills/remotion-best-practices

Installed? Explore more ビデオ&アニメーション skills: steipete/video-frames, steipete/summarize, openclaw/openclaw · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ユーザーの変更を保持する

ユーザーは会話の外部でコードを編集することがあります。

その間に予期しない変更を検出した場合、上書きせず、意図的なものとみなすか、確認を求めてください。

動画の作成

ユーザーが新しい動画やコンポジションの作成・制作を依頼した場合、Remotion プロジェクトがすでに存在するかどうかにかかわらず、新しい Remotion 動画を作成する をロードします。

新しいプロジェクトのセットアップ

現在 Remotion プロジェクトが存在しない場合は、新しい Remotion プロジェクトを作成する をロードします。

React マークアップのベストプラクティス

Remotion の React マークアップを記述する場合は、Remotion マークアップのベストプラクティス をロードします。

地図

静的マップ、アニメーションルートとマーカー、地理説明、Mapbox、MapLibre、MapTiler、GeoJSON、または3D地理フライオーバーの場合は、Remotion マップ をロードします。

マルチメディア

ブラウザでのマルチメディアタスク(動画のトリミング、クリッピング、メタデータ取得など)を実現するには、Remotion マルチメディア をロードします。

インタラクティブ性の向上

Remotion マークアップを適切に構造化することで、ユーザーが Studio でインタラクティブに変更を加え、コードに書き戻すことができます。関連する場合: インタラクティブ性のベストプラクティス

プレビューを開く

ユーザーが動画を「作る」「作成する」などと依頼した場合など。 ユーザーが非常に明確に指示しない限り、デフォルトでは動画をレンダリングしないでください。代わりにインタラクティブプレビューを表示したいと考えています。 プロジェクトが実行可能になったらすぐに Studio を起動し、コンポジションをビルドまたは編集する前にブラウザでプレビューを開いてください。作業中はプレビューを開いたままにし、ユーザーが進捗を確認し指示を出せるようにします。

Cursor を使用している場合

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

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

詳細なオプションについては、レンダリング を参照してください。

単純な npx remotion render を超えた高度なレンダリングについては、レンダリングのベストプラクティス を参照してください。

キャプション

キャプションを扱う場合は、Remotion キャプション をロードします。

SaaS、自動化、アプリケーションの作成

Remotion SaaS スキル を使用して、Remotion を利用した SaaS アプリ(<Player>、Lambda でのレンダリング、Vercel、Cloudflare、Express.js 経由、クライアントサイドレンダリングなど)に関する知識、または適切な SaaS テンプレートの検索に役立ててください。

Remotion API とドキュメントの参照

現在の Remotion ドキュメントを検索して読むには、Remotion ドキュメント をロードします。

アップグレード

Remotion、関連パッケージ、互換性のある Mediabunny パッケージ、インストール済みの Remotion Agent スキルをアップグレードするには、Remotion アップグレード をロードします。

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

関連スキル