pick-ui-library
par emilkowalski
Choisissez la bonne bibliothèque pour une tâche frontend donnée à partir d'une liste organisée et assumée — nombres, champs OTP, graphiques, menus de commandes, virtualisation, glisser-déposer, toasts, état, styles, et plus encore. Ne s'exécute que lorsqu'il est explicitement invoqué ; il ne se déclenche pas de lui-même.
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).
Plus de skills de emilkowalski
find-animation-opportunities
emilkowalski
Recherchez dans une base de code ou une interface utilisateur les endroits qui ne s'animent pas mais qui le devraient, et rejetez tout ce qui ne devrait pas. Lecture seule ; il propose des animations avec des valeurs exactes, il ne les implémente pas. À utiliser lorsque l'utilisateur demande « qu'est-ce qui pourrait être animé ici ? » ou souhaite « rendre cela plus vivant ». Pour corriger des animations existantes, utilisez plutôt improve-animations ou review-animations.
developmentdesigncreative
animate
emilkowalski
Construire une animation de zéro, en prenant les décisions dans l'ordre qui détermine si elle semble juste — faut-il l'animer, dans quel but, quel outil, quelles propriétés, quelle courbe et durée, comment elle interrompt, comment elle sort. Écrit l'implémentation. À utiliser lorsqu'on demande d'animer quelque chose, d'ajouter du mouvement, de rendre un composant vivant, ou de construire une transition. Pour critiquer une animation existante, utiliser review-animations ; pour auditer une base de code entière, utiliser improve-animations.
prototype
emilkowalski
Construisez plusieurs versions réellement différentes d’un élément d’interface que vous décrivez, rendues derrière un sélecteur visuel afin de pouvoir les parcourir en direct et promouvoir celle qui convient le mieux. Ne s’exécute que lorsqu’il est explicitement invoqué ; il ne se déclenche pas de lui-même.
developmentdesigncreative
ask-sonner
emilkowalski
Guide de Sonner, la bibliothèque de toasts React — installer et configurer le Toaster, choisir le bon appel toast(), les toasts de promesse et de chargement, la mise à jour, la fermeture et la persistance des toasts, le style, les thèmes et les icônes, le positionnement et les toasters multiples. À utiliser lorsque vous travaillez avec Sonner ou pour résoudre ses problèmes — toasts qui n'apparaissent pas, apparaissent deux fois, perdent leur style, ignorent les classes Tailwind, se trouvent derrière une modale ou ne suivent pas le mode sombre.
emil-design-eng
emilkowalski
Cette compétence encode la philosophie d'Emil Kowalski sur le polissage de l'interface utilisateur, la conception de composants, les décisions d'animation et les détails invisibles qui rendent un logiciel agréable à utiliser.
designdevelopmentcreative
review-animations
emilkowalski
Examine le code d'animation et de mouvement par rapport à un haut niveau d'exigence artisanale dérivé de la philosophie d'ingénierie de conception d'Emil Kowalski. Par défaut, signaler ; l'approbation se mérite.
animation-vocabulary
emilkowalski
Glossaire de recherche inversée qui transforme une description vague d’une animation web ou d’un effet de mouvement en son terme exact (« le truc rebondissant quand une popover s’ouvre » → Pop in ; « le défilement élastique d’iOS » → Rubber-banding). À utiliser lorsque l’utilisateur demande « comment ça s’appelle quand… », ou décrit un effet de mouvement sans connaître son nom et souhaite le mot juste pour interpeller une IA ou un designer. Pour nommer un effet, non pour le concevoir ou le construire.
creativedesignresearch
improve-animations
emilkowalski
Examiner le code d'animation et de mouvement d'une base de code en tant que conseiller senior en motion, puis produire un audit priorisé et des plans d'implémentation autonomes pour que d'autres agents (ou des modèles moins coûteux) les exécutent. Lecture seule du code source — il planifie des améliorations, il ne les applique pas. À utiliser lorsque l'utilisateur demande « améliorer les animations », « auditer le mouvement », « rendre cette application plus agréable », ou souhaite une feuille de route de corrections d'animations plutôt qu'une révision d'une seule modification.