pick-ui-library
作者： emilkowalski
从前端任务的精选列表中选择合适的库——数字输入、OTP输入、图表、命令菜单、虚拟化、拖放、提示通知、状态管理、样式等。仅在明确调用时运行，不会自行触发。
npx skills add https://github.com/emilkowalski/skills --skill pick-ui-libraryPicking 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
package.jsonfirst. 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. - 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.
The list
UI components & primitives
| Task | Library |
|---|---|
| Unstyled, accessible UI components (dialogs, popovers, menus, selects…) | base-ui |
| Command menus (⌘K palettes) | cmdk |
| Toasts / notifications | Sonner |
| One-time password / verification code inputs | input-otp |
| Customizable GUIs / control panels | Leva — dialkit is an alternative |
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
| Task | Library |
|---|---|
| Real-time / streaming charts | Liveline |
| General charts (static or interactive dashboards) | recharts |
The split: if data points arrive live and the chart scrolls with time, use Liveline. Everything else is recharts.
Interaction & performance
| Task | Library |
|---|---|
| Drag and drop | dnd kit |
| Virtualization (long lists, large tables) | Virtuoso |
State & styling
| Task | Library |
|---|---|
| State management | zustand |
Constructing className strings conditionally | 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.
Common mismatches to catch
- Toasts built by hand or with a modal library → Sonner exists for exactly this.
- A
<div>-based dropdown/dialog with manual focus handling → base-ui, which handles accessibility, focus trapping, and dismissal. - 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
useState-per-component web of props for shared state → zustand. - Template-literal className ternaries three conditions deep → clsx (or cva if it's variant-shaped).
来自 emilkowalski 的更多技能
find-animation-opportunities
emilkowalski
搜索代码库或UI中未添加动画但应当添加动画的位置，并排除所有不应添加动画的内容。只读操作；它提出带有精确数值的动效方案，但不负责实现。当用户询问“这里可以添加什么动画？”或希望“让这个更有活力”时使用。如需修复现有动画，请改用improve-animations或review-animations。
developmentdesigncreative
animate
emilkowalski
从零开始构建动画，按顺序做出决定，以判断动画是否合适——是否应该动画化，目的为何，使用哪种工具，哪些属性，哪种曲线和时长，如何被打断，如何退出。编写实现代码。当被要求为某物添加动画、增加动态效果、让组件有生命力，或构建过渡效果时使用。若要批评现有动态效果，使用review-animations；若要审计整个代码库，使用improve-animations。
prototype
emilkowalski
为你描述的UI组件构建多个真正不同的版本，渲染在可视化选择器后方，便于你实时切换浏览并提升最合适的一个。仅在显式调用时运行；不会自行触发。
developmentdesigncreative
ask-sonner
emilkowalski
Sonner（React 弹窗通知库）使用指南——安装并接入 Toaster、选择合适的 toast() 调用、处理 promise 和加载状态的 toast、更新、关闭和持久化 toast、样式、主题和图标、定位以及多个 Toaster。适用于使用 Sonner 或排查相关问题的情况——例如 toast 不显示、重复显示、样式丢失、忽略 Tailwind 类、被模态框遮挡，或不跟随深色模式。
emil-design-eng
emilkowalski
该技能编码了Emil Kowalski关于UI打磨、组件设计、动画决策以及那些让软件体验出色的隐形细节的设计哲学。
designdevelopmentcreative
review-animations
emilkowalski
根据Emil Kowalski的设计工程哲学，对动画和动效代码进行高工艺标准审查。默认标记问题，需争取通过。
animation-vocabulary
emilkowalski
反向查找词汇表，将关于网页动画或运动效果的模糊描述转化为精确术语（例如：“弹出窗口打开时的弹跳效果” → 弹入；“iOS的橡皮筋滚动” → 橡皮筋回弹）。当用户问“那个叫什么来着……”，或描述一个运动效果但
creativedesignresearch
improve-animations
emilkowalski
以资深动效顾问的身份审查代码库中的动画与动效代码，生成一份优先级排序的审计报告及自包含的实现方案，供其他智能体（或更经济的模型）执行。仅对源代码进行只读操作——它规划改进方案，但不实际应用。适用于用户提出“改进动画效果”、“审计动效”、“让这个应用体验更好”，或希望获得动画修复路线图而非单一差异审查的场景。