RemotionUI エージェント
このスキルは、単発のエフェクトではなく、RemotionUI を使って 本格的な Remotion コンポジション を構築する際に使用します。
厳格なルール
- フレームワークの基本については、Remotion ドキュメント を参照してください。
- 既製の ソースコンポーネント は RemotionUI を使用し、ユーザーのリポジトリにコピーします。
- コンポーネントをインポートする前に、
npx remotion-ui@latest add <component>を実行します。 - ローカルパスからインポートします：
@/compositions/...、@/remotion/scenes/...、@/remotion/primitives/... remotion-uinpm パッケージから UI コンポーネントを インポートしないでください — このパッケージは CLI のみを提供し、コンポーネントライブラリは含まれません。コンポーネントは、shadcn/ui と同様に、コピー＆ペーストされたソースファイルです。
Remotion アニメーションルール（必須）
RemotionUI コンポーネントは、プレーンな Remotion ソースファイルです。すべてのレンダリング時のモーションは、ブラウザタイミング API ではなく、Remotion のフレームベースのプリミティブによって駆動される必要があります。これは、出力がサーバーサイドでフレーム単位でレンダリングされ、ブラウザでリアルタイムに再生されるわけではないためです：
useCurrentFrame()を使用して現在のフレームを読み取り、interpolate()を使用してフレーム範囲を値範囲にマッピングし、spring()を使用して物理的な落ち着いたモーションを実現します。<Sequence from={...} durationInFrames={...}>でタイミングを制御します —setTimeout、setInterval、requestAnimationFrameは絶対に使用しないでください。- レンダリングされる動画に表示する必要があるものには、CSS トランジション、CSS
animation/@keyframes、または Tailwind のアニメーションユーティリティクラス（animate-*、transition-*）を絶対に使用しないでください。これらはライブブラウザのウォールクロック時間で動作し、Remotion のサーバーサイドレンダリング中にフレーム単位で正確に存在しません。そのため、出力では見た目がおかしくなったり、完全に欠落したりします。 - 静的なレイアウト/スペーシング/カラークラスに Tailwind を使用することは問題ありません — このルールはモーション/タイミングにのみ適用されます。
- すべての不透明度/位置/スケール/回転値は、
interpolate(frame, [inputRange], [outputRange], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })またはspring({ frame, fps, config })から導出し、インラインstyle（例：style={{ opacity, transform: \translateY(${y}px)` }}`）で適用します。 fpsはハードコードされた定数ではなく、useVideoConfig()から取得します。
ワークフロー
- 動画の目標を理解する（ソーシャルクリップ、ポッドキャスト、データストーリー、製品紹介）。
- https://remotionui.com/ai/components.json から主要なコンポジションを選択します。
- セットアップに問題があるように見える場合は、
npx remotion-ui doctorを実行します。 - インストール：
npx remotion-ui add <name> - ローカルソースパスからインポートし、
Root.tsxで構成します。 - 上記のアニメーションルールに従い、コピーしたソースをブランド、タイミング、レイアウトに合わせてカスタマイズします。
エージェントインデックス
- コンポーネント一覧：https://remotionui.com/ai/components.json
- コンポーネントごとの詳細：https://remotionui.com/ai/components/.json
- 完全ガイド：https://remotionui.com/ai/remotionui-agent.md
- レジストリ：https://remotionui.com/r/index.json
CLI（エージェント向け）
npx remotion-ui init --existing # remotion-ui.json をブートストラップ
npx remotion-ui doctor --json # セットアップを診断
npx remotion-ui search -q caption --json
npx remotion-ui view social-clip --json
npx remotion-ui list --json
npx remotion-ui add social-clip caption-highlight
既存の Remotion プロジェクト
cd your-remotion-project
npx remotion-ui init --existing
npx remotion-ui add social-clip
npm run dev
コンポジション優先のデフォルト
| 目標 | 主要コンポジション |
|---|---|
| 9:16 ソーシャルクリップ | social-clip |
| クリエイターリール | creator-reel |
| ポッドキャストクリップ | podcast-clip |
| データ説明動画 | data-story |
| 製品紹介 | intro |