Communitygithub.com

AlexGit92s/Remotion2.0

所有 Remotion 技能的路由器

Remotion2.0 是什麼?

這是一個 Remotion Agent 技能的路由器,用於根據使用者請求自動選擇和載入適當的參考文件。它支援多個相關技能,包括建立影片、新專案設定、React 標記最佳實踐、地圖製作、多媒體處理、互動性改善、字幕處理,以及 SaaS 應用程式開發。此外,它也涵蓋了啟動預覽(Studio)、渲染影片、升級 Remotion 和查閱 API 文件等功能。此技能適用於 Cursor 和其他具備應用程式內瀏覽器的代理客戶端,並提供詳細的 Studio 啟動指令與選項。透過精確的路由邏輯,它能確保使用者的變更不會被意外覆寫,並引導使用者使用最直覺的預覽和渲染方式。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/AlexGit92s/Remotion2.0/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

執行 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.

相關技能