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 原始碼檔案。所有渲染時的運動都必須由 Remotion 基於幀的基礎元件驅動，而非瀏覽器計時 API，因為輸出是伺服器端逐幀渲染的，不會在瀏覽器中即時播放：
- 使用
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)` }}`）。 - 從
useVideoConfig()取得fps，而非硬編碼的常數。
工作流程
- 了解影片目標（社交短片、Podcast、資料故事、產品介紹）。
- 從 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 |
| 創作者 Reel | creator-reel |
| Podcast 片段 | podcast-clip |
| 資料解說 | data-story |
| 產品發布 | intro |