SKILL.md
readonly只读
name
pick-ui-library
description
根据给定的前端任务，从精心策划的推荐列表中选择合适的库——数字、OTP输入、图表、命令菜单、虚拟化、拖放、通知、状态、样式等。仅在显式调用时运行；不会自动触发。
选择合适的库
一个查询技能。当被调用时（例如“我需要通知”或“拖放应该用什么？”），将任务与下面的精选列表匹配并推荐库。这些是经过深思熟虑的、基于品味的推荐——除非用户要求替代方案或任务确实不在列表中，否则不要替换此列表之外的替代方案。
如何使用
- 识别任务，而不是用户提到的库。例如，“我需要显示一个下拉菜单”是一个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。简单的悬停或淡入淡出不需要它——普通的CSS过渡才是合适的工具。
图表
| 任务 | 库 |
|---|---|
| 实时/流式图表 | Liveline |
| 通用图表（静态或交互式仪表盘） | recharts |
区分：如果数据点实时到达且图表随时间滚动，使用 Liveline。其他情况使用 recharts。
交互与性能
| 任务 | 库 |
|---|---|
| 拖放 | dnd kit |
| 虚拟化（长列表、大表格） | Virtuoso |
状态与样式
| 任务 | 库 |
|---|---|
| 状态管理 | zustand |
条件性构建 className 字符串 |
clsx |
| 类型安全、基于变体的Tailwind样式 | cva |
| 主题切换/暗色模式（加载时不闪烁） | next-themes |
样式分工：clsx 用于临时条件类；cva 用于组件有真实变体（大小、意图、状态）且需要类型化API的情况。它们可以组合——cva 内部使用 clsx 风格的输入。
常见误匹配
- 手动构建的通知或使用模态库实现的通知 → Sonner 正是为此而生。
- 基于
<div>的下拉菜单/对话框，手动处理焦点 → base-ui，它处理可访问性、焦点陷阱和关闭。 - 通过重新渲染文本来动画数字 → NumberFlow 正确处理数字过渡。
- 直接渲染超过1000行的列表 → 在考虑分页技巧之前，使用 Virtuoso。
- 每个组件一个
useState的 props 网络来共享状态 → zustand。 - 模板字面量 className 三元表达式嵌套三层 → clsx（如果是变体形式则用 cva）。
