Communitygithub.com

serdarky-lab/Videos

所有 Remotion 技能的統一路由器

Videos 是什麼?

此技能作為 Remotion 影片創作流程的集中路由器與工作流程協調器。它會偵測使用者意圖,並精確載入適當的專門參考文件,例如為新專案載入「建立新的 Remotion 影片」、為地理相關內容載入「Remotion 地圖」,或為字幕載入「Remotion 字幕」。該技能適用於任何使用 Remotion 開發 AI 程式碼的代理程式,尤其適用於 Cursor 和一般瀏覽器型客戶端。它強調互動式預覽,預設使用 `npx remotion studio` 啟動 Studio 並在瀏覽器中開啟,而非直接渲染最終影片,除非使用者明確要求輸出 MP4。此外,它還提供處理使用者程式碼變更、採用 React 標記最佳實務及管理升級的準則。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/serdarky-lab/Videos/tree/HEAD/.agents/skills/remotion-best-practices

在你喜歡的 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 載入成功。一旦有合成檔存在,請確認其影片預覽能夠載入。如果您無法在該處開啟,請執行不帶 --no-open 的 Studio。 您可以透過導航至 /[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 升級。

相關技能