Communitygithub.com

iamhuynq/video-remotion

所有 Remotion 技能的路由器

video-remotion 是什麼?

這個技能作為 Remotion 相關子技能的核心路由器,根據使用者的不同需求自動載入對應的參考文件。當使用者要求建立或編輯影片時,它會引導至建立、React 標記、地圖、多媒體、互動、字幕、SaaS 整合、升級等專用技能。它避免了重複的指令碼,並確保正確處理各種場景:建立新專案、在 Studio 中預覽、渲染最終影片,以及處理地圖或字幕等高級任務。它支援 Cursor、內建瀏覽器代理用戶端和沒有內建瀏覽器的 CLI 工作流程。使用者變更會被保留,並且除非明確要求,否則不會執行渲染。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/iamhuynq/video-remotion/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 代理技能,請載入 Remotion 升級。

Individual skills in this repo

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

相關技能