Communitygithub.com

3bkader-gpt/remotion-tiktok-gym-editor

所有 Remotion 技能的總路由,用於引導使用者建立、編輯和預覽影片。

remotion-tiktok-gym-editor 是什麼?

此技能作為 Remotion 相關任務的中央路由與中樞,根據使用者需求智慧地載入適當的子技能參考文件。它能處理各種使用場景,例如建立新影片或合成(載入「建立新 Remotion 影片」技能)、設定新 Remotion 專案(載入「建立新 Remotion 專案」技能)、以及正確撰寫 React 標記(載入「Remotion 標記最佳實踐」技能)。該技能支援地圖(靜態地圖、動態路線、Mapbox、MapLibre、MapTiler、GeoJSON 和 3D 飛越)、多媒體(修剪、裁剪影片、取得中繼資料)、字幕、透過 Studio 互動式變更的互動性最佳實踐,以及建立基於 Remotion 的 SaaS 應用程式。它根據使用者環境(Cursor、具有應用程式內瀏覽器的代理用戶端,或無瀏覽器)引導使用者開啟 Remotion Studio 預覽,並僅在明確要求時才執行影片渲染。該技能也支援查閱 Remotion 文件、升級套件,以及建立自動化或雲端渲染解決方案。

相容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/3bkader-gpt/remotion-tiktok-gym-editor/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 2 individual skills — each has its own dedicated page.

相關技能