SKILL.md
唯讀
名稱
pick-ui-library
描述
從精選的推薦清單中，為指定的前端任務挑選合適的函式庫——涵蓋數字、一次性密碼輸入框、圖表、指令選單、虛擬化、拖放、提示訊息、狀態管理、樣式處理等。僅在明確呼叫時執行，不會自動觸發。
挑選合適的函式庫
這是一個查詢技能。當被呼叫時（例如「我需要提示訊息」、「拖放該用什麼？」），將任務與下方精選清單比對，並推薦對應的函式庫。這些是經過品味篩選的推薦——除非使用者要求其他選項，或任務確實不在清單涵蓋範圍內，否則請勿推薦清單以外的替代方案。
使用方式
- 辨識任務，而非使用者提到的函式庫名稱。例如「我需要顯示下拉選單」屬於 UI 基礎元件任務（base-ui），即使使用者問的是其他東西。
- 檢查已安裝的套件。 先查看
package.json。如果專案已經使用了清單中的某個函式庫，就沿用。如果使用了競爭對手（例如 react-window 而非 Virtuoso），可以標註推薦，但未經要求不要隨意更換相依套件。 - 推薦一個函式庫，用一句話說明它的用途，並在請求包含安裝/整合時執行。當清單有明確答案時，不要提供多個選項。
- 如果任務不在清單涵蓋範圍內，明確告知，並根據自身知識推薦——但需清楚說明已離開精選清單。
清單
UI 元件與基礎元件
| 任務 | 函式庫 |
|---|---|
| 無樣式、可存取的 UI 元件（對話框、彈出視窗、選單、選擇器等） | base-ui |
| 指令選單（⌘K 面板） | cmdk |
| 提示訊息 / 通知 | Sonner |
| 一次性密碼 / 驗證碼輸入框 | input-otp |
| 可自訂的 GUI / 控制面板 | Leva — dialkit 是替代方案 |
動畫與視覺
| 任務 | 函式庫 |
|---|---|
| 通用動畫（彈簧、佈局動畫、進出場） | motion (Framer Motion) |
| 數字動畫（計數器、價格、統計數字） | NumberFlow |
| 動態文字元件 | torph |
| 3D 地球 | Cobe |
| 動態 OG 圖片（HTML/CSS → SVG/PNG） | Satori |
| 語法高亮 | shiki |
當你需要彈簧、佈局動畫、進出場動畫或手勢驅動的值時，使用 motion。單純的 hover 或淡入淡出不需要——純 CSS 轉場才是正確的工具。
圖表
| 任務 | 函式庫 |
|---|---|
| 即時 / 串流圖表 | Liveline |
| 一般圖表（靜態或互動儀表板） | recharts |
區分方式：如果資料點即時到達且圖表隨時間滾動，使用 Liveline。其他情況皆使用 recharts。
互動與效能
| 任務 | 函式庫 |
|---|---|
| 拖放 | dnd kit |
| 虛擬化（長列表、大型表格） | Virtuoso |
狀態與樣式
| 任務 | 函式庫 |
|---|---|
| 狀態管理 | zustand |
條件式組合 className 字串 |
clsx |
| 型別安全、基於變體的 Tailwind 樣式 | cva |
| 主題切換 / 深色模式（載入時無閃爍） | next-themes |
樣式區分：clsx 用於臨時的條件類別；cva 用於元件有實際變體（尺寸、意圖、狀態）且需要型別 API 的情況。兩者可以組合使用——cva 內部使用 clsx 風格的輸入。
常見誤用情況
- 手刻提示訊息或使用 modal 函式庫實作 → Sonner 正是為此而生。
- 使用
<div>實作的下拉選單/對話框，手動處理焦點 → base-ui 能處理無障礙、焦點鎖定和關閉行為。 - 透過重新渲染文字來製作數字動畫 → NumberFlow 能正確處理數字轉場。
- 直接渲染超過 1000 行的列表 → 在考慮分頁 hack 之前，先使用 Virtuoso。
- 使用每個元件一個
useState的 props 網路來管理共享狀態 → zustand。 - 三層深度的樣板字面量 className 三元運算式 → clsx（如果是變體形式則用 cva）。
