Transitions.dev：把 Web App 轉場細節變成可複用素材與 AI coding skill
極端工程師 Sun 的 Threads 介紹 Transitions.dev：它整理 dropdown、modal、card resize、badge、page transition 等常見 Web App micro-interactions，提供可複製 CSS snippet，也有給 AI coding 工具使用的 skill。查證官方網站與 GitHub：Jakubantalik/transitions.dev 約 2,353 stars / 101 forks，README 稱其為 reusable CSS transitions collection；GitHub metadata 未標示 LICENSE，導入商用專案前需先確認授權。
Frontend · UI Motion · AI Coding Skill
Transitions.dev 的價值不是「炫技動畫」，而是把 Web App 裡最常見、最容易被忽略的互動轉場整理成可複製、可給 agent 使用的 UI motion pattern。對 AI coding 來說，這類 skill 可以直接降低「做出功能但沒有質感」的落差。
- Threads：極端工程師 Sun 介紹 Transitions.dev
- Transitions.dev 官方網站：標題為「Essential transitions for web apps」，定位為 ready-to-use UI transitions。
- GitHub：Jakubantalik/transitions.dev：查核時約 2,353 stars / 101 forks；repo description 稱包含 web app transitions、agents skill、Refine tool。
- 授權 caveat：GitHub API 顯示 license 為 null，repo root 未找到 LICENSE / LICENSE.md；商用導入前要先確認作者授權條款。
- 驗證標記：Transitions.dev UI transitions AI coding skill CSS motion
它整理了什麼
官方頁面列出一組 Web App 常見 micro-interactions：card resize、number pop-in、notification badge、text state swap、menu dropdown、modal open/close、panel reveal、page transition、icon swap、success check、avatar hover、error shake、skeleton reveal、tabs indicator、tooltip、dropdown morph、accordion、toast、checkbox 等。
| 類型 | 常見問題 | Transitions.dev 的用途 |
|---|---|---|
| Dropdown / menu | 開合僵硬、origin 不自然 | 提供 origin-aware open/close transition 參考 |
| Modal / panel | 突然出現、缺乏層次 | scale、fade、blur、spring timing 的範例 |
| Card / list | resize 跳動、狀態切換突兀 | 平滑尺寸與文字狀態切換 |
| Feedback | 成功/錯誤狀態沒有回饋 | success check、error shake、toast 等 pattern |
為什麼對 AI coding 有用
- AI 常做出「可用但廉價」的 UI：功能齊了，但轉場、節奏、回饋不足，容易有 AI 味。
- micro-interactions 可模板化：這些不是每次都要重新發明，應該做成 reusable design skill。
- 可直接成為 agent instruction：讓 Claude Code / Codex / Cursor 在做 dropdown、modal、tabs 時套用已驗證的 motion pattern。
導入 checklist
- 先確認 LICENSE 或向作者確認商用使用權。