Communitygithub.com

GuilhermeGongora/VideoEditor

所有 Remotion 技能的處理路由器

VideoEditor 是什麼?

這是一個 AI Agent 技能,作為所有與 Remotion 影片製作相關技能的核心路由中樞。它能根據使用者的請求自動載入對應的參考文件,支援建立影片、設定專案、React 標記最佳實踐、地圖(Mapbox/MapLibre/GeoJSON)、多媒體剪輯、互動性設計、字幕、SaaS 自動化、API 查閱及版本升級等多種情境。技能要求使用者修改的程式碼不得被意外覆寫,並優先啟動 Remotion Studio 預覽介面而非直接渲染,讓使用者在互動式環境中編輯與監控影片。支援 Cursor、其他內建瀏覽器的 Agent 客戶端及無瀏覽器環境的多種啟動方式,並提供明確的渲染和進階客製化選項。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/GuilhermeGongora/VideoEditor/tree/HEAD/.claude/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

以不帶 --no-open 的方式執行 Studio,讓它自動開啟瀏覽器:

npx remotion studio

如果您使用其他具有內建瀏覽器的 Agent 客戶端

您可以使用上述命令讓 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 升級。

Individual skills in this repo

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

相關技能