Communitygithub.com

thanhmati/in-shorts

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

in-shorts とは?

このスキルは、ユーザーがRemotionプロジェクトの作成、編集、レンダリングを行う際に、適切なサブスキル(参照ドキュメント)を自動的に読み込むためのルーターとして機能します。動画作成のリクエストがあれば「新規Remotion動画作成」スキルを、既存プロジェクトがなければ「新規プロジェクトセットアップ」スキルを、Reactマークアップの記述時には「Remotionマークアップのベストプラクティス」を読み込むなど、状況に応じて最適な知識ソースを選択・案内します。さらに、地図・マルチメディア・インタラクティブ性向上・キャプション・SaaS・レンダリング・アップグレードなど多岐にわたる機能に対応したサブスキルを備えており、Claude CodeやCursorなどのAIエージェントクライアント上で効率的にRemotionの開発ワークフローを実行できます。特に、プレビュー(Studio)の自動起動やメディア操作の支援により、ユーザーの意図を汲んだ柔軟な開発支援を実現します。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/thanhmati/in-shorts/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を起動し、ブラウザでプレビューを開いてください。作業中は開いたままにし、ユーザーが進捗を確認し方向性を決められるようにします。

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 Best Practicesを参照してください。

キャプション

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

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

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

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

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

アップグレード

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

関連スキル