懶人包
- animation-vocabulary 是 Emil Kowalski 的 skill 庫（emilkowalski/skills）裡的一支「動畫術語反查表」：只有一個 181 行的 SKILL.md，收了 12 類、91 個網頁動效術語，把「彈一下」這種描述翻成 Pop in 這種標準詞。
- frontmatter 沒有
disable-model-invocation，裝了就會自動觸發；我用 claude -p 跑 24 次對照，問「這叫什麼」的 5 題全部自動呼叫，P1 連跑 3 次都答 Pop in。- 沒裝 skill 時 Sonnet 其實也知道答案，P1 三次都先答 spring animation，還附參數與跨平台名稱；skill 的價值是用詞固定、定義逐字、附近似詞差異，不是讓模型突然懂動畫。
- 最大的坑是觸發靠問法：只說「卡片要有那種彈一下的感覺」時 3 次都沒呼叫 Skill 工具，要穩就直接打
/animation-vocabulary，點名組 6 題全中。- 代價是答案只限 91 詞（不會給 odometer、Hero、Shared axis 這類別名）、定義維持英文，每次多 2 個 turn、約多 0.02 美元。
我想讓 AI 做一個「卡片出現時彈一下」的效果，最卡的往往不是實作，而是不知道這個效果叫什麼。描述得越模糊，AI 猜得越歪。animation-vocabulary 這支 skill 只做一件事：把模糊描述反查成精確術語，讓你拿那個詞去跟 AI 或設計師溝通。
這篇拆它的結構、觸發條件與詞彙表，再用 24 次 claude -p 對照實驗看它到底改變了什麼。
- animation-vocabulary 是什麼？
- 它什麼時候會自動觸發？
- SKILL.md 裡面長什麼樣？
- 91 個術語裡最常用的有哪些？
- 怎麼安裝、怎麼點名？
- 實測：有裝和沒裝差在哪？
- 有哪些限制和坑？
- 誰適合裝？
- 常見問題
animation-vocabulary 是什麼？
它是 emilkowalski/skills 裡的一支 skill。這個 repo 是 Emil Kowalski（toast 套件 Sonner 的作者，動畫課程站 animations.dev）放 Claude Code 等 agent 用的 skill 集合，MIT 授權，2026-10-21 17:20 查詢時有 48,159 stars。注意這是整個 repo 的數字，裡面 15 支 skill 共用，不代表這一支單獨的熱度。
SKILL.md 的 description 開宗明義把它定位成 "Reverse-lookup glossary"（反查用詞彙表），範例是把「popover 打開時那個 bouncy 的東西」對到 Pop in、把「iOS 的橡皮筋捲動」對到 Rubber-banding。description 最後一句劃了界線：For naming an effect, not designing or building one. 它負責命名，不負責設計或寫程式。
這支 skill 是 2026-06-29 加進 repo 的（commit 107aeda），2026-09-15 又有一次修改，把初始回覆裡的課程連結拿掉（commit 85e8e23）。我讀的版本是 commit 2d22863。
它什麼時候會自動觸發？
frontmatter 只有 name 和 description 兩個欄位，沒有 disable-model-invocation。這代表模型會依 description 自己判斷要不要載入。同一個 repo 裡設了 disable-model-invocation 的只有 pick-ui-library、prototype、review-animations 三支，animation-vocabulary 不在其中。
description 寫的觸發情境有兩種：
| 情境 | description 原文 |
|---|---|
| 直接問名稱 | the user asks "what's it called when…" |
| 描述了效果但不知道名字，想拿正確的詞去 prompt AI 或設計師 | describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with |
SKILL.md 裡面長什麼樣？
資料夾裡只有一個 SKILL.md，181 行、13,606 bytes，沒有 references、沒有腳本。結構分五段：
| 區塊 | 內容 |
|---|---|
| Initial Response | 沒帶問題就被呼叫時，只回一句固定台詞 |
| Quick Start | 輸出格式固定為 **術語** — 定義；多個候選時最佳的放第一，再附 1–2 個替代詞並用一行說明差異 |
| Instructions | 6 條規則，下表拆解 |
| Examples | 3 個範例：Origin-aware animation、Morph（附 Crossfade 與 Shared element transition 兩個替代詞）、Rubber-banding |
| Glossary | 12 類、91 個術語，註明是 /vocabulary 頁的快照，兩邊要同步 |
| # | 規則 | 白話 |
|---|---|---|
| 1 | Read for intent, not keywords | 使用者講的是看到或感覺到的（「很彈」「滑走」），要對應到感受，不是比對關鍵字 |
| 2 | Quote the glossary verbatim | 定義照抄詞彙表，不改寫 |
| 3 | Disambiguate close terms | 近似詞要對照，例如 Clip-path 與 Mask、Pop in 與 Bounce、Shared element transition 與 Layout animation |
| 4 | When nothing matches exactly | 沒有完全對應時給最接近的詞，並講明是近似 |
| 5 | Stay within this glossary | 表裡沒有就直說，不發明新詞 |
| 6 | Keep it tight | 問名稱就給名稱，不寫長文 |
Glossary 開頭註明它是「/vocabulary 頁的快照」。我對照了 animations.dev/vocabulary（2026-10-21 HTTP 200），Pop in、Rubber-banding、Direction-aware、Number ticker、Tabular numbers 都在頁面上，所以這份詞彙表和 Emil 課程站的用詞是同一套。
91 個術語裡最常用的有哪些？
12 個分類和各自的術語數：
| 分類 | 數量 | 分類 | 數量 |
|---|---|---|---|
| Entrances & Exits（進場與離場） | 6 | Easing（緩動） | 7 |
| Sequencing & Timing（順序與時間） | 8 | Spring Animations（彈簧動畫） | 9 |
| Movement & Transforms（移動與變形） | 8 | Looping & Ambient（循環與環境動態） | 7 |
| Transitions Between States（狀態轉場） | 7 | Polish & Effects（細節效果） | 10 |
| Scroll（捲動） | 5 | Performance（效能） | 6 |
| Feedback & Interaction（回饋與互動） | 9 | Principles to Know（原則） | 9 |
| 你會怎麼形容 | 術語 | 定義轉述 |
|---|---|---|
| 出現時微微彈一下 | Pop in | 元素進場時稍微超過目標大小再回來，像彈進定位 |
| 整組彈簧那種 Q 彈、來回晃 | Bounce | 彈簧衝過頭再穩定下來，增加俏皮感 |
| 一排項目一個接一個出現 | Stagger | 多個元素依序動畫，每個之間有小延遲，形成瀑布感 |
| popover 從按鈕長出來，不是從自己中心 | Origin-aware animation | 元素從觸發它的位置展開，而不是 CSS 預設的自身中心 |
| 縮圖飛過去變成大卡片 | Shared element transition | 同一個元素從一處移動並變形到另一處 |
| 一個形狀變成另一個形狀 | Morph | 形狀平滑轉成另一個形狀，例如 Dynamic Island |
| 下一步往左滑、上一步往右滑 | Direction-aware transition | 前進和後退的滑動方向相反，讓導覽有方向感 |
| iOS 拉過頭會抵抗再彈回 | Rubber-banding | 拖過邊界時的阻力與回彈 |
| 數字一位一位滾到目標值 | Number ticker | 數字滾動或往上數到某個值 |
| 數字變動時整排左右跳 | Tabular numbers | 等寬數字，數值變動時不會位移 |
| 動畫跑到一半可以改方向 | Interruptible animation | 動畫進行中能平順轉向，不用先跑完 |
| 卡卡的、掉幀 | Jank | 瀏覽器跟不上而掉幀造成的可見頓挫 |
怎麼安裝、怎麼點名？
安裝
repo README 的安裝指令是安裝整包 15 支：
npx skills@latest add emilkowalski/skills只要這一支，加 --skill。我在 2026-10-21 用 skills CLI 1.7.4 實際跑過下面這行，--agent claude-code 指定裝給 Claude Code，--copy 複製實體檔案而不是建連結，-y 跳過確認：
npx -y skills@latest add emilkowalski/skills --skill animation-vocabulary --agent claude-code --copy -y輸出顯示 Found 15 skills，最後一行 ✓ animation-vocabulary (copied)，exit 0。安裝前 CLI 會列出安全評估，我那次看到的是 Gen Safe、Socket 0 alerts、Snyk Low Risk。
裝完的檔案在專案的 .claude/skills/animation-vocabulary/SKILL.md，我用 diff 比對過，和 repo 原檔完全相同。因為整個 skill 就這一個檔，手動把它複製到 .claude/skills/animation-vocabulary/ 效果一樣。
驗證有沒有裝好
不帶問題直接點名，會拿到 Initial Response 那句固定台詞：
claude -p "/animation-vocabulary"I'm ready to put a name to any motion effect you describe, my knowledge comes from Emil Kowalski's animation philosophy.這是我 2026-10-21 在乾淨目錄實際跑出來的輸出，session 初始化的 skills 清單裡也有 animation-vocabulary。
點名
在問題前面加 /animation-vocabulary：
/animation-vocabulary 卡片要有那種彈一下的感覺實測點名組 6 題全部載入 skill，包括自動觸發會漏掉的那種純描述問法。
實測：有裝和沒裝差在哪？
實驗設計
- 環境：Claude Code 2.1.306、
--model sonnet（實際模型 claude-sonnet-5-5）、--setting-sources project、--output-format stream-json。 - 每次跑在一個新建的空 git 目錄，三組：
.claude/skills/，prompt 不點名。
- C 組：同 B，但 prompt 前面加 /animation-vocabulary 。
- 6 題 prompt，P1 到 P5 都帶著「叫什麼／怎麼講」的問法，P6 只有描述：
| 題 | prompt |
|---|---|
| P1 | 卡片要有那種彈一下的感覺，這種動畫英文叫什麼？我想拿去跟 AI 講。 |
| P2 | iPhone 列表拉到底還硬拉、放手彈回去的效果叫什麼？ |
| P3 | 點縮圖之後縮圖飛過去變成大卡片，這種怎麼稱呼？ |
| P4 | 數字變動的時候一位一位往上滾的效果叫什麼？順便問，滾的時候整排數字會左右亂跳要怎麼講？ |
| P5 | 分頁表單按「下一步」內容從右邊滑進來，按「上一步」改從左邊滑進來，這種要怎麼跟設計師講？ |
| P6 | 卡片要有那種彈一下的感覺 |
Skill 的 tool_use 紀錄判定的。
結果總表
幾個數字：
| 指標 | A 沒裝 | B 裝了不點名 | C 點名 |
|---|---|---|---|
| 呼叫 Skill 工具 | — | P1–P5：7/7；P6：0/3 | 6/6 |
| P1 主答案 | 3 次都是 spring animation | 3 次都是 Pop in | Pop in |
| P1 回答長度 | 803–879 字元 | 441–677 字元 | 691 字元 |
| P1–P5 單次成本 | 0.086–0.093 美元 | 0.106–0.109 美元 | 0.107–0.110 美元 |
| P1–P5 turn 數 | 1 | 3 | 3 |
差異一：主詞從「機制」變成「效果名」
P1 最能看出差別。沒裝 skill 時，Sonnet 三次都先回答 spring animation，再補 bounce、overshoot、pop-in 等詞，接著給 damping、stiffness 參數和 CSS cubic-bezier 的寫法。內容沒錯，而且實作資訊比較多。
裝了 skill 後，三次的第一行都是同一句：Pop in 加上詞彙表的英文定義，再列 Bounce 與 Press / Tap feedback 兩個近似詞，說明各自適用的時機。
spring animation 講的是「用什麼物理做」，Pop in 講的是「使用者看到什麼效果」。如果你要拿去跟 AI 說「卡片進場要 X」，後者比較準。
差異二：答案更短，但少了業界別名
P5 是另一種典型。沒裝時 Sonnet 給了一份完整的設計交接清單：Material 的 Shared axis、iOS 的 push / pop、位移距離、時長、prefers-reduced-motion 的替代方案，1,046 字元。裝了之後只有 364 字元：Direction-aware transition 的定義，加上 Slide in 和 Page transition 為什麼不夠準。
P3、P4 也是同樣的模式。沒裝時 P3 答 Shared Element Transition 並附了 Material Container transform、Flutter Hero、SwiftUI matchedGeometryEffect、View Transitions API、Framer layoutId、FLIP 一整張平台對照表；P4 答 odometer effect 與 tabular figures，還附 font-variant-numeric: tabular-nums。裝了之後只有詞彙表裡的 Shared element transition、Number ticker、Tabular numbers。
P2 最極端：skill 組只回一行 Rubber-banding 加定義，102 字元。
差異三：描述式提問不觸發
P6 只寫「卡片要有那種彈一下的感覺」，沒問名稱。B 組 3 次都沒有呼叫 Skill 工具：
- 第 1 次：模型自己列了 Pop in、Press feedback、Hover lift、Staggered entrance 的表格，用詞沒有照詞彙表，然後要求提供卡片程式碼。
- 第 2、3 次：模型先用 Glob、Bash 看目錄，發現
.claude資料夾，再直接用 Read 讀了 SKILL.md 才回答 Pop in。這兩次耗時 34–38 秒、0.128 美元，是所有組合裡最慢最貴的。
C 組點名之後，同一句 P6 直接回 Pop in，列出 Bounce、Press / Tap feedback，最後反問「你是指卡片出現時彈出來，還是點擊時彈一下？」
實驗的限制
- 每題多數只跑 1 次，只有 P1 和 B 組 P6 跑了 3 次，觸發率的數字樣本很小。
--setting-sources project沒能完全隔離我自己的使用者層級設定：部分回覆用了我在全域設定裡的稱呼，A 組 P6 也嘗試呼叫一支我全域安裝的其他 skill（結果是 Unknown skill）。所以 A 組不是完全乾淨的基線，比較的是「我的環境加不加這支 skill」。- 只測了 Sonnet，沒有測 Opus 或 Haiku。
有哪些限制和坑？
1. 觸發吃問法。 問「叫什麼」「怎麼稱呼」「怎麼跟設計師講」都穩，只描述感覺就不會走 Skill 工具。要確定用到它，直接打 /animation-vocabulary。
2. 詞彙是封閉的。 Instructions 第 5 條要求不發明詞彙表以外的詞。結果是 odometer、Hero、Shared axis、Container transform 這些業界常用別名都不會出現，animations.dev/vocabulary 頁上也查不到它們。如果你要對接的是 Material 或 Flutter 團隊，沒裝 skill 時那張跨平台對照表反而更有用。
3. 定義維持英文。 第 2 條要求逐字引用，所以就算你用中文問，定義仍是英文原文，模型會在後面再補中文說明。要直接貼給中文讀者的文件，還得自己翻。
4. 只負責命名。 它不給 damping 數值、不給 cubic-bezier、不寫元件。拿到 Pop in 之後要實作，得換 animate 這類負責實作的 skill，或自己寫。
5. 成本略高。 載入 skill 多 2 個 turn，P1 到 P5 每次約多 0.015–0.02 美元。回答變短不代表變便宜，因為 SKILL.md 本身要進 context。
6. 和 /vocabulary 頁同步要靠人。 Glossary 註明要和 /vocabulary 頁保持同步，但這是寫給維護者的提醒，沒有自動機制。repo 更新後要重新安裝才會拿到新詞。
誰適合裝？
適合：
- 常用 AI 寫前端動畫，但對動效術語不熟、描述常被誤解的人。
- 要跟設計師或其他工程師對齊用詞，希望每次給出同一個詞的團隊。P1 連跑 3 次都是 Pop in，沒裝時 3 次的主詞雖然都是 spring animation，但補充詞每次都不一樣。
- 已經在用 Emil 其他 skill（例如 apple-design），想讓用詞和那套動畫觀點一致的人。
- 本來就熟動效術語的人。沒裝 skill 時 Sonnet 在 P2 到 P5 都答出了正確或等價的詞。
- 需要跨平台名稱（Material、Flutter、SwiftUI）或實作參數的人，沒裝時的回答資訊量反而比較大。
.claude/skills/，需要命名時直接 /animation-vocabulary 點名，拿到詞之後再交給實作用的 skill。
常見問題
animation-vocabulary 會不會自己寫動畫程式碼？
不會。description 明寫「For naming an effect, not designing or building one」，Instructions 也要求只給名稱。實測中它只回傳術語、定義與近似詞，沒有產生任何程式碼。
用中文問有用嗎？
有用。我的 24 次實驗全部用中文 prompt，問名稱的題目都正確觸發。只是術語與定義會維持英文，中文說明由模型另外補。
一定要裝整個 emilkowalski/skills 嗎？
不用。npx skills@latest add emilkowalski/skills --skill animation-vocabulary 只裝這一支。它只有一個 SKILL.md，手動複製到 .claude/skills/animation-vocabulary/ 也可以。
為什麼我說「彈一下」它沒反應？
因為只描述感覺時，模型會把它當成實作需求。實測 3 次都沒有呼叫 Skill 工具。在句子裡加上「這叫什麼」，或直接打 /animation-vocabulary 點名就會觸發。