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 為主要示範工具——這是目前 Remotion 官方推薦、Skills 整合度最高的 AI 編程工具。

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

Step 1：確認 Node.js 版本

node --version

需要 v18.0.0 以上。還沒裝？到 nodejs.org 下載 LTS 版本。

Step 2：跑 npx create-video@latest

在你想放專案的資料夾執行：

npx create-video@latest

接下來會進入一個互動式選單，從 2026 年的 create-video 起，Skills 已經整合在這個精靈裡面，不需要另外執行 npx skills add。下面是你會依序遇到的每一個問題。

2.1 專案名稱

? What would you like to name your video?
› my-first-video

輸入一個你喜歡的資料夾名稱，按 Enter。

2.2 Choose a template

Welcome to Remotion!
◆ Choose a template:
│ › Blank   Nothing except an empty canvas
│   Hello World
│   ...

選 Blank（一張白紙，最適合從 AI prompt 開始）。按 Enter。

2.3 Add TailwindCSS?

✓ Add TailwindCSS?  · No / Yes

選 Yes。Tailwind 在 Remotion 裡非常好用，排版時可以直接用 utility class。

2.4 Add agent skills?

✓ Add agent skills?  · No / Yes

這就是本篇的重點。選 Yes。

接下來 create-video 會從 https://github.com/remotion-dev/skills.git clone Skills repo、偵測你機器上裝了哪些 AI agents，然後進入 Skills 安裝精靈。

2.5 Install to（要裝給哪些 agent）

Detected 3 agents

◆ Install to
│ ● Same as last time (Recommended) (Claude Code, Codex, Gemini CLI)
│ ○ All detected agents
│ ○ Select specific agents

選「Same as last time (Recommended)」（第一次安裝等同於 All detected）。偵測到的 agents 會顯示在括號裡，Claude Code 一定會在裡面（前提是你裝過 @anthropic-ai/claude-code）。

💡 如果你完全沒裝過任何 AI CLI，Skills 會裝不到任何 agent。先跑 npm install -g @anthropic-ai/claude-code，然後重新跑 npx create-video@latest。

2.6 Installation scope

◆ Installation scope
│ ● Project (Recommended)
│ ○ Global

選 Project。專案內安裝最可靠，不同專案可以維持不同版本的 Skills。

2.7 Installation method

◆ Installation method
│ ● Symlink (Recommended)
│ ○ Copy

選 Symlink。Symlink 讓所有 agent 共用同一份 Skills 檔案，之後更新時所有 agent 都會一起吃到新版本。

2.8 Installation Summary + Proceed

Installation Summary ──────────────────────────────────┐
│                                                       │
│  ./.agents/skills/remotion-best-practices             │
│    symlink → Claude Code, Codex, Gemini CLI           │
│                                                       │
└───────────────────────────────────────────────────────┘

◆ Proceed with installation?
│ ● Yes / ○ No

確認沒問題，選 Yes，精靈就會實際建立 symlink。

完成後會看到：

Installation complete
Installed 1 skill to N agents

  ./.agents/skills/remotion-best-practices
    symlink → Claude Code, Codex, Gemini CLI

2.9 Open in Cursor?

Done!

Copied to my-first-video.

Get started by running:  cd my-first-video
                         npm i
                         npm run dev

✓ 💻 Open in Cursor?  · No / Yes

選 No。 本篇教學主打 Claude Code，等下我們會在終端機直接用 claude 啟動，不需要另外開 Cursor IDE。

⚠️ 這個 prompt 有時候預設會停在 Yes，如果你一路按 Enter 的話 Cursor 會自動跳出來。記得用左方向鍵選 No，再按 Enter。

Step 3：安裝相依套件 + 開 Studio

cd my-first-video
npm i
npm run dev

npm i 會跑幾分鐘（Remotion 的 Chromium 相依套件比較大）。跑完後 npm run dev 會啟動 Remotion Studio，預設在 http://localhost:3000。

打開瀏覽器你會看到 Remotion Studio 的預設介面，左側顯示空 Composition，中央是預覽區。

💡 下一篇 第一支影片：從開啟 Remotion 到 AI 生成動畫 會接著示範怎麼在 Studio 裡跟 Claude Code 協作做出第一支影片。

Step 4：驗證 Skills 有裝好

方法一：檢查檔案

ls .agents/skills/
# 應該看到：remotion-best-practices
 
ls .agents/skills/remotion-best-practices
# 應該看到 SKILL.md 和 rules/ 資料夾

注意路徑是 .agents/skills/，不是舊版文件裡面的 .claude/skills/。.agents/ 是 2026 年 Skills 的新標準路徑，所有 agent（Claude Code、Codex、Gemini CLI 等）都從這裡讀取。

方法二：在專案內啟動 Claude Code

在另一個終端機視窗：

cd my-first-video
claude

第一次啟動 Claude Code 時會要求登入（付費訂閱，詳見 Claude Code 官方頁面）。登入完成後，問 Claude 一個 Remotion 問題：

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

Skills 有載入——Claude 會回答：

• 使用 useCurrentFrame() 取得當前幀數
• 用 interpolate() 把 frame 映射到 opacity
• 示範 frame-based 的動畫寫法

Skills 沒載入——Claude 可能會回答：

• 用 CSS transition 或 @keyframes
• 用 React 的 useState + setTimeout
• 跟一般網頁動畫沒兩樣

如果是後者，檢查你是不是在 my-first-video 資料夾裡面啟動 claude。Skills 是專案層級的設定，在上層目錄啟動的 Claude Code 吃不到。

方法三：直接試做一支影片

給 Claude 這個 prompt 試試：

「建立一支 5 秒的影片：深藍色背景，白色文字 "Hello Remotion" 從畫面中央淡入，停留 2 秒後向左滑出。」

如果 Claude 產出的程式碼包含 useCurrentFrame()、interpolate()、<Composition> 等 Remotion 語法，並且幫你註冊到 src/Root.tsx，就代表 Skills 有正確載入。

更新 Skills

Remotion 更新很頻繁，想更新 Skills 到最新版有兩種方式：

方式 1：重跑 create-video 精靈的 Skills 部分

cd my-first-video
npx skills add remotion-dev/skills

方式 2：如果你用的是 Symlink 安裝

Symlink 指向的是 create-video cache 的 Skills repo，只要重跑 npx create-video@latest 建立新專案時會自動拉最新版，舊專案的 symlink 也會跟著更新（因為指向同一份檔案）。

其他 AI 工具

雖然本篇以 Claude Code 為主，但 create-video 的 Skills 精靈會自動偵測並安裝到以下所有 agent：

只要在 Step 2.5 選「Same as last time」或「All detected agents」，全部會一次裝好。

💡 Cursor 有額外的 MCP 整合可以即時查詢最新 Remotion 文件。如果你要用 Cursor，可以額外在設定中加入 MCP server：npx @remotion/mcp@latest。

常見問題

npx: command not found

Node.js 沒裝好。重新安裝或更新：

nvm install 18
nvm use 18

Detected 0 agents

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

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

然後回到 Step 2 重跑 npx create-video@latest。

Skills 裝了但 Claude 沒反應

確認三件事：

1. 你在專案根目錄裡面啟動 claude（不是上層目錄）
2. .agents/skills/remotion-best-practices 存在（用 ls 檢查）
3. 你已經重啟 Claude Code（Skills 是在啟動時載入的）

Remotion Studio 打不開

確認 npm i 跑完沒有紅字錯誤，然後：

npm run dev

如果 port 3000 被佔用，Remotion 會自動用 3001 或其他 port，看終端機輸出的網址。

Open in Cursor? 不小心選了 Yes，Cursor 跳出來了

沒關係，直接關掉 Cursor 視窗，回到終端機用 claude 啟動 Claude Code 即可。專案本身沒有差別，你不需要重跑 create-video。

下一步

裝好 Skills 之後，你可以：

1. 試做第一支影片 — T2：第一支影片
2. 學習核心概念 — 閱讀 Remotion 基礎教學
3. 看看別人怎麼做 — 瀏覽作品展示

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