Official影片與動畫github.com

remotion-create

建立一個新的 Remotion 影片專案

remotion-create 是什麼?

此技能提供建立 Remotion 影片專案的完整指引,涵蓋從專案初始化、安裝依賴項到設計與預覽工作流程的所有步驟。它支援在現有空資料夾或非空資料夾中進行專案建置,並能根據實際情況選擇合適的目錄結構。該技能整合了 React Markup 的建置建議,並支援多場景影片、時間軸剪輯、互動設計最佳實踐,以及可選的 TailwindCSS 樣式設定。開發者可以透過在瀏覽器中啟動 Remotion Studio 實現即時預覽,從而在開發過程中即時調整內容,提高工作效率。此技能適用於 Claude Code、Cursor、Codex 等 AI 代理,讓使用者能夠快速建立並迭代 Remotion 影片專案。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/remotion-dev/skills/tree/main/skills/remotion-create

Installed? Explore more 影片與動畫 skills: steipete/video-frames, steipete/summarize, openclaw/openclaw · View all 6 →

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

以下是建立新的 Remotion 專案與組合的說明。 如果這不是下一項任務,請參閱 Remotion 最佳實踐

建立專案

如果專案已存在,請跳過此步驟。 請確認 Node.js 和 Git 已安裝,且當前資料夾適合用於建立新專案。

在選擇建立位置之前,請檢查當前資料夾內容(包含隱藏檔案)。

空資料夾

如果資料夾為空,或只包含可拋棄的作業系統元資料(例如 .DS_Store),請直接在當前資料夾中建立專案。 請先移除這些可拋棄的元資料檔案,因為 create-video 會拒絕非空資料夾。 請勿將所有隱藏檔案視為可拋棄的內容:諸如 .env 檔案和 .git 目錄都是有意義的內容。

在現有資料夾中建立:

npx create-video@latest --yes --blank --no-tailwind .
npm i

非空資料夾

如果當前資料夾包含有意義的內容,且尚未存在專案,請在新的子資料夾中建立。 將 my-video 替換為合適的專案名稱。

npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i

在建立影片前先開啟預覽

一旦專案可以執行,請在撰寫或修改組合之前,先在瀏覽器中開啟 Remotion Studio。對於新專案,請在建立並安裝依賴項後立即執行此操作。對於現有專案,請在編輯影片之前執行此操作。在工作期間讓 Studio 保持執行,以便使用者可以即時看到變更結果並引導最終成果。

設計影片

保留建立的專案結構,並加入 React Markup。 請遵循 Remotion React Markup 最佳實踐和 影片佈局規則 以取得影片優先佈局和文字尺寸指導。

在編寫註冊 <Composition> 或 <Still> 元素的根目錄之前, 請遵循組合與靜態畫面。

這是時間軸中的片段嗎?

如果影片在時間軸上排列多個影片或音訊片段,請在編寫時間軸前遵循影片編輯指導。讓每個應該獨立編輯的片段擁有自己的 JSX 節點。

這是一個多場景影片嗎?

如果這是包含多個連續場景的影片,請遵循多場景影片的指導說明。

互動性最佳實踐

透過遵循 Remotion 互動性最佳實踐來建構 React Markup,您可以讓使用者在 Studio 中進行編輯,並將變更寫回程式碼。

TailwindCSS

如果需要 Tailwind,請參閱 tailwind.md 以了解如何在 Remotion 中使用 TailwindCSS。

後續步驟

影片建立流程已完成。 對於後續的提示,請使用 Remotion 最佳實踐。

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

相關技能