Communitygithub.com

serdarky-lab/Videos

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

Videos とは?

このスキルは、さまざまなRemotionスキル(ビデオ作成、新規プロジェクトセットアップ、Reactマークアップ、マップ、マルチメディア処理、インタラクティブ性、プレビュー、レンダリング、キャプション、SaaSアプリケーション、ドキュメント検索、アップグレードなど)を統合的に管理・ルーティングするためのエントリーポイントです。ユーザーが特定のタスクを要求した際に、適切なスキルのREFERENCE.mdを自動的に読み込むことで、効率的かつ正確なアシスタンスを提供します。Claude Code、Cursor、CodexなどのAIエージェント上で動作し、Remotionプロジェクトの開発を支援します。また、ユーザーによるコード編集の意図を尊重し、予期しない変更を上書きしないよう注意する設計になっています。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/serdarky-lab/Videos/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を実行してください。 特定のコンポジションには、/[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アプリケーション(<Player>、Lambda、Vercel、Cloudflare、Express.js経由でのレンダリング、クライアントサイドレンダリング、適切なSaaSテンプレートの検索など)に関する知識については、Remotion SaaSスキルを使用してください。

Remotion APIとドキュメントの検索

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

アップグレード

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

関連スキル