pick-ui-library
emilkowalski/skills
Pick the right frontend library from Emil Kowalski's curated, opinionated list for UI components, animation, charts, and state.
What is pick-ui-library?
A lookup skill that matches frontend tasks (toasts, drag-and-drop, charts, virtualization, state management, etc.) to a hand-picked library recommendation. Only runs when explicitly invoked; helps you choose between proven tools rather than exploring endless alternatives.
- Recommends libraries for UI components, primitives, and accessibility (base-ui, cmdk, Sonner, input-otp)
- Suggests animation and motion libraries (Framer Motion, NumberFlow, torph, Cobe, Satori, shiki)
- Picks chart libraries based on use case (Liveline for real-time streaming, recharts for general dashboards)
- Recommends interaction and performance tools (dnd kit for drag-and-drop, Virtuoso for virtualization)
- Advises on state and styling solutions (zustand, clsx, cva, next-themes)
- Checks your existing package.json to avoid unnecessary dependency churn
How to install pick-ui-library
npx skills add https://github.com/emilkowalski/skills --skill pick-ui-libraryHow to use pick-ui-library
- 1.Ask the skill about a specific frontend task (e.g., 'I need toasts', 'what should I use for drag and drop?')
- 2.The skill identifies the task category and recommends the single best library from the curated list
- 3.Review the one-sentence explanation of what the library does
- 4.Request installation or integration help if needed; the skill will wire it up
Use cases
- You need a toast notification system and want a proven recommendation instead of building one
- Building a command palette (⌘K) and need an accessible, lightweight library
- Rendering a 1000+ row table and need virtualization guidance
- Animating numbers or counters and want proper digit transitions
- Choosing between drag-and-drop libraries for a complex interaction
- Frontend developers building React applications
- Teams standardizing on a curated set of proven libraries
- Developers who want opinionated recommendations over endless choice
- Projects using Tailwind CSS and needing variant-driven styling
pick-ui-library FAQ
The skill checks your package.json first. If you're using a competitor library, it will flag the recommendation but won't force a dependency change unless you ask.
The skill will say so explicitly and recommend from general knowledge, but will be clear that you've left the curated list.
Yes. The skill provides one clear recommendation by default, but will suggest alternatives if you request them.
It only runs when explicitly invoked—it does not trigger automatically on its own.
The curated list is primarily React-focused, though some libraries (like shiki for syntax highlighting) are framework-agnostic.
Full instructions (SKILL.md)
Source of truth, from emilkowalski/skills.
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: true
Picking 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).
Related skills
More from emilkowalski/skills and the wider catalog.
prototype
Generate multiple genuinely different UI variants behind a live picker to explore and choose the best direction.
review-animations
Reviews animation code against Emil Kowalski's high craft bar—default to flagging, approval is earned.
write-swift
Master modern Swift 6: value types, data-race safety, concurrency, and performance patterns.
animate
Build animations that feel right, from decision to implementation.
speakturbo-tts
Give your agent the ability to speak to you real-time. Talk to your Claude! Ultra-fast TTS, text-to-speech, voice synthesis, audio output with ~90ms latency. 8 built-in voices for instant voice responses. For voice cloning, use the speak skill.
speak-tts
Give your agent the ability to speak to you real-time. Talk to your Claude! Local TTS, text-to-speech, voice synthesis, audio generation with voice cloning on Apple Silicon. Use for reading articles aloud, audiobook narration, or voice responses. Runs entirely on-device via MLX - private, no API keys.