Communitygithub.com

Shenixo/remotion_portfolio

所有 Remotion 技能的路由器

remotion_portfolio 是什麼?

Shenixo/remotion_portfolio 是一個專門為 AI 代理(如 Claude Code、Cursor 等)設計的技能路由器,用於協調多個與 Remotion 相關的技能。其核心功能是根據用戶的具體請求(如創建新影片、處理地圖、多媒體或字幕、啟動 Studio 預覽或進行渲染)來**動態載入對應的參考文件**。此技能支援 Cursor、其他具備內建瀏覽器的代理客戶端以及一般終端機環境。它確保 AI 代理不會覆蓋用戶的意外編輯,並能正確引導到創建新專案、React 標記最佳實踐、地圖、多媒體、互動性、字幕、SaaS 應用程式升級等特定任務的詳細指南。該技能遵循“先預覽後渲染”的原則,除非用戶明確要求,否則預設啟動 Remotion Studio 以提供即時互動預覽。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Shenixo/remotion_portfolio/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 並在瀏覽器中開啟預覽,然後再開始建置或編輯合成。在您工作期間保持 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 升級。

相關技能