Remotion Skills 安裝指南：讓 AI 幫你做影片

什麼是 Remotion Skills？

Remotion Skills 是一組「教學指令」，安裝到你的 AI 編程工具後，AI 就會懂得怎麼正確撰寫 Remotion 程式碼。

沒有 Skills 的 AI 可能會：

用 CSS transition 做動畫（渲染時會失效）
用 setTimeout() 控制時間（Remotion 是以 frame 為單位）
搞錯 Composition 的結構

裝了 Skills 之後，AI 會自動使用 interpolate()、useCurrentFrame()、spring() 等 Remotion 原生 API，產出可以直接渲染的影片程式碼。

本篇教學以 Claude Code 為主要示範工具。

本篇只負責「安裝與驗證」。想直接做第一支影片，請看 T2：第一支影片。

Step 1：確認 Node.js 版本

node --version

需要 v18.0.0 以上（目前官方容器跑的是 v20.20.2）。
還沒裝？到 nodejs.org 下載 LTS 版本。

Step 2：建立專案資料夾並進入

create-video 會把專案建在你執行指令的資料夾裡，所以先建一個空資料夾再進去：

mkdir my-video
cd my-video

Step 3：執行 `npx create-video@latest`

npx create-video@latest

第一次執行會先問你要不要安裝 create-video：

Need to install the following packages:
[email protected]
Ok to proceed? (y) y

輸入 y 按 Enter，接著進入互動式精靈。

Step 4：回答精靈的問題

精靈依序問三個問題：

4.1 選模板

✔ Choose a template: › Blank Nothing except an empty canvas

用上下鍵選 Blank，按 Enter。

4.2 要不要加 TailwindCSS？

✔ Add TailwindCSS? … No / Yes

選 Yes。Tailwind 在 Remotion 裡排版很方便。

4.3 要不要安裝 Agent Skills？

✔ Add agent skills? … No / Yes

選 Yes。這會自動進入 Skills 安裝精靈。

Step 5：Skills 安裝精靈

選 Yes 之後，精靈會自動 clone Skills repo，然後問你要裝給哪些 agent：

◇  Select agents to install skills to (space to toggle)
│  Amp, Antigravity, Claude Code, Cline, Codex, Cursor,
│  Gemini CLI, GitHub Copilot, ...

用空白鍵勾選 Claude Code（以及你有在用的其他 agent），按 Enter。

接著選安裝範圍和方式：

◇  Installation scope
│  Project          ← 選這個

◇  Installation method
│  Symlink (Recommended)    ← 選這個

確認安裝摘要後選 Yes：

◇  Installation Summary ───────────────────────────────╮
│                                                      │
│  ./.agents/skills/remotion-best-practices            │
│    symlink → Claude Code, Cline, Codex ...           │
│                                                      │
├──────────────────────────────────────────────────────╯

◇  Proceed with installation?
│  Yes

完成後會再問你要不要裝 find-skills（幫助 agent 自動發現可用 skills）：

◇  Install the find-skills skill?
│  Yes

建議選 Yes，一起裝起來。

最後精靈會問要不要用編輯器開專案，選 No 繼續用終端機操作：

✔ 💻 Open in vi? … No / Yes

Step 6：安裝相依套件

npm i

完成後會看到：

added 316 packages, and audited 317 packages in 49s

2 low severity vulnerabilities

⚠️ low severity vulnerabilities 是正常的，不影響開發，忽略即可。

Step 7：啟動 Remotion Studio

npm run dev

看到以下訊息就代表成功：

Server ready - Local: http://localhost:3000
Building...
Built in 1775ms

打開瀏覽器到 http://localhost:3000，你會看到 Remotion Studio 的介面。

Step 8：驗證 Skills 有裝好

確認專案目錄裡有 .agents/skills/：

ls .agents/skills/
# remotion-best-practices
 
ls .agents/skills/remotion-best-practices/
# SKILL.md  rules/

打開另一個終端機，在專案目錄裡啟動 Claude Code：

claude

問 Claude：

「如何在 Remotion 中做一個淡入動畫？」

Skills 有載入——Claude 會用 useCurrentFrame() + interpolate() 回答，不是 CSS transition。

Skills 沒載入——Claude 會給你一般的網頁動畫寫法，跟 Remotion 無關。

更新 Skills

npx skills add remotion-dev/skills

其他 AI 工具

Skills 精靈支援超過 30 種 agent，在 Step 5 的選擇清單裡多勾幾個即可一次裝好：

Agent	備註
Claude Code	🥇 首選，整合最完整
Gemini CLI
Cline
GitHub Copilot
Cursor	另可加 MCP server

💡 Cursor 有額外的 MCP 整合可即時查詢最新 Remotion 文件：
npx @remotion/mcp@latest

常見問題

`npx: command not found`

Node.js 沒裝好，用 nvm 切版本：

nvm install 20
nvm use 20

Skills 精靈顯示「Detected 0 agents」

你沒裝任何 AI CLI，先裝 Claude Code：

npm install -g @anthropic-ai/claude-code

`fatal: server certificate verification failed`

系統缺少 CA 憑證（常見於 Docker 環境）：

apt-get update && apt-get install -y ca-certificates

Skills 裝了但 Claude 沒反應

確認你在專案根目錄啟動 claude
確認 .agents/skills/remotion-best-practices 存在
重啟 Claude Code（Skills 在啟動時載入）

Remotion Studio 打不開

確認 npm i 沒有紅字錯誤，再跑：

npm run dev

下一步

裝好之後：

試做第一支影片 — T2：第一支影片
學習核心概念 — Remotion 官方文件
看看別人怎麼做 — 作品展示

有問題歡迎到 FB 社群討論！