Communitygithub.com

Guilhermeslvg/video-portfolio

所有 Remotion 技能的統一路由器

video-portfolio 是什麼?

此技能作為 Remotion 相關技能的智慧路由器,能根據使用者的意圖自動載入對應的專用技能檔案。它涵蓋了從建立新影片、專案初始化、React 標記最佳實踐、地圖與多媒體處理,到互動性改進、預覽啟動、影片渲染、字幕處理、SaaS 應用程式建立、API 查詢,以及版本升級等完整的開發流程。技能支援 Claude Code、Cursor、Codex 等多種 AI 代理客戶端,並針對不同客戶端(如 Cursor 或支援內嵌瀏覽器的代理)提供了差異化的 Studio 啟動與預覽操作指引。其核心設計是避免覆蓋使用者的手動修改,並在必要時引導至更詳細的參考文件,確保開發體驗流暢且不遺失上下文。

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

Individual skills in this repo

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

相關技能