Communitygithub.com

studio1111/remotion-video-production

使用 React 和 Remotion 構建影格精確、可重複的影片,包括合成、轉場、動畫文字、媒體、音訊、字幕以及渲染驗證。

remotion-video-production 是什麼?

這個技能專為使用 React 與 Remotion 框架的開發者設計,提供一套完整的工作流程指南,用於建立影格精確、可重複渲染的影片專案。它涵蓋從專案初始化、合成定義、影格時間 API 使用,到動畫、轉場、媒體資產處理、字幕以及最終渲染驗證的端到端流程。支援的平台包括 Claude Code 等可執行 skills 的 AI 代理,並依賴於 Remotion 官方技能集 (remotion-dev/skills) 中的規則檔案。該技能強調避免不必要的 React 重新渲染、確保資產路徑可重複、避免無效的影格運算,並在部署前驗證 Remotion 的授權條款。它使用 `npx skills add remotion-dev/skills` 安裝完整的官方技能集,並將自身作為一個工作流程指南運行。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/studio1111/AI-Motion-Graphics-Studio/tree/main/.agents/skills/remotion-video-production

在你喜歡的 AI 中提問

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

說明文件

Remotion 影片製作

上游

官方 Remotion 代理技能:https://github.com/remotion-dev/skills 官方文件:https://www.remotion.dev/docs/ai/skills

如需完整的官方技能集及其引用的規則檔案,請在消費端工作區中使用 npx skills add remotion-dev/skills 安裝。本機技能是一個工作流程指南,而非上游發行版的逐字複製。

工作流程

  1. 檢查現有專案並保留使用者所做的變更。
  2. 如果沒有專案,則使用官方建立工作流程並驗證套件相容性。
  3. 明確定義合成 ID、尺寸、FPS、持續時間、屬性以及資產位置。
  4. 使用基於影格/時間的 API,例如 useCurrentFrame() 和 useVideoConfig();不要依賴壁鐘 CSS 動畫來進行渲染時間控制。
  5. 使用插值/彈簧輔助函數,並在適當情況下加入意圖性的緩動曲線與限制範圍。
  6. 編排場景與轉場,使其影格計數與重疊產生預期的總持續時間。
  7. 使用支援的媒體元件和靜態資產輔助函數;在渲染前等待非同步資產。
  8. 啟動 Studio 預覽並在允許環境編輯或渲染前進行檢查。
  9. 僅在要求時進行渲染,然後檢查匯出的檔案並驗證持續時間、尺寸、FPS、音訊以及代表性影格。

品質規則

  • 避免不必要的按影格 React 工作和昂貴的效果。
  • 保持字型、圖片、音訊和影片路徑可重複。
  • 避免無效的影格運算、負持續時間、缺少資產以及無限制的插值。
  • 檢查文字適應性、從右到左 (RTL) 字型塑形、字幕時間軸以及視覺連續性。
  • 在部署前驗證當前的 Remotion 授權與商業使用條款。

相關技能