pick-ui-library
作者： emilkowalski
從精心策劃且具主觀推薦的清單中，為指定的前端任務挑選合適的函式庫——涵蓋數字、OTP輸入、圖表、指令選單、虛擬化、拖放、提示訊息、狀態管理、樣式等。僅在明確呼叫時執行；不會自行觸發。
npx skills add https://github.com/emilkowalski/skills --skill pick-ui-libraryPicking The Right Library
A lookup skill. When invoked with a task ("I need toasts", "what should I use for drag and drop?"), match the task to the curated list below and recommend the library. These are deliberate, taste-driven picks — don't substitute alternatives outside this list unless the user asks for one or the task genuinely isn't covered.
How to use this
- Identify the task, not the library the user named. "I need to show a dropdown" is a UI-primitives task (base-ui), even if they asked about something else.
- Check what's already installed. Look at
package.jsonfirst. If the project already uses a listed library, use it. If it uses a competitor (e.g. react-window instead of Virtuoso), flag the recommendation but don't churn the dependency without being asked. - Recommend one library, state what it's for in one sentence, and install/wire it up if that's part of the request. Don't present a menu of options when the list has a clear answer.
- If the task isn't covered by the list, say so explicitly and recommend from your own knowledge — but be clear you've left the curated list.
The list
UI components & primitives
| Task | Library |
|---|---|
| Unstyled, accessible UI components (dialogs, popovers, menus, selects…) | base-ui |
| Command menus (⌘K palettes) | cmdk |
| Toasts / notifications | Sonner |
| One-time password / verification code inputs | input-otp |
| Customizable GUIs / control panels | Leva — dialkit is an alternative |
Motion & visuals
| Task | Library |
|---|---|
| General-purpose animation (springs, layout animations, enter/exit) | motion (Framer Motion) |
| Animating numbers (counters, prices, stats) | NumberFlow |
| Animated text components | torph |
| 3D globes | Cobe |
| Dynamic OG images (HTML/CSS → SVG/PNG) | Satori |
| Syntax highlighting | shiki |
Reach for motion when you need springs, layout animations, exit animations, or gesture-driven values. A simple hover or fade doesn't need it — plain CSS transitions are the right tool there.
Charts
| Task | Library |
|---|---|
| Real-time / streaming charts | Liveline |
| General charts (static or interactive dashboards) | recharts |
The split: if data points arrive live and the chart scrolls with time, use Liveline. Everything else is recharts.
Interaction & performance
| Task | Library |
|---|---|
| Drag and drop | dnd kit |
| Virtualization (long lists, large tables) | Virtuoso |
State & styling
| Task | Library |
|---|---|
| State management | zustand |
Constructing className strings conditionally | clsx |
| Type-safe, variant-driven styling for Tailwind | cva |
| Theme switching / dark mode (no flash on load) | next-themes |
The styling split: clsx for ad-hoc conditional classes; cva when a component has real variants (size, intent, state) that deserve a typed API. They compose — cva uses clsx-style inputs internally.
Common mismatches to catch
- Toasts built by hand or with a modal library → Sonner exists for exactly this.
- A
<div>-based dropdown/dialog with manual focus handling → base-ui, which handles accessibility, focus trapping, and dismissal. - Animating a number by re-rendering text → NumberFlow handles digit transitions properly.
- Rendering a 1,000+ row list directly → Virtuoso before reaching for pagination hacks.
- A
useState-per-component web of props for shared state → zustand. - Template-literal className ternaries three conditions deep → clsx (or cva if it's variant-shaped).
來自 emilkowalski 的更多技能
find-animation-opportunities
emilkowalski
搜尋程式碼庫或 UI 中應該有動畫但沒有的地方，並排除所有不應該有動畫的部分。唯讀；它會提出具有精確數值的動畫建議，但不會實際實作。當使用者詢問「這裡可以加入什麼動畫？」或想要「讓這個感覺更有生命力」時使用。若要修復現有的動畫，請改用 improve-animations 或 review-animations。
developmentdesigncreative
animate
emilkowalski
從零開始建立動畫，依序做出決定，以判斷整體是否自然流暢——是否該有動畫、目的為何、選用哪種工具、哪些屬性、哪條曲線與時長、如何打斷、如何結束。並撰寫實作內容。當被要求為某個東西加上動畫、增添動態感、讓元件更有生命力，或建立轉場效果時使用。若要評論現有動態效果，請使用 review-animations；若要審查整個程式碼庫，請使用 improve-animations。
prototype
emilkowalski
為你描述的UI元件建立多個真正不同的版本，並在視覺選取器後方渲染，讓你能夠即時切換瀏覽，選出最合適的那一個。僅在明確呼叫時執行；不會自行觸發。
developmentdesigncreative
ask-sonner
emilkowalski
Sonner（React toast 函式庫）使用指南——安裝並接上 Toaster、選用正確的 toast() 呼叫、promise 與 loading toast、更新、關閉及持久化 toast、樣式、主題與圖示、定位與多個 toaster。適用於使用 Sonner 或排解其問題時——例如 toast 未出現、出現兩次、失去樣式、忽略 Tailwind 類別、位於 modal 後方，或未跟隨深色模式。
emil-design-eng
emilkowalski
此技能編碼了 Emil Kowalski 關於 UI 打磨、元件設計、動畫決策，以及那些讓軟體體驗出色的隱形細節的設計哲學。
designdevelopmentcreative
review-animations
emilkowalski
根據 Emil Kowalski 的設計工程哲學所建立的高標準，審查動畫與動態程式碼。預設為標記問題；需主動爭取才能獲得核准。
animation-vocabulary
emilkowalski
反向查詢詞彙表，將模糊描述的網頁動畫或動態效果轉換為精確術語（例如：「彈出視窗開啟時的彈跳效果」→ Pop in；「iOS橡皮筋滾動」→ Rubber-banding）。適用於使用者詢問「那個叫什麼…」或描述某個動態效果卻不知其名稱，並希望獲得正確詞彙以提示AI或設計師時使用。此功能僅用於命名效果，而非設計或實作。
creativedesignresearch
improve-animations
emilkowalski
以資深動畫顧問的身份，審查程式碼庫中的動畫與動態程式碼，產出優先排序的稽核報告與可獨立執行的實作計畫，供其他代理（或較低成本模型）執行。僅對原始碼進行唯讀操作——負責規劃改進，不實際套用。適用於使用者要求「改善動畫」、「稽核動態」、「讓這個應用程式感覺更好」，或希望獲得動畫修正路線圖（而非單一差異審查）時。