# Pick Ui Library

> Elige la librería correcta para una tarea frontend a partir de una lista curada y opinionada: números, inputs OTP, gráficos, command menus, virtualización, drag and drop, toasts, estado, estilos y más.

Fuente: https://skillsagentes.com/skills/emilkowalski/skills/pick-ui-library
Markdown: https://skillsagentes.com/skills/emilkowalski/skills/pick-ui-library.md

Repositorio: https://github.com/emilkowalski/skills
Autor: emilkowalski
Licencia: MIT
Actualizado: hace 2 meses
Coste de contexto: 65 tok instalada, 1.1k tok al activarse, 1.1k tok con todos los archivos del bundle
Bundle: 1 archivo, 4 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add emilkowalski/skills --skill pick-ui-library --agent claude-code
# Cursor
npx -y skills add emilkowalski/skills --skill pick-ui-library --agent cursor
# Codex
npx -y skills add emilkowalski/skills --skill pick-ui-library --agent codex
# Gemini CLI
npx -y skills add emilkowalski/skills --skill pick-ui-library --agent gemini
# Windsurf
npx -y skills add emilkowalski/skills --skill pick-ui-library --agent windsurf
# Cline
npx -y skills add emilkowalski/skills --skill pick-ui-library --agent cline
```

## Qué hace

- Mapea una tarea frontend concreta a una librería específica de una lista curada y opinionada
- Revisa package.json para ver si ya hay una librería instalada antes de recomendar otra
- Recomienda una sola librería con una frase explicando su uso, y la instala/integra si se pide

## Cuándo usarla

- El usuario pide una librería para una tarea de UI concreta (toasts, dropdowns, drag and drop, gráficos, etc.)
- El usuario pregunta explícitamente 'qué debería usar para X'

## Cuándo no

- No se activa por sí solo; solo corre cuando se invoca explícitamente (disable-model-invocation)

## Qué la activa

- "¿Qué librería debería usar para toasts?"
- "Necesito inputs OTP para verificación"
- "¿Qué usar para drag and drop en este proyecto?"
- "Quiero virtualizar una tabla con miles de filas"
- "¿Con qué manejo el estado global de la app?"

## Archivos

- SKILL.md — 4 KB

## SKILL.md

Reproducido tal cual desde emilkowalski/skills bajo MIT. Esta sección es el documento original y está en inglés.

# 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

1. **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.
2. **Check what's already installed.** Look at `package.json` first. 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.
3. **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.
4. 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](https://base-ui.com) |
| Command menus (⌘K palettes) | [cmdk](https://cmdk.paco.me) |
| Toasts / notifications | [Sonner](https://sonner.emilkowal.ski) |
| One-time password / verification code inputs | [input-otp](https://input-otp.rodz.dev) |
| Customizable GUIs / control panels | [Leva](https://github.com/pmndrs/leva) — [dialkit](https://joshpuckett.me/dialkit) is an alternative |

### Motion & visuals

| Task | Library |
| --- | --- |
| General-purpose animation (springs, layout animations, enter/exit) | [motion](https://motion.dev) (Framer Motion) |
| Animating numbers (counters, prices, stats) | [NumberFlow](https://number-flow.barvian.me) |
| Animated text components | [torph](https://torph.lochie.me/) |
| 3D globes | [Cobe](https://cobe.vercel.app) |
| Dynamic OG images (HTML/CSS → SVG/PNG) | [Satori](https://github.com/vercel/satori) |
| Syntax highlighting | [shiki](https://shiki.style) |

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](https://github.com/benjitaylor/liveline) |
| General charts (static or interactive dashboards) | [recharts](https://recharts.org) |

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](https://dndkit.com) |
| Virtualization (long lists, large tables) | [Virtuoso](https://virtuoso.dev) |

### State & styling

| Task | Library |
| --- | --- |
| State management | [zustand](https://zustand.docs.pmnd.rs) |
| Constructing `className` strings conditionally | [clsx](https://github.com/lukeed/clsx) |
| Type-safe, variant-driven styling for Tailwind | [cva](https://cva.style) |
| Theme switching / dark mode (no flash on load) | [next-themes](https://github.com/pacocoursey/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).

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [emilkowalski](https://skillsagentes.com/creators/emilkowalski.md) — 12 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)