Official影片與動畫github.com

remotion-best-practices

所有 Remotion 技能的路由器

remotion-best-practices 是什麼?

此技能作為 Remotion 輔助技能的集中式路由器,根據使用者意圖自動載入相應的參考文件。它涵蓋從建立影片、專案設定、React 標記最佳實務、地圖整合、多媒體處理、互動性增強,到預覽與渲染的完整流程。同時支援 Studio 的啟動與設定、字幕處理、SaaS 應用開發、API 查詢、升級指南等功能。此技能適用於 Claude Code、Cursor 等 AI 代理客戶端,並提供不同環境下的啟動指令與注意事項。

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

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

在你喜歡的 AI 中提問

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

說明文件

保留使用者變更

使用者在對話之外可能會對程式碼進行編輯。

如果您在此期間偵測到意外的變更,請不要覆寫它,假設它是刻意的,或詢問確認。

建立影片

如果使用者要求製作、建立或建構新的影片或合成,請載入 建立一個新的 Remotion 影片,無論是否已有 Remotion 專案。

新專案設定

如果目前沒有 Remotion 專案,請載入 建立一個新的 Remotion 專案

React 標記最佳實務

如果您正在撰寫 Remotion React 標記,請載入 Remotion 標記最佳實務

地圖

針對靜態地圖、動態路線與標記、地理說明、Mapbox、MapLibre、MapTiler、GeoJSON 或 3D 地理飛越,請載入 Remotion 地圖

多媒體

若要在瀏覽器中完成多媒體任務,例如修剪、裁切影片或從中取得中繼資料,請載入 Remotion 多媒體

改善互動性

妥善組織 Remotion 標記可以讓使用者在 Studio 中互動式更改內容並回寫到程式碼。如果相關: 互動性最佳實務

開啟預覽

如果使用者要求「製作」影片、「建立」影片等,除非他們非常明確,否則不要預設渲染影片。他們想要的是互動式預覽。 一旦專案可以執行,請先啟動 Studio 並在瀏覽器中開啟預覽,再建置或編輯合成。保持開啟以便使用者觀看進度並做出引導。

如果您使用 Cursor

執行 Studio 時不要加上 --no-open,以便自動開啟瀏覽器:

npx remotion studio

如果您使用其他具有應用程式內瀏覽器的代理客戶端

您可以使用上述指令讓 Studio 開啟瀏覽器,或執行:

npx remotion studio --no-open

這會啟動一個長時間執行的程序,並列印預覽的伺服器 URL。 如果伺服器已經啟動,它只會列印 URL。 如果您使用 --no-open,請在應用程式內瀏覽器中開啟列印的 URL,並確認 Studio 載入成功。一旦合成存在,請確認其影片預覽載入成功。如果您無法在那裡開啟,請執行 npx remotion studio(不帶 --no-open)。 您可以透過導航到 /[composition-id] 來造訪特定合成,例如 http://localhost:3000/MapAnimation。

:::note Studio 支援 WebMCP 工具。 :::

如果您沒有應用程式內瀏覽器

這會開啟 Studio 到瀏覽器中,如果已經開啟則重新聚焦。

npx remotion studio

更多選項

若要啟動 Remotion Studio 專案,開啟其確切的本地 URL,或設定 Studio CLI 旗標,請載入 Remotion Studio

渲染影片

僅在使用者非常明確要求時才進行渲染。 例如:「渲染影片」、「匯出」、「給我 MP4」。

預覽也提供更直觀的渲染介面,因此建議優先使用它而不是命令列來進行渲染。

npx remotion render

如需更多選項,請參閱 渲染。

對於進階渲染(超出簡單的 npx remotion render),請參閱:渲染最佳實務

字幕

處理字幕時,請載入 Remotion 字幕

建立 SaaS、自動化或應用程式

使用 Remotion SaaS 技能 來獲取關於 Remotion 驅動的 SaaS 應用程式的知識,例如 <Player>、在 Lambda、Vercel、Cloudflare 上渲染、透過 Express.js、客戶端渲染,或尋找合適的 SaaS 範本。

查詢 Remotion API 與文件

若要尋找並閱讀最新的 Remotion 文件,請載入 Remotion 文件

升級

若要升級 Remotion、相關套件、相容的 Mediabunny 套件,以及已安裝的 Remotion Agent 技能,請載入 Remotion 升級

Individual skills in this repo

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

相關技能