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.
Reemplaza a: Elegir librerías de UI/estado/animación por criterio propio sin guía curada
en todo el repo
0–100, la ruta de este skill
último commit aquí
últimos 90 días
65 tok en reposo
4 KB
Funciona con cualquier agente que lea SKILL.md
npx -y skills add emilkowalski/skills --skill pick-ui-library --agent claude-codeSe instala solo en este repositorio.
Di cualquiera de estas frases y el agente debería cargar este skill.
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.
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.| 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 |
| 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.
| 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.
| Task | Library |
|---|---|
| Drag and drop | dnd kit |
| Virtualization (long lists, large tables) | Virtuoso |
| 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.
<div>-based dropdown/dialog with manual focus handling → base-ui, which handles accessibility, focus trapping, and dismissal.useState-per-component web of props for shared state → zustand.Reproducido de emilkowalski/skills bajo licencia MIT. Leer esta página en markdown.
1 archivo en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.
Este repo incluye 12 skills. Si instalas uno, normalmente ya tienes los demás. Ver el pack skills entero y su comando de instalación
Construye una animación desde cero, decidiendo en orden si debe animarse, con qué propósito, con qué herramienta, propiedades, curva y duración, cómo se interrumpe y cómo sale; escribe la implementación.
Cómo escribir Swift moderno bien: modelado con value types, seguridad ante data races de Swift 6, concurrencia accesible, protocolos y genéricos, diseño de API, rendimiento, ARC, Swift Testing y macros.
Construye animaciones en React Native y Expo decidiendo si debe animarse, en qué hilo corre, spring o timing, y cómo degradar el gesto; implementa con Reanimated, Gesture Handler, Expo Router y expo-haptics.
Guía sobre Sonner, la librería de toasts para React: instalación del Toaster, elección de la llamada toast() correcta, promise/loading, actualización, estilos, temas, posicionamiento y solución de problemas.
El enfoque de Apple al diseño de interfaces y al movimiento fluido y físico, traducido a la web: gestos, springs, materiales, tipografía y accesibilidad.
Revisa código de animación y motion contra un estándar de craft alto basado en la filosofía de diseño de Emil Kowalski; por defecto señala problemas, la aprobación se gana.
Crea arte algorítmico con p5.js, aleatoriedad con semilla y exploración interactiva de parámetros. Úsalo cuando pidan arte por código, arte generativo, flow fields o sistemas de partículas.
Aplica los colores y la tipografía oficiales de la marca Anthropic a cualquier artefacto que pueda beneficiarse de su look-and-feel. Úsalo cuando apliquen colores de marca o estándares de diseño.
Crea arte visual en documentos .png y .pdf partiendo de una filosofía de diseño. Úsalo cuando pidan un póster, una pieza de arte, un diseño u otra pieza estática.
