前端选型速查：用 Kaneo 的 pick-ui-library 技能为每个 UI 任务选对库

前端选型速查用 Kaneo 的 pick-ui-library 技能为每个 UI 任务选对库【免费下载链接】app All you need. Nothing you dont. Open source project management that works for you, not against you.项目地址: https://gitcode.com/GitHub_Trending/app116/app当你在一个大型前端项目中接到需要弹窗要做拖拽要写图表这类任务时最纠结的往往不是怎么写而是选哪个库。本文以 Kaneo 仓库中的 pick-ui-library 技能在.agents/skills/pick-ui-library/SKILL.md存有同一份副本为骨架系统拆解这份经过品味筛选的推荐清单背后的决策逻辑并结合仓库真实依赖与源码落地整理成一份可直接复用的前端选型速查手册。读完你既能按任务快速匹配库也能理解 Kaneo 前端apps/web为何在数十个场景中一致采用同一批底层选型。技能定位一张查找表而不是万能顾问先看这份技能的元信息frontmattername: pick-ui-library description: Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own. disable-model-invocation: true两个关键设计值得注意显式调用绝不自动触发disable-model-invocation: true意味着 Agent 不会在任意对话里擅自抛出这份清单只有当用户明确以任务形式提出我需要 toast拖拽用什么时才激活。这种按需查找lookup模式避免了在无关上下文中刷屏是工程化 Agent 技能的一个良好范例。有主见的推荐文档明确写道These are deliberate, taste-driven picks——这份清单是经过筛选的、有明确倾向的结论而不是一个什么都能用的中性目录。当清单里有明确答案时不要端出一桌选项让用户挑。使用流程四步决策法技能给出了固定的调用步骤每一步都对应一个具体的工程约束识别任务而不是用户提到的库名。我要一个下拉框本质上是无样式、可访问的 UI 原语任务对应 base-ui即使对方误报了别的库名也要回到任务本身去匹配。先看package.json里已装了什么。项目已经在用清单中的库就直接复用如果项目正在用竞品例如用 react-window 而不是 Virtuoso可以指出差异但不要未经请求就擅自更换依赖。这是对现有代码库的尊重也避免无谓的依赖震荡。只推荐一个库用一句话说明它的用途如果请求中包含安装/接线需求就顺手完成。清单有明确答案时不要给出菜单式的多选项。清单覆盖不到就明说然后基于自己的知识推荐同时明确声明已经离开了这份 curated list。完整推荐清单五个任务域的选型表这是技能的核心资产五个分类、全部条目逐一列出。UI 组件与基础原语任务推荐库无样式、可访问的 UI 组件对话框、弹出层、菜单、下拉选择……base-ui命令面板⌘K 命令菜单cmdkToast / 通知Sonner一次性密码 / 验证码输入框input-otp可定制的 GUI / 控制面板Leva备选dialkit这一栏的语义很清晰凡是可访问性、焦点管理、关闭逻辑这类容易被写错的底层细节交给 base-ui 这类无样式原语凡是高频小交互命令菜单、toast、验证码输入用专用小库而不是自己造轮子。动效与视觉任务推荐库通用动画弹簧、布局动画、进出场motion即 Framer Motion数字动画计数器、价格、统计数字NumberFlow文字动画组件torph3D 地球Cobe动态 OG 图HTML/CSS → SVG/PNGSatori语法高亮shiki技能在这里特别划了一条使用边界弹簧、布局动画、退场动画或手势驱动的值才需要 motion一个简单的 hover 或 fade 不需要动效库纯 CSS transition 才是正确的工具。这条原则直接决定了代码库中动效依赖的数量级——动效库是放大器不是默认值。图表任务推荐库实时 / 流式图表Liveline通用图表静态或交互式仪表盘recharts拆分的标准只有一句话如果数据点是实时到达、图表随时间滚动用 Liveline其余一切场景用 recharts。交互与性能任务推荐库拖拽dnd kit虚拟化长列表、大表格Virtuoso虚拟化是性能兜底手段当列表动辄上千行时才需要 Virtuoso而不是一开始就引入分页 Hack。状态与样式任务推荐库状态管理zustand按条件拼接className字符串clsx面向 Tailwind 的类型安全、变体驱动样式cva主题切换 / 暗色模式加载无闪烁next-themes同样有一条拆分原则临时性的条件类拼接用 clsx当一个组件真的有多种变体尺寸、意图、状态且值得一个类型化 API 时才用 cva。二者天然互补——cva 内部使用的就是 clsx 风格的输入可以组合使用。仓库实装验证这份清单在 Kaneo 里怎么落地选型清单的价值在于被真实使用。打开 apps/web/package.json 可以看到清单中的大部分库确实以正主身份安装在kaneo/web的 dependencies 中base-ui/react、dnd-kit/*core、modifiers、sortable、utilities、cmdk、sonner、input-otp、class-variance-authority、clsx、framer-motion、shiki、zustand以及配套的tailwind-merge。下面按任务域逐一对应源码证据。base-ui cva clsx无样式原语的变体化封装Kaneo 的 UI 原语目录 apps/web/src/components/ui 下有 50 余个基于 base-ui 封装的组件dialog、popover、select、menu、tooltip、tabs……。以 Button 组件为例它完美演示了无样式原语 cva 变体的组合import { mergeProps } from base-ui/react/merge-props; import { useRender } from base-ui/react/use-render; import { cva, type VariantProps } from class-variance-authority; import { cn } from /lib/cn; export const buttonVariants cva( relative inline-flex ..., { defaultVariants: { size: default, variant: default }, variants: { size: { default: h-9 px-..., icon: size-9 sm:size-8, lg: ..., sm: ..., xl: ..., xs: ..., /* icon-lg/icon-sm/icon-xl/icon-xs */ }, variant: { default: ..., destructive: ..., ghost: ..., link: ..., outline: ..., secondary: ..., destructive-outline: ... }, }, }, );base-ui 负责mergeProps、useRender这类底层的无样式交互逻辑cva 负责给sizedefault、sm、lg、xl、xs、icon 系列共 9 种和variantdefault、destructive、outline、ghost、link、secondary、destructive-outline 共 7 种建立类型安全的变体 API——这正是技能中组件有真实变体时用 cva的教科书式应用。而 apps/web/src/lib/cn.ts 则是 clsx 的典型封装并与tailwind-merge组合以解决类名覆盖问题import { type ClassValue, clsx } from clsx; import { twMerge } from tailwind-merge; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }整个apps/web中数百个组件文件都通过cn()拼接条件类名验证了clsx 用于临时条件拼接这一选型。dnd kit motion看板拖拽与进出场动画Kanban 看板是 Kaneo 的核心交互之一恰好同时用到了交互与性能栏的两个库。看 column-dropzone.tsximport { useDroppable } from dnd-kit/core; import { SortableContext, verticalListSortingStrategy } from dnd-kit/sortable; import { AnimatePresence, motion, useReducedMotion } from framer-motion;useDroppable定义列的放置区SortableContextverticalListSortingStrategy管理列内任务的排序同时AnimatePresence配合motion.div为任务卡提供进出场动画并且通过useReducedMotion()在用户开启减少动态效果时退化为纯透明度动画——这正是技能motion 负责进出场与布局动画的应用场景还顺带实现了无障碍降级。同类模式还出现在 kanban-board/index.tsx、list-view/index.tsx 与 backlog-list-view/index.tsx。zustand跨组件共享的轻量状态状态管理选型在仓库中同样一致。apps/web/src下的 store 目录 有 4 个 zustand storeproject.ts、bulk-selection.ts、backlog-bulk-selection.ts、user-preferences.ts。以 store/project.ts 为例import { create } from zustand; import type { ProjectWithTasks } from /types/project; const useProjectStore create{ project: ProjectWithTasks | undefined; setProject: (updatedProject: ProjectWithTasks | undefined) void; }((set) ({ project: undefined, setProject: (updatedProject) set(() ({ project: updatedProject })), })); export default useProjectStore;对于当前打开的项目批量选中项这类需要在多个组件间共享、又不值得引入重量级方案的全局状态zustand 这种极小核心 API 外部 store的形态恰到好处对应了技能中useState-per-component 的 props 网需要 zustand 收敛的判断。input-otp验证码输入验证码/OTP 输入是看似简单、细节极多的组件自动跳格、粘贴拆分、掩码、最大长度。仓库在 apps/web/src/components/ui/input-otp.tsx 封装了 input-otp并在 verify-otp.tsx 的邮箱验证流程中实际使用——与技能一次性密码输入框 → input-otp的推荐完全对应。shiki编辑器里的代码高亮任务描述的富文本编辑器基于 Tiptap中嵌入了代码块扩展 shiki-code-block.ts其底层由 lib/shiki-highlighter.ts 提供高亮能力。这与技能语法高亮 → shiki的条目一致shiki 基于 TextMate 语法做高亮输出语义化的 token 着色而不是粗暴的正则匹配。sonner 与 cmdk轻提示与命令交互Sonner 的落地点包括 use-billing-actions.ts计费操作的成败提示、profile-setup-flow.tsx 与 onboarding-flow.tsx引导流程反馈cmdk 则用于任务子任务搜索 task-subtasks.tsx、任务描述与评论编辑器 task-description.tsx、comment-editor.tsx 等处的命令式菜单交互。两者都是高频小交互交给专用小库策略的直接体现。未安装项留给未来任务的候选对照清单可见NumberFlow数字动画、torph文字动画、Cobe3D 地球、Satori动态 OG 图、Liveline流式图表、recharts通用图表、Virtuoso虚拟化、Leva控制面板、next-themes主题切换目前并未出现在 apps/web/package.json 的依赖中。这并不矛盾——技能的使用规则第 2 条本就强调先查已装依赖、不擅自引入新库。这些条目是为未来同类任务预留的明确答案当 Kaneo 需要 1000 行级的长列表、实时折线图或动态 OG 图时直接命中清单即可无需再花时间调研选型。常见误用模式清单一眼识别该换库的信号技能最后给出一组看到这些写法就该换库的反模式信号是选型决策中最具操作性的部分手写 toast 或拿 modal 库做通知→ 改用 Sonner它就是为了这个场景存在的。手写div下拉/弹窗 手工焦点管理→ 改用 base-ui它替你处理可访问性、焦点陷阱focus trapping和点击外部关闭。用重渲染文本的方式做数字动画→ 改用 NumberFlow它正确处理数字位数的过渡digit transitions。直接渲染 1000 行的列表→ 先上 Virtuoso 再考虑分页 Hack。每个组件一个useState、用 props 织成共享状态网→ 改用 zustand。模板字符串里三层深的 className 三元表达式→ 改用 clsx如果形状像变体就上 cva。这六条的价值在于把代码坏味道翻译成具体换哪个库的可执行动作让选型从个人偏好变成可评审、可落地的工程决策。小结让选型成为可复用的工程资产从 Kaneo 的这份技能可以看出优秀的前端选型管理不在于知道很多库而在于按任务域而非按库名组织决策原语 / 动效 / 图表 / 交互性能 / 状态样式五个域互不混淆给出明确边界CSS transition 与 motion 的分界、Liveline 与 recharts 的分界、clsx 与 cva 的分界先看现状再动手查package.json、不擅自更换既有依赖沉淀反模式清单让未来的维护者一眼识别该重构的信号。仓库中的实装证明从 Button 的 cva 变体、column-dropzone.tsx 的 dnd kit motion 组合到 verify-otp.tsx 的 input-otp说明这份清单不是纸面建议而是被生产代码逐条兑现的选型规范。无论你是要为新功能选型还是要评审既有代码的依赖合理性都可以把 pick-ui-library/SKILL.md 当作团队的前端选型宪法来使用。【免费下载链接】app All you need. Nothing you dont. Open source project management that works for you, not against you.项目地址: https://gitcode.com/GitHub_Trending/app116/app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考