Communitygithub.com

iamhuynq/video-remotion

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

video-remotion とは?

このスキルはRemotionを使用した動画作成・編集のためのエントリーポイント(ルーター)です。ユーザーが新しい動画やコンポジションを作成したい場合、まずこのスキルが起動し、適切なサブスキル(新規プロジェクト作成、Reactマークアップ、地図、マルチメディア処理、キャプション、SaaSアプリケーション構築など)へ案内します。各タスクに対して最適なリファレンスドキュメントを動的にロードするため、開発者は迷うことなく目的に応じた手順を踏むことができます。対応プラットフォームはClaude Code、Cursor、Codexなどのエージェント環境で、インブラウザプレビューやレンダリングの指示も含まれています。このスキールドは、ユーザーの変更を尊重し、予期しない上書きを防ぐガイドラインも含んでいます。

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

--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 Captionsを読み込んでください。

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

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

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

最新のRemotionドキュメントを検索・閲覧するには、Remotion Docsを読み込んでください。

アップグレード

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

Individual skills in this repo

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

関連スキル