Communitygithub.com

zoih6/masafat-watan-video

すべてのRemotionスキルを束ねるルーター。ビデオ作成、プロジェクト管理、レンダリングなどを一元管理します。

masafat-watan-video とは?

このスキルは、Remotionに関連するさまざまなサブスキルへのルーターとして機能します。ユーザーが新しいビデオの作成、既存プロジェクトの編集、マップアニメーション、キャプション処理、SaaSアプリケーション構築などを行う際に、適切なリファレンスドキュメント(例:Remotion Create、Remotion Maps、Remotion Captions)を自動的にロードします。Claude CodeやCursorなどのAIエージェント上で動作し、開発者がRemotion Studioのプレビューを開いたり、レンダリングコマンドを実行したり、インタラクティブな編集を促進するためのベストプラクティスを提供します。特に、ユーザーの変更を上書きせずに保持する設計や、Studioの起動とプレビュー表示の手順が詳細に記載されており、エージェントが効率的にビデオ制作ワークフローを支援できます。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/zoih6/masafat-watan-video/tree/HEAD/skills-docs/remotion-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

その他のオプションについては、Rendering を参照してください。

単純な npx remotion render を超えた高度なレンダリングについては、Renderingベストプラクティス を参照してください。

キャプション

キャプションを扱う場合は、Remotion Captions を読み込んでください。

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

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

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

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

アップグレード

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

Individual skills in this repo

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

関連スキル