Communitygithub.com

AlexGit92s/Remotion2.0

すべてのRemotionスキルを統括するルーター

Remotion2.0 とは?

このスキルは、Remotionを使用した動画制作ワークフローにおいて、複数の専門スキルを適切にルーティングするためのエントリポイントです。ユーザーが動画作成、新規プロジェクトセットアップ、Reactマークアップ、地図(Mapbox/MapLibre/GeoJSON/3Dフライオーバー)、マルチメディア処理(トリミング・クロップ・メタデータ取得)、インタラクティブ性の向上、Studioプレビュー、レンダリング、キャプション、SaaSアプリケーション構築、APIドキュメント検索、アップグレードといったタスクを依頼した際に、対応する専用スキルのREFERENCEファイルを自動的に読み込むように設計されています。これにより、AIエージェントは状況に応じた最適なガイドラインに従い、効率的かつ一貫性のある支援を提供できます。特に、ユーザーの意図を尊重し、明示的な要求がない限りレンダリングを避けてプレビューを優先する点が特徴です。このスキルは、Claude CodeやCursorなどのAIエージェント環境で動作し、エージェントが適切なサブスキルを呼び出すためのハブとして機能します。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/AlexGit92s/Remotion2.0/tree/HEAD/.claude/skills/remotion-best-practices

お気に入りの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アプリ(<Player>、Lambda、Vercel、Cloudflare、Express.js経由のレンダリング、クライアントサイドレンダリング、適切なSaaSテンプレートの検索など)に関する知識については、Remotion SaaSスキルを使用してください。

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

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

アップグレード

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

Individual skills in this repo

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

関連スキル