Communitygithub.com

ahmadzulfi/video

所有 Remotion 技能的路由器

video 是什麼?

這是一個用於生成影片的 AI 助手技能路由器,專門針對 Remotion 框架設計。它會根據使用者的需求自動載入對應的子技能,例如建立新影片或合成、地圖動畫、多媒體處理、字幕添加、SaaS 整合等,並提供一系列關於 Remotion 標記語言、互動性最佳實踐、升級指南的詳細參考。該技能支援所有基於 Remotion 的專案,包括 Cursor、Claude Code 等開發環境,並強調以預覽為中心的開發流程:除非使用者明確要求匯出,否則優先啟動 Studio 預覽畫面。技能整合了 WebMCP 工具,並包含對 Mapbox、MapLibre、GeoJSON 等地理資料的支援,以及對瀏覽器內多媒體操作(如裁剪、修剪、取得元資料)的指引。

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

如果您使用其他具有應用程式內瀏覽器的 AI 用戶端

您可以使用上述命令讓 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.

相關技能