Communitygithub.com

hiwurun/remotion-saas-boilerplate

Remotion スキルのルーター:ユーザーの意図に応じて適切なサブスキル(動画作成、プロジェクトセットアップ、マップ、マルチメディア、SaaSなど)に誘導します。

remotion-saas-boilerplate とは?

このスキルは、Remotion関連の複数のサブスキルを統合管理する中央ルーターです。ユーザーが「動画を作成」「プロジェクトをセットアップ」「地図を追加」「SaaSを構築」といった発言をした際に、適切なサブスキルの参照ドキュメント(REFERENCE.md)を自動的に読み込むことで、AIエージェントが正しい知識とベストプラクティスを利用できるようにします。主にClaude Code、Cursor、CodexなどのAIコーディングエージェント向けに設計されており、ユーザーの変更を上書きしないように注意しながら、効率的な動画生成とプロジェクト管理を支援します。特に、プレビュー(Studio)の起動をデフォルトとし、明示的なレンダリング要求のみに対応する点が特徴で、対話的な開発フローを促進します。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/hiwurun/remotion-saas-boilerplate/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でインタラクティブに変更を加え、コードに書き戻すことができます。関連する場合:インタラクティブ性のベストプラクティス

プレビューを開く

ユーザーが「動画を「作る」、「作成する」などと依頼した場合、 明示的な指示がない限り、デフォルトでは動画をレンダリングしないでください。代わりにインタラクティブなプレビューを表示させます。 プロジェクトが実行可能になったらすぐに、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 Captionsを読み込んでください。

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

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

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

現在のRemotionドキュメントを検索して読むには、Remotion Docsを読み込んでください。

アップグレード

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

Individual skills in this repo

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

関連スキル