Communitygithub.com

mattpbakerdev-oss/ugc-shorts-pipeline

所有 Remotion 技能的統一路由與編排中心。管理使用者變更、影片創作、專案設定、預覽、渲染、字幕等功能。

ugc-shorts-pipeline 是什麼?

此技能作為所有 Remotion 相關子技能的路由器,為 AI 代理人提供統一的進入點。它定義了處理使用者變更、建立新影片或合成、以及從頭設定新專案的最佳流程。技能文件會根據使用者請求(例如「建立影片」、「開啟預覽」或「渲染影片」)引導代理人載入對應的參考文件,如 `remotion-create`、`remotion-markup`、`remotion-maps` 等。它特別強調保留使用者所做的程式碼變更,除非獲得明確確認,否則不會覆蓋。此路由技能支援多種 AI 用戶端環境(如 Cursor 或具有應用程式內瀏覽器的代理人平台),並為如何最佳啟動 Remotion Studio 以進行互動式預覽提供了具體指示。其主要用途是協調複雜的多步驟 Remotion 工作流程,確保代理人能根據具體任務情境正確地分派給專業的子技能。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/mattpbakerdev-oss/ugc-shorts-pipeline/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 應用程式的知識,例如 <Player>、在 Lambda、Vercel、Cloudflare 上渲染、透過 Express.js、客戶端渲染,或尋找合適的 SaaS 範本,請使用 Remotion SaaS 技能。

查詢 Remotion API 和文件

如需查找並閱讀最新的 Remotion 文件,請載入 Remotion 文件。

升級

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

相關技能