Communitygithub.com

thanhmati/in-shorts

用於所有 Remotion 技能的路由器

in-shorts 是什麼?

此技能作為所有 Remotion 相關技能的中央路由器,根據使用者的需求自動載入適當的參考文件。當使用者要求建立影片、設定新專案、處理地圖、多媒體或字幕時,此技能會引導至正確的專用技能檔案(如 remotion-create、remotion-maps、remotion-captions 等)。它支援多種平台,包括 Cursor 和其他具有應用程式內瀏覽器的代理客戶端,並提供啟動 Studio 的明確指示,以進行互動式預覽。此外,它還涵蓋了渲染、互動性最佳實務、SaaS 應用程式以及升級 Remotion 和相關套件的指南。此路由器確保使用者始終獲得當前情境下最相關的 Remotion 指南,從而提高工作效率並減少錯誤。

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

相關技能