Communitygithub.com

Remocn/remocn

單一 remocn 元件一鍵加入 Remotion 專案:讀取說明文件、執行 shadcn add,並以正確長度放入 Sequence 中。

remocn 是什麼?

此技能為 Remotion 專案加入單一 remocn UI/動畫元件。首先解析使用者需求:若是精確元件名稱直接使用,否則從 remocn 索引清單挑選最佳候選。接著讀取對應說明文件,取得 props、範例、長度與避用建議。若專案尚未設定 remocn registry,會自動執行 `setup.mjs` 初始化。然後以 `npx shadcn add @remocn/<name>` 安裝元件及其相依性。安裝後,根據說明文件範例產生使用程式碼片段,並置於適當的 `<Sequence>` 或 `TransitionSeries.Transition` 中,確保長度至少等於元件的 `Length` 加上停留時間。最後執行 TypeScript 型別檢查與 Remotion still 渲染,驗證結果。支援 Claude Code、Cursor 等支援 MCP 工具的平台。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Remocn/remocn/tree/HEAD/plugins/remocn/skills/add

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

加入一個 remocn 元件

要求: $ARGUMENTS

請先載入 remocn 技能以取得層級慣例、Canvas 與時間設定。

  1. 解析名稱。 若要求是精確的元件名稱則直接使用;若是描述性內容(例如「一個故障效果標題」、「一個快速切換」),則從 https://remocn.dev/llms-components.txt 建立候選清單,並提供最佳的二到三個選項,每個附上其 Use for 說明與長度。請等待使用者挑選。
  2. 讀取說明頁。 擷取索引提供的 .md 說明文件網址。記錄 props、範例、Length 及任何 Avoid for 備註。若避用備註與使用者需求相符,請告知並建議其指名的替代元件。
  3. 一次性專案準備。 若 components.json 中沒有 @remocn registry,請先執行 node "${CLAUDE_SKILL_DIR}/../video/scripts/setup.mjs" <project-root>(在 Claude Code 外部則從本技能資料夾執行 ../video/scripts/setup.mjs)。其 JSON 結果會顯示寫入了哪些檔案,請轉達任何 warning。
  4. 安裝。 執行 npx shadcn add @remocn/<name>。相依性會自動傳遞安裝;請列出哪些檔案已安放。
  5. 使用元件。 根據說明文件範例產生使用程式碼片段,大小符合 Canvas,置於一個 <Sequence durationInFrames> 中,其長度至少為元件的 Length 加上停留時間。轉場效果則應放入 TransitionSeries.Transition 中作為 presentation,並以 linearTiming/springTiming 設定其 Length。若使用者指定了放置位置則放在該處;否則詢問放置位置。
  6. 檢查。 執行 npx tsc --noEmit,然後在元件動畫結束時渲染一張 still npx remotion still <composition> out/<name>.png --frame=<n> 並查看結果。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能