Remotion AI Skills

Remotion 維護了一份 Agent Skills 清單，定義了在 Remotion 專案中工作的最佳實踐。

什麼是 Agent Skills？

Agent Skills 是一種標準化的方式，向 AI 代理提供特定框架或工具的使用規範。它們的作用類似於詳細的系統提示，但以結構化格式組織，使 AI 工具可以更有效地理解和應用這些知識。

這些 Skills 對以下 AI 代理特別有用：

Claude Code - Anthropic 的命令列 AI 開發工具
OpenAI Codex - GitHub Copilot 等工具背後的模型
Cursor - AI 優先的程式碼編輯器

安裝 Skills

執行以下指令來安裝 Remotion Skills：

npx skills add remotion-dev/skills

安裝後，相容的 AI 工具會自動讀取這些規則並應用到您的 Remotion 專案。

建立新專案時安裝

當您建立新的 Remotion 專案時，也會提供選項來添加 Skills：

npx create-video@latest

在互動式設定過程中，選擇安裝 Skills 選項，它們就會自動配置到您的新專案。

Skills 的內容

Remotion Skills 包含以下類別的知識：

核心 API 使用規範

- useCurrentFrame() 的正確使用方式
- useVideoConfig() 的返回值說明
- interpolate() 的參數和配置選項
- spring() 的物理特性設定

動畫最佳實踐

- 確定性渲染的要求
- 避免副作用的規則
- 時序和序列的組織方式
- 效能最佳化建議

元件結構規範

- 構圖（Composition）的定義方式
- 序列（Sequence）的使用時機
- 靜態資源的引用方法
- Props 的驗證和預設值

常見錯誤預防

- 禁止使用 Math.random()（非確定性）
- 禁止使用 Date.now()（非確定性）
- 非同步操作的正確處理
- 媒體載入的等待機制

在不同 AI 工具中使用

Claude Code

安裝 Skills 後，在 Claude Code 中工作時，它會自動讀取 .skills 目錄中的規則：

# 啟動 Claude Code
claude
 
# 現在可以提示 Remotion 影片
> 建立一個帶有彈跳效果的球體動畫

Cursor

在 Cursor 中，Skills 可以整合到 .cursorrules 文件或通過 Cursor 的規則系統使用：

# 在提示前自動應用 Remotion 最佳實踐

GitHub Copilot

Skills 的內容可以作為注釋或文檔字符串，幫助 Copilot 生成更準確的建議。

GitHub 上的 Skills

Skills 在 GitHub 上開放原始碼：

https://github.com/remotion-dev/remotion/tree/main/packages/skills

您可以：

查看完整的規則內容
貢獻改進建議
為特定使用場景建立自訂 Skills

自訂 Skills

如果官方 Skills 不能滿足您的需求，您可以建立自訂規則：

# 建立自訂 skills 文件
mkdir .skills
cat > .skills/custom-remotion.md << EOF
# 我的專案 Remotion 規則
 
## 專案特定設定
- 使用 1920x1080 作為預設構圖尺寸
- 所有動畫使用 30fps
- 顏色主題：主色 #FF6B6B，副色 #4ECDC4
 
## 元件命名規範
- 場景元件以 Scene 結尾
- 動畫元件以 Anim 結尾
EOF