Communitygithub.com

3bkader-gpt/remotion-tiktok-gym-editor

全てのRemotionスキルへのルーター。

remotion-tiktok-gym-editor とは?

このスキルは、Remotionプロジェクトの作成、編集、レンダリングにおけるAIエージェントの行動を調整するための包括的なルーターとして機能します。ユーザーが新しいビデオの作成、マップの追加、キャプションの処理、SaaSのセットアップ、またはライブラリのアップグレードを依頼した場合、本スキルは適切なサブスキル(例:`remotion-create`、`remotion-maps`、`remotion-captions`、`remotion-saas`、`remotion-upgrade`)に処理を振り分けます。これにより、AIエージェントは常に最新かつ正確なRemotion APIとベストプラクティスを参照することができます。また、Studioプレビューを自動的に起動する方法(Cursor、アプリ内ブラウザ、ブラウザなし)についても詳細に説明しており、開発者はインタラクティブなプレビューを確認しながら作業を進めることができます。このスキルは、Claude Code、Cursor、CodexなどのRemotion対応AIエージェントで使用し、複雑なビデオ制作ワークフローを効率的に支援することを目的としています。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/3bkader-gpt/remotion-tiktok-gym-editor/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スキルを使用して、Remotionを活用したSaaSアプリケーション(<Player>、Lambdaでのレンダリング、Vercel、Cloudflare、Express.js経由、クライアントサイドレンダリング、適切な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.

関連スキル