Communitygithub.com

GuilhermeGongora/VideoEditor

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

VideoEditor とは?

このスキルは、Remotionスキルセット全体への中央ルーターとして機能します。ユーザーが動画やコンポジションの作成、新しいプロジェクトのセットアップ、Reactマークアップの記述、マップやマルチメディアの操作などのタスクを実行するときに、適切なサブスキル(例:remotion-create、remotion-markup、remotion-maps、remotion-multimedia)を自動的にロードします。Claude CodeやCursorなどのAIエージェントクライアントとシームレスに統合でき、Studioプレビューの起動、動画のレンダリング、キャプションやSaaSアプリケーションの処理、Remotion APIの検索、パッケージのアップグレードのための明確な手順を提供します。ユーザーの変更をそのまま保持し、プロジェクトを破壊しないようにしながら、これらの機能を効率的にルーティングします。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/GuilhermeGongora/VideoEditor/tree/HEAD/.claude/skills/remotion-best-practices

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ユーザーの変更を保持する

ユーザーが会話外でコードを編集することがあります。

その間に予期しない変更を検出した場合は、上書きせず、意図的なものと見なすか、確認を求めてください。

動画の作成

ユーザーが新しい動画やコンポジションの作成を依頼した場合は、Remotionプロジェクトが既に存在するかどうかに関わらず、Create a new Remotion videoをロードします。

新しいプロジェクトのセットアップ

現在Remotionプロジェクトが存在しない場合は、Create a new Remotion projectをロードします。

Reactマークアップのベストプラクティス

Remotion Reactマークアップを記述する場合は、Remotion Markup Best Practicesをロードします。

マップ

静的なマップ、アニメーションルートとマーカー、地理的な説明、Mapbox、MapLibre、MapTiler、GeoJSON、または3D地理フライオーバーについては、Remotion Mapsをロードします。

マルチメディア

ブラウザで動画のトリミング、クロップ、メタデータ取得などのマルチメディアタスクを実行するには、Remotion Multimediaをロードします。

インタラクティブ性の向上

Remotionマークアップを適切に構造化することで、ユーザーがStudioで対話的に項目を変更し、コードに書き戻すことができます。関連する場合:Interactivity Best Practices

プレビューを開く

ユーザーが動画を「作る」、「作成する」などを依頼した場合。 ユーザーが非常に明示的でない限り、デフォルトで動画をレンダリングしないでください。代わりに、インタラクティブなプレビューを表示することを希望します。 プロジェクトが実行可能になったらすぐに、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アプリ(<Player>、Lambdaでのレンダリング、Vercel、Cloudflare、Express.js経由、クライアントサイドレンダリングなど)に関する知識、または適切なSaaSテンプレートを見つけるには、Remotion SaaS skillを使用してください。

Remotion APIとドキュメントの検索

現在のRemotionドキュメントを検索して読むには、Remotion Docsをロードします。

アップグレード

Remotion、関連パッケージ、互換性のあるMediabunnyパッケージ、インストール済みのRemotion Agent Skillsをアップグレードするには、Remotion Upgradeをロードします。

Individual skills in this repo

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

関連スキル