HyperFrames — 從這裡開始
此技能是 HyperFrames 基於 HTML 的影片框架的本地路由器，
鏡像自 heygen-com/hyperframes。
鏡像後的領域技能以子目錄形式存在於此資料夾中，並按名稱按需載入。
根據使用者意圖，在執行前請閱讀對應的子技能 SKILL.md。
上游的權威代理指南與此路由器一同鏡像為 UPSTREAM-CLAUDE.md（完整技能目錄、安裝、維護）和
UPSTREAM-AGENTS.md（工作流程清單）——請參閱它們以獲取規範的上游技能
描述以及 npx skills add / npx hyperframes 工作流程。
HyperFrames 從 HTML 渲染影片——一個合成是一個 HTML 檔案，其
DOM 使用 data-* 屬性宣告時間軸，其動畫運行時是
可搜尋的，其媒體播放由框架管理。完整的
編寫合約位於 hyperframes-core/ 中；在撰寫合成 HTML 之前請先閱讀它。
子技能索引
| 子技能 | 目錄 | 使用時機 |
|---|---|---|
| 合成合約 | hyperframes-core/ | 編寫/編輯 HTML 合成 — data-* 時間軸、片段、軌道、子合成、變數。在撰寫合成 HTML 前閱讀。 |
| CLI 開發循環 | hyperframes-cli/ | 執行 npx hyperframes init, add, lint, check, snapshot, preview, render, publish, doctor, cloud/lambda 渲染，或疑難排解建置/渲染環境。 |
| 動畫 | hyperframes-animation/ | 原子運動規則、多階段場景藍圖、場景轉場、動態設計技術，以及運行時適配器（GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU）。 |
| 關鍵影格 | hyperframes-keyframes/ | 可搜尋安全的 2D/3D 關鍵影格、GSAP 時間軸、CSS 關鍵影格、Anime.js、WAAPI、FLIP、路徑、遮罩、SVG 變形/繪製、文字、3D 深度，以及 hyperframes keyframes 診斷。 |
| 創意指導 | hyperframes-creative/ | 非動畫創意指導：frame.md/design.md、調色盤、排版、旁白、節奏規劃、音訊反應。 |
| 媒體 | media-use/ | 解析/生成背景音樂、音效、圖片、圖示、品牌標誌、語音、調色、LUT；TTS 配音、轉錄、去背、字幕；跨專案重複使用。 |
| 註冊表區塊 | hyperframes-registry/ | 安裝並串接註冊表區塊/元件（hyperframes add）。 |
| Figma 導入 | figma/ | 導入 Figma 內容 — 素材、令牌、元件、故事板 → 重建動態。 |
工作流程（端到端交付物）
| 工作流程 | 目錄 | 使用時機 |
|---|---|---|
| 一般影片 | general-video/ | 編寫/編輯任何自訂合成（任意長度/格式）的備用工作流程 — 較長/多場景作品、品牌影片與精彩集錦。 |
| 動態圖形 | motion-graphics/ | 簡短、以設計為主導的動態圖形，其中動態本身就是訊息 — 動態排版、統計數字遞增、圖表/數據視覺化、標誌過場、下方三分之一標題。 |
| 投影片 / 簡報 | slideshow/ | 簡報、提案簡報或互動式簡報，包含離散投影片、片段揭示、分支、熱點導覽。 |
| 產品發布 | product-launch-video/ | 將產品/行銷 URL、貼上的腳本或摘要轉換為產品發布 / 宣傳影片。 |
| PR 轉影片 | pr-to-video/ | 將 GitHub PR（URL、owner/repo#N 或「此 PR」）轉換為程式碼變更說明影片。 |
| 音樂轉影片 | music-to-video/ | 將音樂曲目轉換為節拍同步影片 — 歌詞影片、投影片或動態視覺化。 |
| 無人臉說明 | faceless-explainer/ | 將任意文字（文章、筆記、主題、摘要）轉換為無人臉說明影片，並配以自訂視覺。 |
| 內嵌字幕 | embedded-captions/ | 為談話頭影片添加設計字幕 — 在欄流/內嵌引擎背後的視覺識別。 |
| 談話頭重剪 | talking-head-recut/ | 為現有的談話頭/訪談/播客影片套用定時圖形疊加卡片 — 標題、下方三分之一、數據標注、引用。 |
| Remotion 移植 | remotion-to-hyperframes/ | 將現有的 Remotion（React）合成移植到 HyperFrames HTML。僅在使用者明確要求移植/轉換/遷移 Remotion 來源時使用。 |
路由規則
- 對於任何「為我製作影片 / 動畫 / 動態圖形」的請求，請從上方第二個表格中選擇一個
工作流程。如果沒有適合的，則回退到
general-video。 - 所選的工作流程會在中途引入領域技能（第一個表格）—— 它們本身不會擁有端到端任務的擁有權。
- 編寫合約優先：在撰寫合成 HTML 之前，請先閱讀
hyperframes-core/。 - 所有操作都透過
npx hyperframes執行，除非專案說明指定了 本地包裝器——請完全遵循本地包裝器。需要 Node.js >= 22 和 FFmpeg。
同步
這些技能是從上游鏡像的。若要檢查或拉取更新：
bash hyperframes/scripts/sync-hyperframes.sh --check # 試執行
bash hyperframes/scripts/sync-hyperframes.sh # 同步並備份
請參閱 SYNC.md 以獲取上游來源、上次同步的提交以及同步策略。