Communitygithub.com

v alehgulmetov/my-remotion-video

全Remotionスキルのルーター

my-remotion-video とは?

このスキルは、Remotionプロジェクトにおける複数のスキルを統合するルーター機能を提供します。ユーザーがビデオ作成や編集、地図機能の追加、キャプション作業などを依頼した際に、適切なスキル(例:`remotion-create`、`remotion-maps`、`remotion-captions`)を自動的にロードします。これにより、Claude Code、Cursor、CodexなどのAIエージェントが、各タスクに最適な専門スキルを効率的に利用できます。スキルは、ユーザーの変更を上書きしないよう配慮し、プレビュー表示を優先するなど、ワークフローを最適化します。対応プラットフォームはClaude Code、Cursor、Codex、その他エージェントクライアントです。

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

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

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

ドキュメント

ユーザー変更の保持

ユーザーは会話外でコードを編集することがあります。 その間に予期しない変更があった場合、上書きせず意図的であると仮定するか、確認を求めてください。

ビデオの作成

ユーザーが新しいビデオやコンポジションの作成・制作・構築を依頼した場合、Remotionプロジェクトが存在するかどうかにかかわらず、新しいRemotionビデオを作成をロードしてください。

新規プロジェクトのセットアップ

現在Remotionプロジェクトが存在しない場合、新しいRemotionプロジェクトを作成をロードしてください。

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

Remotion Reactマークアップを作成する場合、Remotionマークアップのベストプラクティスをロードしてください。

地図

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

マルチメディア

ブラウザ上でのマルチメディアタスク(ビデオのトリミング、クロップ、メタデータ取得など)を実現する場合、Remotionマルチメディアをロードしてください。

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

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を実行してください。 特定のコンポジションにアクセスするには、/[コンポジション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 Docsをロードしてください。

アップグレード

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

関連スキル