Communitygithub.com

ahmadzulfi/video

すべてのRemotionスキルのルーター

video とは?

このスキルは、Remotionを使用した動画作成プロジェクトにおいて、適切なサブスキル(REFERENCE.md)を自動的にルーティングするための中心的なハブです。ユーザーが「動画を作成する」「新しいプロジェクトをセットアップする」「地図を追加する」「マルチメディア処理を行う」などとリクエストした際に、最適なサブスキルを読み込み、その手順に従って作業を進めます。Cursor、Codex、Claude Codeなど様々なAIエージェントクライアントに対応しており、特にスタジオプレビューの起動方法(ブラウザ開きの有無)をクライアントの種類に応じて適切に選択する点が特徴です。動画レンダリングはユーザーが明示的に要求した場合のみ実行し、基本的にはインタラクティブなプレビューを優先することで、効率的な編集サイクルを実現します。また、Reactマークアップの記述方法、マップの統合、キャプション処理、SaaS構築などの高度なトピックについても、適切なタイミングで関連ドキュメントを参照させるよう設計されています。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/ahmadzulfi/video/tree/HEAD/.agents/skills/remotion-best-practices

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

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

ドキュメント

ユーザーによる変更を保持する

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

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

動画の作成

ユーザーが新しい動画やコンポジションの作成・構築を依頼した場合は、Remotionプロジェクトがすでに存在するかどうかに関わらず、新しいRemotion動画を作成する を読み込んでください。

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

現在Remotionプロジェクトが存在しない場合は、新しいRemotionプロジェクトを作成する を読み込んでください。

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

RemotionのReactマークアップを記述する場合は、Remotionマークアップのベストプラクティス を読み込んでください。

マップ

静止マップ、アニメーションルートとマーカー、地理的な説明、Mapbox、MapLibre、MapTiler、GeoJSON、または3D地理フライオーバーの場合は、Remotion Maps を読み込んでください。

マルチメディア

ブラウザ上でのマルチメディアタスク(動画のトリミング、切り抜き、メタデータ取得など)を行う場合は、Remotion Multimedia を読み込んでください。

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

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

プレビューを開く

ユーザーが動画を「作る」「作成する」などと依頼した場合、 明示的に要求されない限り、デフォルトでは動画をレンダリングしないでください。代わりにインタラクティブなプレビューを表示することを優先します。 プロジェクトが実行可能になったらすぐに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

その他のオプションについては、レンダリング を参照してください。

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

キャプション

キャプションを扱う場合は、Remotion Captions を読み込んでください。

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

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

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

最新のRemotionドキュメントを検索して読むには、Remotion Docs を読み込んでください。

アップグレード

Remotion、関連パッケージ、互換性のあるMediabunnyパッケージ、およびインストール済みのRemotionエージェントスキルをアップグレードするには、Remotion Upgrade を読み込んでください。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル