Empro Labs 動畫技能 是做什麼的？
網頁動態設計技能。兩個步驟：先撰寫動畫規格（ANIMATION.md），再撰寫程式碼。
ANIMATION.md 是儲存在專案中的檔案。可手動編輯、在其他專案中重複使用，並能被其他工具讀取。
此檔案中的路徑是相對於技能資料夾（~/.claude/skills/empro-labs-animation-skill/）。執行腳本時請使用絕對路徑。
請求
來自斜線命令的使用者請求：
$ARGUMENTS
如果上方請求為空，請詢問一個問題：什麼東西應該移動，以及移動到哪裡？然後開始階段 A。
核心流程
階段 A 理解輸入 ──→ 階段 B 撰寫 ANIMATION.md（使用者核准） ──→ 階段 C 實作 ──→ 階段 D 稽核
啟動檢查（依此順序）
- 專案中是否有
ANIMATION.md？→ 依使用者要求，重複使用、編輯或重建它。 - 是否有來自網頁設計技能的
DESIGN.md？→ 繼承其顏色、字型與樣式方向。保持動畫與其一致。 - 是否有動畫標記（
--motion-*變數或動畫檔案）？→ 重複使用它們。不要發明新數值。 - 是否已有動畫程式碼？→ 先執行
python scripts/analyze_motion.py <project> --inventory，以便在提出變更前了解現有內容。 - 以上皆非 → 階段 A。
階段 A：理解
輸入可以組合使用：
| 輸入 | 處理方式 |
|---|---|
| 參考網址 | 執行 python scripts/capture_motion.py --url [URL] --output ./motion-capture。讀取 capture.json 以取得實際持續時間、緩動函數、動畫屬性與滾動連結效果。使用 top.png 作為情緒參考。 |
| 動畫的影片或螢幕截圖 | 描述觸發條件、大約持續時間與緩動感覺。與使用者確認數值。 |
| 關鍵字（"敏捷"、"電影感"） | 將它們與 references/motion-personalities.md 中的個性配對。 |
| 品牌名稱（"像 Linear"） | 如果該網站可達，則擷取即時網站。若不可達，請要求提供參考網址。不要憑記憶猜測品牌動畫。 |
| 現有程式碼 | 執行庫存腳本並保留可運作的部分。 |
A1. 個性（最多問兩個問題）
- 感覺： 平靜、敏捷、俏皮或電影感？
- 頁面類型： 內容密集型（動畫不干擾內容）或展示型（動畫可主導）？
從 references/motion-personalities.md 中顯示一兩個候選項目，每個附上一行理由。由使用者確認。
A2. 互動層級（必要，不可跳過）
請參閱 references/interaction-tiers.md。
| 層級 | 體驗 | 工具 |
|---|---|---|
| L1 微互動 | 懸停、焦點、按壓、切換、小型狀態變更 | 僅 CSS 轉場 |
| L2 編排動畫 | 進入與離開、階梯列表、模態框、抽屜、路由變更、載入器 | CSS 關鍵影格、Web Animations API 或 GSAP 時間軸 |
| L3 滾動故事 | 滾動驅動的顯示、固定、視差、由時間軸驅動的區塊 | GSAP + ScrollTrigger，或 CSS 滾動驅動動畫搭配備援方案 |
L3 每頁上限為兩個固定區塊。每個頁面區塊應在規格中標明其層級。
A3. 技術棧
檢查 package.json 與框架（純 HTML、React、Vue、Svelte、Next.js）。使用 references/tooling.md 選擇工具。預設：CSS 與 Web Animations API。僅在 L3 或複雜時間軸時才加入 GSAP。
階段 B：撰寫 ANIMATION.md
遵循 references/animation-md-template.md。十個章節：
- 動畫個性與原則
- 動畫標記（持續時間、緩動函數、距離）
- 編排庫存表（表格：元素、觸發條件、屬性、持續時間、緩動函數、延遲、減少動畫備援方案）
- 元件動畫（預設、懸停、焦點可見、啟用、停用、進入、離開）
- 滾動行為
- 頁面與路由轉場
- 效能預算
- 無障礙
- 注意事項（至少 8 項，其中至少 5 項為禁止事項）
- 依賴項目
向使用者顯示摘要並等待核准。然後將 ANIMATION.md 儲存在專案根目錄。
階段 C：實作
- 到處使用標記。 每個持續時間與緩動函數都是變數，例如
var(--motion-duration-base)。元件內不得出現魔術數字。 - 僅對低成本屬性進行動畫處理。 優先使用
transform與opacity。可在小型元素上使用clip-path與filter。除非 ANIMATION.md 中記錄了例外狀況並附有理由，否則絕對不要對width、height、top、left、margin或padding進行動畫處理。 - 減少動畫支援是第一版的一部分，而非之後的修補。 移除移動，但保留狀態變更。在減少動畫模式下，距離標記歸零，
templates/motion-tokens.css中的prefers-reduced-motion區塊展示了此模式。 - 當專案尚無動畫層時，使用入門檔案：
templates/motion-tokens.css與templates/reveal.js。 - 循環需要退出方式。 任何
infinite動畫在減少動畫模式下應停止或簡化。任何運行超過五秒的循環都必須有暫停控制。 - 清理 JavaScript。 在卸載時銷毀 GSAP 時間軸與 ScrollTrigger（使用
gsap.context()或useGSAP）。中斷觀察器並移除監聽器。 - 將動畫集中在一處。 將標記放在一個檔案中，並將配方放在小型模組中。不要將時間值分散在各個元件中。
階段 D：稽核
- 執行靜態稽核：
python scripts/analyze_motion.py <project> --strict。修正所有錯誤。檢視所有警告，並在 ANIMATION.md 中修正或說明理由。 - 執行瀏覽器檢查：
- 開啟減少動畫模式（開發人員工具 → 算繪 →
prefers-reduced-motion: reduce）。確認沒有任何移動殘留，且內容仍可見。 - 限制 CPU（4 倍）並在動畫播放時錄製「效能」面板。尋找過長的影格。
- 檢查手機寬度（390 像素）。尋找由動畫元素造成的水平溢出。
- 開啟減少動畫模式（開發人員工具 → 算繪 →
- 逐一檢查
references/quality-checklist.md。 - 回報哪些項目通過、哪些失敗以及已修正哪些項目。
紅線（每項都必須通過）
- ANIMATION.md 中的每個動畫都必須有減少動畫的備援方案。
- 僅對
transform、opacity與記錄的例外狀況進行動畫處理。 - 所有持續時間與緩動函數都來自標記。
- 每個
infinite循環都必須尊重減少動畫，且任何超過五秒的循環都必須有暫停控制。 - 任何內容的閃爍頻率不得超過每秒三次。
- 互動回饋必須在 100 毫秒內出現。微動畫應在 250 毫秒或以下。進入與路由轉場應在 500 毫秒或以下。
- 僅懸停回饋必須有鍵盤焦點狀態與觸控等效方案。
- 在寬度 600 像素或以下，任何動畫元素不得造成水平捲動，且固定區塊應停用或簡化。
- JavaScript 動畫必須在卸載時清理。
參考索引
僅讀取目前階段所需的檔案。不要全部載入。
| 檔案 | 內容 | 讀取時機 |
|---|---|---|
references/animation-md-template.md | ANIMATION.md 輸出模板（10 個章節） | 階段 B |
references/motion-principles.md | 為何以及何時進行動畫處理、時間與緩動規則 | 階段 A 與 B |
references/interaction-tiers.md | L1、L2 與 L3 層級定義及程式碼模式 | 階段 A2 與 B |
references/motion-personalities.md | 四種個性預設組合，附帶標記數值 | 階段 A1 與 B |
references/tooling.md | CSS 與 WAAPI 與 GSAP 與 Motion 與 View Transitions 與 Lottie | 階段 A3 |
references/component-recipes.md | 按鈕、卡片、手風琴、模態框、抽屜、提示、分頁標籤、載入器 | 階段 C |
references/gsap-recipes.md | GSAP 時間軸、ScrollTrigger、matchMedia、React 清理 | 階段 C（僅 GSAP） |
references/scroll-patterns.md | 顯示、進度條、黏性堆疊、視差、水平滾動 | 階段 B（滾動）與 C |
references/performance.md | 影格預算、合成器友善規則、行動端降級 | 階段 B 與 D |
references/accessibility.md | 減少動畫、WCAG 動畫標準、前庭觸發因素 | 階段 B 與 D |
references/quality-checklist.md | 100 點稽核查核表 | 階段 D |
腳本
| 腳本 | 用途 | 需求 |
|---|---|---|
scripts/analyze_motion.py | 對專案的 CSS 與 JS 進行靜態稽核。找出布局動畫、transition: all、無限循環、長期持續時間以及缺少減少動畫處理的情況。--inventory 列出現有的時間值。 | Python 3（僅標準函式庫） |
scripts/capture_motion.py | 記錄即時網址上已宣告與正在執行的動畫、捲動頁面，並檢查在減少動畫模式下哪些仍會執行。寫入 capture.json 與 top.png。 | Python 3、pip install playwright、python -m playwright install chromium |
兩個腳本都接受 --help。
模板
| 檔案 | 用途 |
|---|---|
templates/motion-tokens.css | 標記變數、基礎關鍵影格、顯示規則與減少動畫區塊。複製到專案中。 |
templates/reveal.js | 無依賴的滾動顯示，使用 IntersectionObserver 且尊重減少動畫。 |
語言
以使用者的語言撰寫 ANIMATION.md 與摘要。保持 CSS、JavaScript 與標記名稱以英文呈現。
備援鏈
- 擷取腳本失敗（沒有 Playwright，或網站封鎖瀏覽器）→ 要求提供螢幕截圖或簡短的螢幕錄影，並根據該描述建構。
- 參考資料使用了您無法識別的動畫函式庫 → 說明情況，並詢問要比照感覺還是確切動畫。
- 沒有任何輸入 → 詢問一個關於感覺的問題，然後使用平靜個性。