前言¶
網頁動效是個典型的「誰都做過、誰都沒時間細做」的領域。給按鈕加個 hover 效果容易，但要在動畫方案選型（CSS 還是 JS）、緩動曲線、性能預算和可訪問性之間做出一致決策，往往要靠個人經驗。這個 Skill 試圖把這些判斷固化成一套可執行的方案設計與檢查流程。下面介紹它是什麼、覆蓋哪些能力、以及在什麼場景下使用。
這是什麼¶
「網頁動效設計專家」（座標 @user_442551c3/web-motion-expert-600029）是一個面向網頁動效方案設計與性能優化的 Agent Skill，由社區發佈者 user_442551c3 發佈，版本 1.0.0，來源爲 community，歸類於 dev-programming 分類。它解決的問題是：當你需要設計網頁動效方案、優化動畫性能、或評估動效設計質量時，提供一個結構化的參考框架，而不是憑感覺寫 transition 和 animation。
核心功能¶
根據 Skill 簡介，其能力圍繞 5 大動效場景展開：
- 微交互（按鈕反饋、開關狀態等細節動效）
- 過渡動畫（頁面或組件切換時的動效設計）
- 視差滾動（滾動驅動的層次動效）
- 加載狀態（骨架屏、進度指示等等待反饋動效）
- 數據可視化動效（圖表數據變化時的動效呈現）
同時內置 4 類參考資源：
- CSS/JS 動畫方案選擇矩陣：用於在 CSS（transform/opacity、transition、animation）與 JS（requestAnimationFrame 驅動）之間做選型判斷
- 緩動曲線庫：提供常用緩動函數的選型依據
- 性能檢查清單：用於覈對動畫是否滿足性能約束
- 可訪問性約束：用於覈對動效是否影響無障礙使用
需要說明的是，上述內容來自 Skill 簡介的描述，已抓取資料中未包含該矩陣、曲線庫和清單的具體條目，實際使用時需要向 Skill 索取具體內容。
安裝與啓用¶
已抓取資料中未提供該 Skill 的具體安裝命令或配置文件字段，因此這裏不給出任何未經覈實的命令。該 Skill 標記 requires_api_key=false，即不需要額外 API key 即可調用。從座標 @user_442551c3/web-motion-expert-600029 可以看出，它託管在 SkillHub 上，官方地址爲：
https://api.skillhub.cn/user_442551c3/web-motion-expert-600029
SkillHub 頁面地址爲：
https://www.skillhub.cn/skills/user_442551c3/web-motion-expert-600029
啓用方式建議以官方頁面的最新說明爲準。該 Skill 基於通用 SKILL.md 格式，理論上可在支持該格式的 Agent 客戶端（如 Cursor、Codex CLI、Claude Code）中按目錄方式加載，但各客戶端的具體加載步驟未在資料中核實，這裏不做展開。
典型用法¶
已抓取資料中未提供官方的可復現使用示例，下面只根據簡介中描述的三類使用場景說明它適合怎麼用：
- 設計動效方案：在動手實現前，用該 Skill 對照 5 大場景確認動效類型，再通過 CSS/JS 方案選擇矩陣確定技術路徑，用緩動曲線庫選定曲線。
- 優化動畫性能：拿已有動畫代碼對照性能檢查清單逐項覈對，重點看是否觸發佈局抖動、是否只用 transform/opacity 做動畫。
- 評估動效質量：對照可訪問性約束檢查動畫是否尊重 prefers-reduced-motion 等系統設置，再按性能檢查清單給出結論。
適用場景與注意¶
適合：需要在網頁中落地結構化動效方案的前端開發或全棧開發者，尤其是希望統一團隊動效決策標準的場景。
注意點：
- 來源爲 community，發佈者個人維護，質量與更新頻率沒有第三方背書
- 當前數據顯示下載 961 次、安裝 0 次，評分爲滿分 100000，安裝量低意味着社區實際驗證樣本很少，建議先用小範圍動效需求試跑再推廣
- 資料未提供具體安裝命令、配置字段和官方示例，使用前需從官方頁面補齊這些信息
- 5 大場景和 4 類內置資源的條目細節需向 Skill 本人索取確認，不要假設其內容覆蓋所有瀏覽器兼容性問題
結尾¶
這個 Skill 的價值在於把動效設計中分散的判斷點（場景歸類、方案選型、緩動選擇、性能與無障礙約束）收攏成一套可執行流程，適合作爲動效方案評審和性能優化的參考框架。官方地址：https://api.skillhub.cn/user_442551c3/web-motion-expert-600029，SkillHub 頁面：https://www.skillhub.cn/skills/user_442551c3/web-motion-expert-600029。
