Remotion Dev技能

使用 Three.js 和 React Three Fiber 在 Remotion 中製作 3D 內容。

接受外部 Remotion Element 貢獻，方法是驗證其已提交的預覽、將其上傳至 R2、移除暫存資產，並準備…

在 packages/bugs/api/[v].ts 中新增一個 Remotion 錯誤條目。當使用者描述一個錯誤以及應透過……顯示的受影響 Remotion 版本時使用。

Add a new Remotion bug entry to packages/bugs/api/[v].ts. Use when the user describes a bug and affected Remotion versions that should be surfaced through the…

透過建立 AnyRemotionOption、註冊 CLI 解析、連接配置設定器並更新文件，來新增一個 Remotion CLI 或配置選項。當……時使用。

Add a new Remotion CLI or config option by creating an AnyRemotionOption, registering CLI parsing, wiring config setters, and updating documentation. Use when…

Add a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images, Remotion skill updates, tests, formatting, and…

在 @remotion/effects 中新增一個效果，包括實作、套件匯出、文件、示範、預覽圖片、Remotion 技能更新、測試、格式化，以及…

Add a new expert to the Remotion experts page

在 Remotion 專家頁面新增一位專家

Add a new package to the Remotion monorepo, including package scaffolding, monorepo registration, documentation, build scripts, tests, and release checklist…

在 Remotion 單一儲存庫中新增一個新套件，包括套件架構、單一儲存庫註冊、文件、建置腳本、測試與發佈檢查清單…

為 @remotion/sfx 新增一個音效

Add a browser WebCodecs bug to the Remotion Mediabunny WebCodecs bugs docs page. Use when given a Chromium, WebKit, or Firefox issue URL that should be tracked…

在Remotion Mediabunny WebCodecs錯誤文檔頁面中新增一個瀏覽器WebCodecs錯誤。當提供應被追蹤的Chromium、WebKit或Firefox問題URL時使用…

Rebuild, install, and reload the private Remotion Canvas Capture unpacked Chrome extension. Use when the extension needs to be restored after a Codex worktree…

Checkout a requested branch or ref in the Remotion repo, rename the current task to the associated PR title when running in Codex, then install dependencies…

在 Remotion 儲存庫中檢出請求的分支或引用，然後安裝依賴並建置。當使用者要求檢出引用並準備…時使用。

Start the local @remotion/convert app and open it in the Codex browser. Use when the user invokes /convert or $convert, asks to launch convert.remotion.dev…

啟動本機的 @remotion/convert 應用程式，並在 Codex 瀏覽器中開啟。當使用者呼叫 /convert 或 $convert，或要求啟動 convert.remotion.dev… 時使用。

Reference for how deprecation of public Remotion APIs is represented in TypeScript source and documentation. Use when adding, reviewing, or discussing a…

Start the Remotion docs site and open it in the Codex browser. Use when the user invokes /docs or $docs, asks to launch the local documentation site, or wants…

啟動 Remotion 文件網站，並在 Codex 瀏覽器中開啟。當使用者呼叫 /docs 或 $docs、要求啟動本地文件網站，或想要…時使用。

Add an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.

在 Remotion 文件中加入互動式示範。用於為文件頁面建立新的 <Demo> 元件時使用。

Audit and clean the Remotion GitHub masterplan hierarchy. Use when finding open issues that lack a masterplan ancestor, identifying orphaned issues that need a…

Fix a Dependabot PR by updating all monorepo instances of the dependency, running bun install, and pushing

修正 Dependabot PR，更新所有 monorepo 中的相依套件實例，執行 bun install 並推送變更。

Track Remotion CI flakes in issue

在問題中追蹤 Remotion CI 的 flake

Run Remotion formatting and style checks until they pass. Use when the user asks to fix formatting or run the formatting command.

執行 Remotion 格式與風格檢查，直到通過為止。當使用者要求修正格式或執行格式化指令時使用。

Manages stacked PRs and splits multi-part work into reviewable branches with gh-stack. Use for stack creation, viewing, edits, push, submit, sync, rebase,…

Use when rendering or replacing Remotion homepage creator strip videos, especially transparent Chrome WebM and Safari MP4 assets copied into both promo-pages…

用於渲染或替換 Remotion 首頁創作者條帶影片時使用，尤其是已複製到 promo-pages 中的透明 Chrome WebM 與 Safari MP4 資源。

Install and verify the pinned Chrome for Testing build used by the private Remotion Canvas Capture extension on Apple Silicon macOS. Use when setting up Canvas…

撰寫 Remotion 動畫的最佳實踐，使其對代理保持直觀，並可在 Remotion Studio 視覺模式中編輯。

以正確的 Remotion 命名和安全的 multiline Markdown 處理方式，建立或更新 GitHub issues

Manage GitHub Issues 2.0 relationships with gh CLI: parent issues, sub-issues, blocked-by, and blocking links.

使用 gh CLI 管理 GitHub Issues 2.0 的關聯：父問題、子問題、被阻擋與阻擋連結。

自動化拉取請求的建立，包含格式化提交與分支管理。確保不在主分支上，必要時建立功能分支。在提交前對所有受影響的套件執行 Oxfmt 程式碼格式化。使用 package.json 中的套件名稱來格式化提交與拉取請求標題（例如：「@remotion/shapes：新增心形」）。在推送變更後，使用 gh CLI 自動開啟拉取請求。

Multimedia handling with the Mediabunny library

使用 Mediabunny 庫進行多媒體處理

使用 Mediabunny 函式庫進行多媒體處理

使用 Mediabunny 庫進行多媒體處理

等待 Remotion 拉取請求變為可合併狀態，處理合併衝突，區分真正的 CI 失敗與不穩定測試，透過不穩定測試重新執行檢查…

Scaffold a new Remotion Element with a correctly configured preview composition for development in the docs Remotion Studio.

Fix newly added optional parameters, optional React props, and optional type/interface members in Remotion monorepo diffs by converting internal APIs to…

修復 Remotion monorepo 差異中新添加的可選參數、可選 React props 以及可選類型/接口成員，通過將內部 API 轉換為…

Start the @remotion/player example app and open it in the Codex browser. Use when the user invokes /player-example or $player-example, asks to launch the…

啟動 @remotion/player 範例應用程式，並在 Codex 瀏覽器中開啟。當使用者呼叫 /player-example 或 $player-example，或要求啟動…時使用。

Open a pull request for the current feature

為目前的功能開啟一個拉取請求

PR 的正確命名

Review or correct a Remotion pull request title

解決 CI 失敗、合併衝突或本地分支變更，以準備好 PR

Resolve CI failures, merge conflicts, or local branch changes to get a PR ready

Finalize a developed Remotion Element, add it to the docs gallery, render its previews, and run repository checks.

發布新的 Remotion 版本

Release a new Remotion version

Skills for making videos with Remotion.

Remotion - 在 React 中創建影片的最佳實踐

Router for all Remotion skills

Best practices for Remotion - Video creation in React

Remotion - 在 React 中創建影片的最佳實踐

Remotion 的最佳實踐

使用Remotion和React製作影片的領域特定知識庫。涵蓋30多個規則檔案，涉及動畫、音訊、素材、3D內容、圖表、文字、轉場及合成管理。包含字幕、FFmpeg操作、音訊視覺化及音效整合的專業指南。提供動態中繼資料計算、媒體檢查（時長、尺寸、影格提取）及可參數化合成的模式。支援Lottie等進階功能...

在 Remotion 中處理字幕

Transcribing, displaying and animating captions

Transcribing, displaying and animating captions

在 Remotion 中處理字幕

在 Remotion 中處理字幕

建立新的 Remotion 影片

Create a new Remotion video

建立新的 Remotion 影片

建立新的 Remotion 影片

Search Remotion documentation

Search Remotion documentation

Search Remotion documentation

Search Remotion documentation

撰寫 Remotion 動畫的最佳實踐，使其對代理保持直觀，並可在 Remotion Studio 視覺模式中編輯。

建構 Remotion 標記以實現互動

Structure Remotion markup for interactivity

撰寫 Remotion 動畫的最佳實踐，使其對代理保持直觀，並可在 Remotion Studio 視覺模式中編輯。

撰寫 Remotion 動畫的最佳實踐，使其對代理保持直觀，並可在 Remotion Studio 視覺模式中編輯。

Remotion Map animation knowledge

Remotion Map animation knowledge

Remotion Map animation knowledge

Remotion Map animation knowledge

Content, animation and effects best practices

撰寫 Remotion React Markup 的最佳實踐

撰寫 Remotion React Markup 的最佳實踐

撰寫 Remotion React Markup 的最佳實踐

Interacting with Mediabunny

Interacting with Mediabunny

Interacting with Mediabunny

Interacting with Mediabunny

Export a Remotion video

Export a Remotion video

渲染影片的最佳實務

渲染影片的最佳實務

渲染影片的最佳實務

Build an app with Remotion

使用 Remotion 構建影片應用程式 — 框架、渲染與播放器建議

使用 Remotion 構建影片應用程式 — 框架、渲染與播放器建議

使用 Remotion 構建影片應用程式 - 框架、渲染與 Player 建議

Preview a Remotion video

Preview a Remotion video

Preview a Remotion video

Preview a Remotion video

Upgrade Remotion, and related packages

Upgrade Remotion, and related packages

Upgrade Remotion, and related packages

Upgrade Remotion, and related packages

Scaffold a new Remotion Element with a correctly configured preview composition for development in the docs Remotion Studio.

Document Remotion skill placement. Use when adding, moving, or editing Remotion skills to decide whether a skill belongs in .agents/skills as an internal skill…

文件移除技能放置。在新增、移動或編輯 Remotion 技能時使用，以判斷技能是否應歸類為 .agents/skills 中的內部技能…

Start Remotion Studio from packages/example and open it in the Codex browser. Use when the user invokes /studio or $studio, asks to launch the example Studio,…

從 packages/example 啟動 Remotion Studio，並在 Codex 瀏覽器中開啟。當使用者呼叫 /studio 或 $studio，或要求啟動範例 Studio 時使用。

Classify and wire Remotion Studio config options as either startup-fixed or reloadable while preventing mixed lifecycle behavior across consumers. Use when…

Diagnose and fix Remotion Studio UI bugs caused by the global CSS reset. Use when nested text or SVG icons have incorrect color, typography, sizing, hover…

針對 Remotion Studio UI 變更的指導，其中全域 CSS 重置會影響巢狀元素。在編輯 packages/studio UI 時使用，特別是在新增包裝…

Optimize Remotion Studio render performance by minimizing frame-reactive component surfaces, preferring imperative timeline state reads, and memoizing stable…

Finalize a developed Remotion Element, add it to the docs gallery, and prepare either a direct member submission or an externally reviewable contribution.

Publish Remotion Lambda Chrome binaries to the eu-central-1 test region and update hosted layer and Chrome version references. Use when updating Chrome…

將 Remotion Lambda Chrome 二進位檔發布至 eu-central-1 測試區域，並更新託管層與 Chrome 版本參考。用於更新 Chrome…

Update the current Remotion branch with the latest canonical main branch. Use when asked to update or sync from upstream main, merge the latest main into a…

Update Remotion's ffmpeg-next Git revision to a published rust-ffmpeg commit, refresh Cargo.lock, rebuild all supported compositor binaries, validate the…

Update Remotion homepage GitHub star counts. Use when asked to refresh the displayed GitHub star count and push the change to main.

更新 Remotion 首頁的 GitHub 星星數量。當被要求刷新顯示的 GitHub 星星數量並將變更推送至主分支時使用。

Update `AvailableFrom` in a PR to the next Remotion patch version (`main` + `0.0.1`).

Update `AvailableFrom` in a PR to the next Remotion patch version (`main` + `0.0.1`).

Upgrade the caniuse-lite override in the Remotion repo. Use when asked to update caniuse-lite to the latest npm version.

在 Remotion 儲存庫中升級 caniuse-lite 覆蓋設定。當被要求將 caniuse-lite 更新至最新 npm 版本時使用。

Upgrade Mediabunny and related @mediabunny packages across the Remotion repo. Use when asked to update Mediabunny to the latest version.

在 Remotion 儲存庫中升級 Mediabunny 及相關的 @mediabunny 套件。當被要求將 Mediabunny 更新至最新版本時使用。

Upload large Remotion repository assets to the Cloudflare R2 bucket behind remotion.media and replace local public/ assets with hosted URLs. Use when a file is…

將大型 Remotion 儲存庫資產上傳至 remotion.media 背後的 Cloudflare R2 儲存桶，並以託管 URL 取代本機 public/ 資產。當檔案…

Implement or review a Remotion 5 breaking change while the v4 and v5 release lines still share code. Use when v4 behavior and public types must remain…

Set up a Codex monitor for Vercel deployments and preview URLs. Use when the user invokes /vercel or $vercel, asks Codex to watch or monitor a Vercel…

為 Vercel 部署和預覽 URL 設定 Codex 監控。當使用者呼叫 /vercel 或 $vercel，要求 Codex 監看或監控某個 Vercel…

The version of Remotion we are working on.

我們正在使用的 Remotion 版本。

生成關於影片的報告

Generate a report about a video

Guidance for working on Remotion Studio Visual Mode, sequence identity, node paths, symbolicated stacks, override IDs, and hot reload behavior. Use when…

在 Remotion Studio 視覺模式下工作的指引，包括序列識別、節點路徑、符號化堆疊、覆寫 ID 及熱重載行為。適用於…

使用 vitest 測試固件對網頁渲染器元件進行視覺快照測試。在 packages/web-renderer/src/test/fixtures 中建立測試固件，定義 React 元件、尺寸、幀率和持續時間。在 packages/web-renderer/src/test/Root.tsx 中註冊固件以啟用預覽功能。編寫測試案例，使用 renderStillOnWeb() 渲染靜態畫面，並透過 testImage() 快照比對驗證輸出。使用 bunx vitest src/test/video.test.tsx 執行測試，並更新文件...

Add a test case to the web renderer

Guides for writing and editing Remotion documentation. Use when adding docs pages, editing MDX files in packages/docs, or writing documentation content.

撰寫 Remotion API 文件的指南與範本，採用 MDX 格式。在 packages/docs/docs 中為每個 API 建立一個 .mdx 檔案，將其加入 sidebars.ts，並執行 bun render-cards.ts 以生成社交預覽卡片。API 屬性使用 ### 標題（而非項目符號），可選參數加上 ? 後綴，並在描述中自然包含預設值。偏好使用帶有 twoslash 驗證的型別安全程式碼片段；使用 // ---cut--- 隱藏匯入，並始終為...添加 title 屬性。

Rules for writing and reviewing tests in the Remotion repository. Use whenever adding, editing, or reviewing tests, especially for Studio UI, rendering, CLI,…