remotion-best-practices について
Remotion プロジェクトでの動画作成、編集、レンダリング、トラブルシューティングを扱うエージェント向け指示です。作業に応じたスキルの読み込みを促し、ユーザーの変更を保持して Studio のプレビューを確認する方針を示します。
主な機能
- 01用途別の Remotion スキルへ誘導
- 02予期しないユーザー変更の保持
- 03動画とプロジェクト作成の指針
- 04Studio プレビューの手順
- 05Codex での Studio トラブル対応
活用シーン
- 01Remotion 動画の作成や編集
- 02地図・マルチメディア作業の指針選択
- 03Codex での Studio プレビュー確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/remotion-best-practicesを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/openai.yamlremotion-captions/import-srt-captions.mdREFERENCE.mddisplay-captions.mdtranscribe-captions.mdremotion-captions/agents/openai.yamlremotion-create/video-layout.mdtailwind.mdREFERENCE.mdremotion-create/agents/openai.yamlremotion-docs/REFERENCE.mdremotion-docs/agents/openai.yamlremotion-interactivity/REFERENCE.mdremotion-interactivity/agents/openai.yamlremotion-maps/REFERENCE.mdremotion-maps/agents/openai.yamlremotion-maps/techniques/cesium/TECHNIQUE.mdremotion-maps/techniques/cesium/assets/cesium-path.jsoncity-path.jsonflight-path.tssample-river.geojsonremotion-maps/techniques/cesium/references/3d-data-sources.md3d-flyover-architecture.md3d-troubleshooting.mdremotion-maps/techniques/cesium/scripts/prep-cesium-path.mjsremotion-maps/techniques/mapbox/TECHNIQUE.mdremotion-maps/techniques/mapbox/references/render-stability.mdremotion-maps/techniques/maplibre/references/render-stability.mdremotion-maps/techniques/maptiler/TECHNIQUE.mdremotion-maps/techniques/maptiler/assets/MapTilerVectorElement.ts詳細
ユーザーによる変更の保持
ユーザーが会話の外でコードを編集することがあります。
その間に予期しない変更が行われたことを検知した場合は、上書きせず、意図的な変更として扱うか、確認してください。
動画の作成
ユーザーが新しい動画やコンポジションの作成を依頼した場合は、Remotion プロジェクトがすでに存在するかどうかにかかわらず、新しい Remotion 動画の作成を読み込んでください。
新しいプロジェクトのセットアップ
Remotion プロジェクトが存在しない場合は、新しい Remotion プロジェクトの作成を読み込んでください。
React マークアップのベストプラクティス
Remotion React マークアップを記述する場合は、Remotion マークアップのベストプラクティスを読み込んでください。
マップ
静的マップ、アニメーション付きルートやマーカー、地理情報の解説、Mapbox、MapLibre、MapTiler、GeoJSON、または 3D 地理フライオーバーを扱う場合は、Remotion マップを読み込んでください。
マルチメディア
動画のトリミングやクロップ、メタデータの取得など、ブラウザーでマルチメディア関連のタスクを行う場合は、Remotion マルチメディアを読み込んでください。
インタラクティブ性の向上
Remotion マークアップを適切に構成することで、ユーザーが Studio で項目をインタラクティブに変更し、コードに反映できるようにできます。該当する場合は、インタラクティブ性のベストプラクティスを参照してください。
レンダリング
単純な npx remotion render を超える高度なレンダリングについては、レンダリングのベストプラクティスを参照してください。
Remotion Studio を開く
動画を作成または編集する場合は、プロジェクトが実行可能になったらすぐに Studio を起動し、コンポジションを作成する前にプレビューを開いてください。作業中は開いたままにして、ユーザーが変更を確認し、指示できるようにしてください。
Remotion Studio でプロジェクトを起動するには、正確なローカル URL を開くか、Studio CLI フラグを設定して、Remotion Studioを読み込んでください。
キャプション
キャプションを扱う場合は、Remotion キャプションを読み込んでください。
SaaS、オートメーション、またはアプリケーションの作成
<Player>、Lambda でのレンダリング、Vercel、Cloudflare、Express.js 経由、クライアントサイドレンダリングなど、Remotion を活用した SaaS アプリに関する知識や、適切な SaaS テンプレートを探すには、Remotion SaaS スキルを使用してください。
Remotion API とドキュメントの検索
最新の Remotion ドキュメントを探して読むには、Remotion ドキュメントを読み込んでください。
アップグレード
Remotion、関連パッケージ、互換性のある Mediabunny パッケージ、およびインストール済みの Remotion Agent Skills をアップグレードするには、Remotion アップグレードを読み込んでください。
Codex のトラブルシューティング
Codex 内で実行する場合は、まずシステムブラウザーを開かずに Remotion Studio を起動してください。
npx remotion studio --no-open
Codex のアプリ内ブラウザーで表示された正確な URL を開き、Studio が読み込まれることを確認してください。コンポジションが存在する場合は、動画プレビューが読み込まれることも確認してください。そこで開けない場合は、--no-open を付けずに Studio を実行してください。
EMFILE: too many open files, watch のようなファイルウォッチャーの上限が原因で失敗した場合に限り、Codex からブラウザーを開かずにポーリングを有効にして、再試行してください。
npx remotion studio --no-open --webpack-poll 1000
再試行後、Codex のアプリ内ブラウザーで表示された正確な URL を開き、Studio が読み込まれることを確認してください。コンポジションが存在する場合は、動画プレビューが読み込まれることも確認してください。そこで開けない場合は、--no-open を付けずに再試行してください。
Codex から Studio を起動できない場合は、ユーザーに macOS のターミナルから手動で起動してもらい、すでに起動している Studio を使って作業を続けてください。Codex から Chromium を起動する際のサンドボックスエラーは、Remotion プロジェクトではなく Codex/macOS のサンドボックスが原因である可能性が高いです。