review-animations skill 是什麼、怎麼安裝使用：按十條硬標準給前端動效代碼挑毛病

本文根據 emilkowalski/skills 倉庫裏該技能的 SKILL.md 與倉庫 README 整理，資料核對於 2026-10-11。skills.sh 榜單當日顯示該技能累計安裝約 21.5 萬次；所在倉庫 emilkowalski/skills 在 GitHub 約 4.5 萬 Star（同日數據）。技能內容會隨倉庫更新，以倉庫為準。

這個 Skill 做什麼

動畫「能跑」和「感覺對」之間差得很遠，而一般的代碼評審不看這個。review-animations 只做一件事：評審動效代碼。description：對照源自 Emil Kowalski 設計工程理念的高標準評審動畫與運動代碼，預設挑問題，通過要靠掙。SKILL.md 明確它不寫功能、不修無關的 bug、不看非動效代碼；讓它做通用評審，它會拒絕並請你換別的技能。

核心是十條不可妥協的標準，每條違反都算一個問題：

1. 動得有理由——說得出為什麼要動；
2. 與出現頻率相稱——鍵盤觸發和一天上百次的操作不加動畫；
3. 進出場用緩出或更強的自定義曲線，介面上用緩入直接判不通過；
4. 介面動畫在 300 毫秒以內；
5. 起點與物理直覺正確——浮層從觸發點展開，不從 scale(0) 出現；
6. 高頻或手勢驅動的動效必須可打斷；
7. 只動 transform 和 opacity；
8. 尊重「減少動態效果」的系統設定，懸停動畫只給有滑鼠的裝置；
9. 進場和退場的節奏有意不對稱；
10. 和組件性格、產品整體一致。

另有一張「見到就標」的清單（transition: all、對快捷鍵加動畫等）和修復方案的優先順序。輸出固定兩部分：一張「改前 / 改後 / 原因」表，加按影響分級的結論。精確的曲線、時長和彈簧參數放在同目錄的 STANDARDS.md 裏，需要時才讀。

怎麼安裝

倉庫 README 的安裝命令是 npx skills@latest add emilkowalski/skills（整庫，安裝時可在選擇器裏勾選）。只裝這一個，按 skills CLI 文檔加 --skill 參數：

bash
npx skills@latest add emilkowalski/skills --skill review-animations

裝好後技能進入所選智能體的技能目錄，按 description 自動觸發，也可以用 /review-animations 手動調用。

倉庫整體介紹和其他安裝方式，詳見本站《emilkowalski/skills 是什麼、怎麼安裝：Emil Kowalski 的介面動效與設計 Skills（讓 AI 做的動畫不再生硬）》。

這個技能的 frontmatter 設了 disable-model-invocation: true，不會自動觸發，要用 /review-animations 手動調用。

怎麼用

• 「/review-animations 看一下這個分支裏改動的動畫」。
• 「評審 Toast.tsx 的進出場，告訴我哪些必須改」。
• 「這個抽屜組件用了關鍵幀動畫，按你的標準有什麼問題」。

適合誰 / 侷限

適合在合併前想給動效把一道關的前端團隊，也適合自學動效的人拿來對照自己的代碼。它讀的是代碼而不是運行效果，掉幀、手感這類問題只能據寫法推斷；標準偏嚴、偏剋制，營銷頁上有意為之的長動畫會被它標出來，需要你自己判斷哪些是例外。

注意事項

• 許可：GitHub 標註為 MIT。
• 只讀不改：它給出修改建議，不直接動你的代碼。
• 標準出自作者個人的方法論，並非行業規範，團隊可以按自己的設計語言取捨。