pick-ui-library
por emilkowalski
Elige la biblioteca adecuada para una tarea de frontend determinada de una lista curada y con criterio definido: números, entradas OTP, gráficos, menús de comandos, virtualización, arrastrar y soltar, notificaciones toast, estado, estilos y más. Solo se ejecuta cuando se invoca explícitamente; no se activa por sí solo.
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).
Más skills de emilkowalski
find-animation-opportunities
emilkowalski
Busca en un codebase o UI lugares que no se animan pero deberían hacerlo, y rechaza todo lo que no deba animarse. Solo lectura; propone movimiento con valores exactos, no lo implementa. Se usa cuando el usuario pregunta "¿qué se podría animar aquí?" o quiere "hacer que esto se sienta más vivo". Para corregir animaciones existentes, usa improve-animations o review-animations en su lugar.
developmentdesigncreative
animate
emilkowalski
Crea una animación desde cero, tomando las decisiones en el orden que determina si se siente correcta: si debería animarse, con qué propósito, qué herramienta, qué propiedades, qué curva y duración, cómo interrumpe, cómo sale. Escribe la implementación. Úsalo cuando se te pida animar algo, añadir movimiento, hacer que un componente se sienta vivo o construir una transición. Para criticar movimiento existente usa review-animations; para auditar un código completo usa improve-animations.
prototype
emilkowalski
Crea múltiples versiones genuinamente diferentes de una pieza de interfaz que describes, renderizadas detrás de un selector visual para que puedas alternar entre ellas en vivo y promover la que mejor se sienta. Solo se ejecuta cuando se invoca explícitamente; no se activa por sí solo.
developmentdesigncreative
ask-sonner
emilkowalski
Guía de Sonner, la librería de toasts de React — instala y configura el Toaster, elige la llamada toast() correcta, toasts de promesa y de carga, actualizar, descartar y persistir toasts, estilos, temas e iconos, posicionamiento y múltiples toasters. Úsalo al trabajar con Sonner o al solucionar problemas — toasts que no aparecen, aparecen dos veces, pierden sus estilos, ignoran las clases de Tailwind, quedan detrás de un modal o no siguen el modo oscuro.
emil-design-eng
emilkowalski
Esta habilidad codifica la filosofía de Emil Kowalski sobre el pulido de la interfaz de usuario, el diseño de componentes, las decisiones de animación y los detalles invisibles que hacen que el software se sienta genial.
designdevelopmentcreative
review-animations
emilkowalski
Revisa el código de animación y movimiento contra un alto estándar artesanal derivado de la filosofía de ingeniería de diseño de Emil Kowalski. Por defecto, se marcan problemas; la aprobación se gana.
animation-vocabulary
emilkowalski
Glosario de búsqueda inversa que convierte una descripción vaga de una animación web o efecto de movimiento en su término exacto ("la cosa que rebota cuando se abre un popover" → Pop in; "el desplazamiento elástico de iOS" → Rubber-banding). Se usa cuando el usuario pregunta "¿cómo se llama cuando…", o describe un efecto de movimiento sin saber su nombre y quiere la palabra correcta para indicársela a una IA o diseñador. Sirve para nombrar un efecto, no para diseñarlo o construirlo.
creativedesignresearch
improve-animations
emilkowalski
Inspeccionar el código de animación y movimiento de una base de código como asesor senior de motion, luego generar una auditoría priorizada y planes de implementación autocontenidos para que otros agentes (o modelos más económicos) los ejecuten. Solo lectura del código fuente — planifica mejoras, no las aplica. Usar cuando el usuario pida "mejorar las animaciones", "auditar el motion", "hacer que esta app se sienta mejor", o quiera una hoja de ruta de correcciones de animación en lugar de una revisión de un solo diff.