pick-ui-library
- Use it when:
- You need toasts, a command menu, OTP inputs, charts, drag and drop or long lists, and want a trusted library instead of hand-rolled code.
- It does:
- Matches your task to a curated table of about 20 mostly React libraries, checking package.json first so it keeps what you already use.
- You get:
- One recommendation with a sentence on what it's for; it installs and wires it up only if you ask.
- Runs:
- Only when you call it; the agent never starts it on its own.
TL;DR
A lookup table of design engineer Emil Kowalski's picks: base-ui for accessible unstyled components, cmdk for command menus, Sonner (his own) for toasts, input-otp for verification codes, motion for springs and exit animations, NumberFlow for animated numbers, recharts for charts and Liveline for live streaming ones, dnd kit for drag and drop, Virtuoso for long lists, zustand for state, clsx and cva for class names, and next-themes for dark mode, plus picks for control panels, 3D globes, OG images and syntax highlighting. It reasons from the task rather than the library you named, and gives one answer, not a menu. If the project already uses a competitor, it flags its pick but doesn't swap the dependency unless asked. It also catches common mismatches, such as hand-built toasts, div-based dropdowns with manual focus handling, or a 1,000-row list rendered directly. For a task outside the list, it says so before answering from general knowledge. The animate skill points requests for components here.
Summarizes the skill at c8a7962.
npx skills add https://github.com/emilkowalski/skills --skill pick-ui-library skills.sh pageSource on GitHubAll skills from emilkowalski/skills
- Total Downloads
- 216,494 on skills.sh, Nov 9, 2026
- Repo stars
- 54,934 emilkowalski/skills
- First seen
- Jul 21, 2026 on skills.sh
Weekly values
| Week to | Installs |
|---|---|
| Sep 21 | 12,347 |
| Sep 28 | 13,132 |
| Oct 5 | 13,815 |
| Oct 12 | 15,548 |
| Oct 19 | 15,695 |
| Oct 26 | 17,506 |
| Nov 2 | 15,752 |
| Nov 9 | 15,520 |
| Category |
Taste for interfaces that don't look generated: direction, motion and accessibility. Guides for frameworks, databases and SDKs, mostly from their vendors. Everything for building software: planning, coding, debugging, design, frameworks, cloud, agents and skills. |
|---|---|
| Type |
A one-shot action you invoke by name, such as turning the conversation into a PRD. |
| Effect |
Adds no side effects of its own. It shapes how the agent thinks, writes or reviews. Guidelines and routers are always effect:none, even when the task they support edits code. |
| Needs |
Instructions only. Works in any agent that supports skills. |
| Publisher |
Everyone else. Unverified vendor claims default to community. |
| Topics | |
| Stack |
SKILL.md
From emilkowalski/skills at c8a7962. Checked daily, last changed Nov 6, 2026.
Frontmatter
name: 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: truePicking The Right Library
Initial Response
When this skill is first invoked without a specific question, respond only with:
I'm ready to pick the right library for your task, my picks come from Emil Kowalski's curated list.
Do not provide any other information until the user asks a question.
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).