pick-ui-library

选择合适的库

首次响应

首次调用此技能时，如果没有具体问题，只回复：

我已准备好为你的任务挑选合适的库，我的推荐来自 Emil Kowalski 精选的列表。

在用户提出问题之前，不要提供任何其他信息。

这是一个查询技能。调用时如果带有任务（“我需要提示消息”“拖放应该用什么？”），请将任务与下方精选列表匹配，并推荐相应的库。这些选择经过深思熟虑，体现了个人偏好——除非用户要求，或列表确实未涵盖该任务，否则不要推荐列表以外的替代方案。

使用方法

1. 确定任务，而不是用户提到的库。“我需要显示一个下拉菜单”属于 UI 基础组件任务（base-ui），即便用户问的是其他内容。
2. 检查已安装的内容。 首先查看 package.json。如果项目已经在使用列表中的库，就使用它。如果项目使用了竞品（例如使用 react-window，而非 Virtuoso），请指出推荐，但不要在用户未要求时更换依赖。
3. 推荐一个库，用一句话说明它的用途；如果请求包含安装或接线配置，也一并完成。当列表中有明确答案时，不要列出多个选项供用户选择。
4. 如果列表未涵盖该任务，请明确说明，并根据你自己的知识推荐；但要清楚表明你已不再遵循精选列表。

列表

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。简单的悬停或淡入淡出效果不需要它——此时使用纯 CSS 过渡才是合适的工具。

图表

任务	库
实时／流式图表	Liveline
通用图表（静态或交互式仪表板）	recharts

选择原则：如果数据点实时到达，且图表随时间滚动，就用 Liveline。其他情况都用 recharts。

交互和性能

任务	库
拖放	dnd kit
虚拟化（长列表、大型表格）	Virtuoso

状态和样式

任务	库
状态管理	zustand
有条件地构造 className 字符串	clsx
面向 Tailwind 的类型安全、变体驱动样式	cva
主题切换／深色模式（加载时无闪烁）	next-themes

样式选择原则：零散的条件类使用 clsx；当组件具有值得通过类型化 API 表达的实际变体（大小、意图、状态）时，使用 cva。两者可以组合使用——cva 在内部使用类似 clsx 的输入。

常见的不匹配情况

• 手动构建 Toast，或使用模态框库 → Sonner 正是为此而生。
• 基于 <div> 构建下拉菜单/对话框，并手动处理焦点 → 使用 base-ui，它会处理无障碍访问、焦点陷阱和关闭操作。
• 通过重新渲染文本来为数字添加动画 → NumberFlow 能妥善处理数字位数的过渡效果。
• 直接渲染包含 1,000 多行的列表 → 先使用 Virtuoso，再考虑分页技巧。
• 为了共享状态，在各组件中使用 useState，并通过层层 props 传递 → 使用 zustand。
• className 模板字符串中嵌套三层条件三元表达式 → 使用 clsx（如果是变体结构，则使用 cva）。