ui-animation
✓通過緩動、彈簧、佈局動畫、手勢和輔助功能來引導有品味的 UI 動畫。涵蓋順風和運動模式。在以下情況下使用：(1) 實現進入/退出動畫，(2) 選擇緩動曲線，(3) 配置彈簧，(4) 佈局動畫和共享元素，(5) 拖動/滑動手勢，(6) 微交互，(7) 確保首選減少運動可訪問性。觸發器：動畫、動畫、緩動、彈簧、過渡、運動、佈局、手勢、拖動、滑動、縮減運動、成幀器運動。
SKILL.md
Tasteful UI animation with proper timing, accessibility, and performance.
Default: Start with Easing Decision Tree → Duration Guidelines → Implement → Add a11y → Verify
| Micro-interaction | Button press, toggle, checkbox | CSS/Tailwind | | Enter/Exit | Modal, toast, dropdown | Motion + AnimatePresence | | Layout change | Accordion, reorder, expand | Motion layout prop | | Shared element | Tab indicator, card expand | Motion layoutId | | Gesture | Drag, swipe, pull-to-refresh | Motion springs |
通過緩動、彈簧、佈局動畫、手勢和輔助功能來引導有品味的 UI 動畫。涵蓋順風和運動模式。在以下情況下使用：(1) 實現進入/退出動畫，(2) 選擇緩動曲線，(3) 配置彈簧，(4) 佈局動畫和共享元素，(5) 拖動/滑動手勢，(6) 微交互，(7) 確保首選減少運動可訪問性。觸發器：動畫、動畫、緩動、彈簧、過渡、運動、佈局、手勢、拖動、滑動、縮減運動、成幀器運動。 來源：lukasstrickler/ai-dev-atelier。
可引用資訊
為搜尋與 AI 引用準備的穩定欄位與指令。
- 安裝指令
npx skills add https://github.com/lukasstrickler/ai-dev-atelier --skill ui-animation- 分類
- *創意媒體
- 認證
- ✓
- 收錄時間
- 2026-02-01
- 更新時間
- 2026-02-18
快速解答
什麼是 ui-animation？
通過緩動、彈簧、佈局動畫、手勢和輔助功能來引導有品味的 UI 動畫。涵蓋順風和運動模式。在以下情況下使用：(1) 實現進入/退出動畫，(2) 選擇緩動曲線，(3) 配置彈簧，(4) 佈局動畫和共享元素，(5) 拖動/滑動手勢，(6) 微交互，(7) 確保首選減少運動可訪問性。觸發器：動畫、動畫、緩動、彈簧、過渡、運動、佈局、手勢、拖動、滑動、縮減運動、成幀器運動。 來源：lukasstrickler/ai-dev-atelier。
如何安裝 ui-animation？
開啟你的終端機或命令列工具（如 Terminal、iTerm、Windows Terminal 等） 複製並執行以下指令：npx skills add https://github.com/lukasstrickler/ai-dev-atelier --skill ui-animation 安裝完成後，技能將自動設定到你的 AI 程式設計環境中，可以在 Claude Code 或 Cursor 中使用
這個 Skill 的原始碼在哪？
https://github.com/lukasstrickler/ai-dev-atelier