pick-ui-library

Picking The Right Library

A lookup for React and web work. Given a task ("I need toasts"), match it to the list and recommend one library. The picks are deliberate and taste-driven: do not substitute others unless the user asks or the task is not covered. Hand-rolling what a maintained library does is the failure this skill prevents.

How to use it

1. Identify the task, not the library the user named. "A dropdown" is a UI-primitives task even if they asked about something else.
2. Check package.json first. A listed library already installed is used. A competitor (react-window instead of Virtuoso) is flagged but not swapped unless asked.
3. Recommend one library, say what it is for in one sentence, and install and wire it when that is part of the request. A clear answer is not a menu.
4. A task the list does not cover is said so explicitly; recommend from your own knowledge and make clear you left the list.

The list

Task	Library
Unstyled accessible primitives (dialogs, popovers, menus, selects)	base-ui
Command menu (cmd-K palette)	cmdk
Toasts and notifications	Sonner
One-time password and verification code input	input-otp
Control panels and tweakable GUIs	Leva, alternative dialkit
General animation (springs, layout, enter and exit)	motion
Animated numbers (counters, prices, stats)	NumberFlow
Animated text	torph
3D globes	Cobe
Dynamic OG images (HTML and CSS to SVG or PNG)	Satori
Syntax highlighting	shiki
Live streaming charts that scroll with time	Liveline
Every other chart	recharts
Drag and drop	dnd kit
Long lists and large tables	Virtuoso
State management	zustand
Conditional className strings	clsx
Typed variant styling for Tailwind	cva
Theme switching without a flash	next-themes

Reach for motion only for springs, layout and exit animations or gesture-driven values; a hover or fade is a plain CSS transition. clsx is for ad-hoc conditions, cva when a component has real variants (size, intent, state); they compose.

Mismatches to catch

• Toasts built by hand or with a modal library: Sonner.
• A div dropdown or dialog with manual focus handling: base-ui, which brings focus trapping and dismissal.
• A number animated by re-rendering text: NumberFlow.
• A 1,000-row list rendered directly: Virtuoso before pagination hacks.
• Shared state passed as a web of props: zustand.
• Template-literal className ternaries three deep: clsx, or cva when variant-shaped.

Say it in the reply

The one library, the one-sentence reason, what package.json already held, and whether the task was outside the list.

Source: emilkowalski/skills pick-ui-library (MIT).