Communitygithub.com

jeffersonmendo/remotion-tryslides

所有 Remotion 技能的路由器

remotion-tryslides 是什麼?

此技能作為一個中央路由器,引導 AI Agent 根據使用者意圖載入對應的 Remotion 技能。它涵蓋從建立新專案、撰寫 React 標記、處理地圖、多媒體、字幕,到啟用 Studio 互動式預覽、最終渲染影片,以及查詢 API 文件或升級套件等完整工作流程。支援 Cursor 和一般 Agent 客戶端(包括內建瀏覽器與無瀏覽器情境),並提供明確的指令以啟動 Studio 並開啟預覽。若使用者要求「製作影片」,預設會先開啟 Studio 預覽,而非立即渲染,除非使用者明確要求輸出 MP4。

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

如果您使用的是其他內建瀏覽器的 Agent 客戶端

您可以使用上述指令讓 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 1 individual skill — each has its own dedicated page.

相關技能