pick-ui-library
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChinesePicking 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 first. 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.
package.json - 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.
- 明确任务类型，而非用户提到的库。例如，“我需要展示下拉菜单”属于UI基础组件任务（应推荐base-ui），即便用户提到了其他库。
- 检查已安装的库。先查看。如果项目已使用列表中的某个库，就继续使用该库。如果项目使用了竞品（如用react-window而非Virtuoso），需在推荐时说明这一点，但未经用户请求不要更换依赖。
package.json - 仅推荐一个库，用一句话说明其用途，如果用户要求，可协助安装和配置。当列表中有明确答案时，不要提供多个选项。
- 如果任务未被列表覆盖，需明确告知用户，并根据自身知识推荐，但要说明已超出精选列表范围。
The list
精选列表
UI components & primitives
UI组件与基础组件
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
图表
Interaction & performance
交互与性能
State & styling
状态管理与样式处理
| Task | Library |
|---|---|
| State management | zustand |
Constructing | 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.
| 任务 | 库 |
|---|---|
| 状态管理 | zustand |
条件拼接 | clsx |
| Tailwind的类型安全、变体驱动样式工具 | cva |
| 主题切换/暗黑模式（加载无闪烁） | next-themes |
样式工具区分：clsx用于临时条件类；当组件有明确的变体（尺寸、用途、状态）且需要类型化API时，使用cva。二者可以组合使用——cva内部采用clsx风格的输入方式。
Common mismatches to catch
需要注意的常见错误匹配
- Toasts built by hand or with a modal library → Sonner exists for exactly this.
- A -based dropdown/dialog with manual focus handling → base-ui, which handles accessibility, focus trapping, and dismissal.
<div> - 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 -per-component web of props for shared state → zustand.
useState - Template-literal className ternaries three conditions deep → clsx (or cva if it's variant-shaped).
- 手动实现消息提示或使用模态框库 → Sonner正是为此场景设计的。
- 基于的下拉菜单/对话框，手动处理焦点 → 使用base-ui，它会处理可访问性、焦点捕获和关闭逻辑。
<div> - 通过重新渲染文本实现数字动画 → NumberFlow能正确处理数字过渡效果。
- 直接渲染1000+行的列表 → 优先使用Virtuoso，而非分页技巧。
- 每个组件用来维护共享状态，导致props层层传递 → 使用zustand。
useState - 三层条件判断的模板字符串className → 使用clsx（如果是变体样式则用cva）。