Communitygithub.com

Guilhermeslvg/video-portfolio

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

video-portfolio とは?

このスキルは、ユーザーがRemotionを使用してビデオを作成・編集する際に、適切なサブスキルへ誘導するためのルーターとして機能します。新しいビデオの作成、プロジェクトのセットアップ、Reactマークアップのベストプラクティス、マップ(静的マップやアニメーションルート、Mapbox/MapLibre/MapTiler/GeoJSON/3Dフライオーバー)、マルチメディア処理(トリミング、クロッピング、メタデータ取得)、インタラクティブ性の向上、プレビュー表示、レンダリング、キャプション、SaaSアプリケーション構築、APIドキュメントの参照、アップグレードなど、多岐にわたるタスクをカバーしています。このスキルは、Claude CodeやCursorなどのAIエージェントクライアント上で動作し、ユーザーの要求に応じて適切なサブスキルを自動的に読み込みます。ユーザーが行った予期しないコード変更は上書きせず、意図的なものとして扱うか確認を求めるなど、ユーザーの変更を尊重する設計になっています。特に、ビデオの作成を求められた場合はデフォルトでStudioを起動してインタラクティブプレビューを表示し、明示的なレンダリング要求がある場合のみMP4出力を行います。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Guilhermeslvg/video-portfolio/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を使用している場合

--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ドキュメントを読み込んでください。

アップグレード

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

Individual skills in this repo

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

関連スキル