SuperAPI AI 工具集

pick-ui-library

前端与建站

查看项目

更新于 10-27 16:23

技能介绍

用途

pick-ui-library 是一个前端选库查询技能。当用户带着具体任务(例如“我需要 toast”“拖拽该用什么”)调用它时,它会把任务匹配到一份经过筛选、带有明确倾向的库清单,并给出推荐。这些推荐是刻意挑选、带有品味取向的结果,除非用户主动要求,否则不会用清单之外的替代方案。

主要能力

清单按类别组织,覆盖以下任务与对应库:

  • UI 组件与基础件:无样式、可访问的 UI 组件(对话框、弹出层、菜单、选择器等)用 base-ui;命令菜单(⌘K 面板)用 cmdk;toast / 通知用 Sonner;一次性密码 / 验证码输入用 input-otp;可定制 GUI / 控制面板用 Leva(dialkit 为替代方案)。
  • 动效与视觉:通用动画(弹簧、布局动画、进入/退出)用 motion(Framer Motion);数字动画(计数器、价格、统计)用 NumberFlow;动画文本组件用 torph;3D 地球用 Cobe;动态 OG 图片(HTML/CSS → SVG/PNG)用 Satori;语法高亮用 shiki。
  • 图表:实时 / 流式图表用 Liveline;通用图表(静态或交互式仪表盘)用 recharts。
  • 交互与性能:拖拽用 dnd kit;虚拟化(长列表、大表格)用 Virtuoso。
  • 状态与样式:状态管理用 zustand;条件拼接 className 字符串用 clsx;Tailwind 的类型安全、变体驱动样式用 cva;主题切换 / 暗色模式(加载无闪烁)用 next-themes。

使用方式

  1. 识别任务,而不是用户提到的库名。例如“我需要显示一个下拉菜单”属于 UI 基础件任务(base-ui),即使用户问的是别的库。
  2. 检查已安装的依赖。先看 package.json。如果项目已使用清单中的库,就用它;如果用的是竞品(例如用 react-window 而非 Virtuoso),给出提示,但未经要求不擅自更换依赖。
  3. 推荐一个库,用一句话说明它的用途,如果请求包含安装/接线,则完成安装与接线。当清单有明确答案时,不罗列多个选项。
  4. 如果任务不在清单覆盖范围内,明确说明这一点,并基于自身知识推荐,同时清楚表明已离开该筛选清单。

首次被调用且没有具体问题时,技能只回复:“I'm ready to pick the right library for your task, my picks come from Emil Kowalski's curated list.”,在用户提问前不提供其他信息。

适用场景

适合在前端开发中需要为具体任务挑选库时使用,尤其是涉及 UI 基础件、动效、图表、拖拽、虚拟化、状态管理与样式方案等常见需求。也适合用来识别常见选型误区,例如:手写 toast 或用模态库实现 toast(应使用 Sonner);用基于 div 的下拉/对话框并手动处理焦点(应使用 base-ui);通过重新渲染文本来做数字动画(应使用 NumberFlow);直接渲染 1000+ 行列表(应先用 Virtuoso 而非分页 hack);用每个组件一个 useState 的 prop 网络共享状态(应使用 zustand);三层嵌套的模板字符串 className 三元表达式(应使用 clsx,若呈变体形态则用 cva)。

限制

推荐仅来自该筛选清单,不主动替换为清单外的替代方案,除非用户要求或任务确实未被覆盖。清单未覆盖的任务会明确标注为超出范围。关于收费、价格、平台支持等具体信息,资料中暂未提供。