Communitygithub.com

hiwurun/remotion-saas-boilerplate

所有 Remotion 技能的總路由

remotion-saas-boilerplate 是什麼?

這是一個 Remotion Agent 技能的路由器,專門用來引導 AI 代理在處理用戶請求時,根據具體的任務類型(如創作影片、設定專案、處理多媒體、字幕、地圖、SaaS 等)自動載入對應的詳細技能文件。此路由器本身不提供實作邏輯,而是將請求派發到如 `remotion-create`、`remotion-markup`、`remotion-maps`、`remotion-multimedia`、`remotion-captions`、`remotion-saas`、`remotion-studio`、`remotion-render`、`remotion-upgrade` 以及 `remotion-docs` 等專門技能中。當用戶要求「建立」或「創作」影片時,路由器會優先啟動 Studio 預覽,除非用戶明確要求渲染 MP4。此技能適用於 Claude Code、Cursor 等支援 MCP 的 AI 代理平台,特別適合需要整合多個 Remotion 工作流程的開發者,確保 AI 能夠根據情境選擇最合適的參考文件,避免直接覆蓋使用者手動修改的程式碼。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/hiwurun/remotion-saas-boilerplate/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 升級。

Individual skills in this repo

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

相關技能