Communitygithub.com

mattpbakerdev-oss/ugc-shorts-pipeline

すべてのRemotionスキルを統合するルーターです。ユーザーのリクエストに応じて適切なRemotion関連スキルをロードし、ビデオ作成やプロジェクト管理を支援します。

ugc-shorts-pipeline とは?

このスキルは、Remotionベースのビデオ作成パイプラインを管理するための中央ルーターです。ユーザーが新しいビデオの作成、プロジェクトのセットアップ、マップ機能、マルチメディア処理、インタラクティブ性の向上、Studioプレビューの起動、レンダリング、キャプション、SaaSアプリケーションの構築、APIドキュメントの参照、アップグレードなど、幅広いタスクを依頼した際に、適切なサブスキル(REFERENCE.mdファイル)を自動的にロードするよう設計されています。Cursorや他のエージェントクライアント(アプリ内ブラウザあり/なし)に対応し、`npx remotion studio` コマンドを使用したプレビューの自動起動や手動URL開設をサポートします。また、ユーザーがコードに加えた変更を上書きしないよう注意を促し、予期しない変更があった場合は確認を取るよう設計されています。

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

Studioを --no-open なしで実行し、ブラウザが自動的に開くようにします:

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アップグレード をロードしてください。

関連スキル