Communitygithub.com

Shenixo/remotion_portfolio

Remotion スキル群のルーター。ユーザーの意図に基づいて適切な Remotion スキルに誘導します。

remotion_portfolio とは?

このスキルは、Remotion 関連の複数のサブスキル(作成、マークアップ、マルチメディア、マップ、キャプション、SaaS、アップグレードなど)を統合的にルーティングするエントリポイントです。ユーザーが「動画を作成」「レンダリング」「マップを追加」「キャプションを付ける」といった要求をした際に、その意図を解析し、最適な参照ドキュメント(REFERENCE.md)へ自動的に誘導します。また、対話中のユーザーによるコード変更を上書きしないように注意し、動画プレビューの起動手順やレンダリングのタイミングについても具体的な CLI コマンドとともに指示しています。Cursor やその他のエージェントクライアントに応じた Studio の起動方法にも対応しているため、開発者はスムーズに Remotion プロジェクトを開始・編集できます。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Shenixo/remotion_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 Agent スキルをアップグレードするには、Remotion アップグレード を読み込んでください。

関連スキル