pick-ui-library
von emilkowalski
Wähle die richtige Bibliothek für eine bestimmte Frontend-Aufgabe aus einer kuratierten, meinungsstarken Liste — Zahlen, OTP-Eingaben, Diagramme, Befehlsmenüs, Virtualisierung, Drag-and-Drop, Toasts, State, Styling und mehr. Wird nur ausgeführt, wenn explizit aufgerufen; es löst nicht von selbst aus.
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).
Mehr Skills von emilkowalski
find-animation-opportunities
emilkowalski
Durchsuche eine Codebasis oder Benutzeroberfläche nach Stellen, die nicht animiert sind, aber animiert werden sollten, und lehne alles ab, was nicht animiert werden sollte. Nur lesend; es schlägt Bewegung mit exakten Werten vor, implementiert sie aber nicht. Verwende dies, wenn der Benutzer fragt „Was könnte hier animiert werden?“ oder „das lebendiger machen“ möchte. Zum Beheben bestehender Animationen verwende stattdessen improve-animations oder review-animations.
developmentdesigncreative
animate
emilkowalski
Erstelle eine Animation von Grund auf und triff die Entscheidungen in der Reihenfolge, die bestimmt, ob sie sich richtig anfühlt – soll sie überhaupt animieren, welcher Zweck, welches Werkzeug, welche Eigenschaften, welche Kurve und Dauer, wie sie unterbricht, wie sie endet. Schreibt die Implementierung. Verwenden, wenn darum gebeten wird, etwas zu animieren, Bewegung hinzuzufügen, eine Komponente lebendig wirken zu lassen oder einen Übergang zu bauen. Für Kritik an bestehender Bewegung review-animations verwenden; für die Prüfung einer gesamten Codebasis improve-animations verwenden.
prototype
emilkowalski
Erstelle mehrere wirklich unterschiedliche Versionen eines von dir beschriebenen UI-Elements, die hinter einem visuellen Auswähler gerendert werden, sodass du live zwischen ihnen wechseln und die passende Version übernehmen kannst. Läuft nur, wenn explizit aufgerufen; es wird nicht von selbst ausgelöst.
developmentdesigncreative
ask-sonner
emilkowalski
Leitfaden für Sonner, die React-Toast-Bibliothek — Installation und Einrichtung des Toasters, Auswahl des richtigen toast()-Aufrufs, Promise- und Lade-Toasts, Aktualisieren, Schließen und Beibehalten von Toasts, Styling, Theming und Icons, Positionierung und mehrere Toaster. Verwenden Sie dies, wenn Sie mit Sonner arbeiten oder Probleme beheben — Toasts, die nicht erscheinen, doppelt erscheinen, ihre Stile verlieren, Tailwind-Klassen ignorieren, hinter einem Modal liegen oder den Dunkelmodus nicht befolgen.
emil-design-eng
emilkowalski
Diese Fertigkeit kodiert Emil Kowalskis Philosophie zu UI-Verfeinerung, Komponentendesign, Animationsentscheidungen und den unsichtbaren Details, die Software großartig wirken lassen.
designdevelopmentcreative
review-animations
emilkowalski
Überprüft Animations- und Bewegungscode anhand einer hohen handwerklichen Messlatte, die aus Emil Kowalskis Design-Engineering-Philosophie abgeleitet ist. Standardmäßig wird markiert; Zustimmung muss verdient werden.
animation-vocabulary
emilkowalski
Umgekehrtes Nachschlageglossar, das eine vage Beschreibung einer Web-Animation oder Bewegungswirkung in den genauen Begriff umwandelt („das Hüpfende, wenn ein Popover aufgeht“ → Pop in; „das iOS-Gummiband-Scrollen“ → Rubber-banding). Verwenden, wenn der Benutzer fragt: „Wie heißt das, wenn…“ oder eine Bewegungswirkung beschreibt, ohne deren Namen zu kennen, und das richtige Wort für eine KI oder einen Designer benötigt. Zum Benennen einer Wirkung, nicht zum Entwerfen oder Erstellen.
creativedesignresearch
improve-animations
emilkowalski
Untersuche die Animations- und Bewegungscodebasis als leitender Bewegungsberater, erstelle dann ein priorisiertes Audit und eigenständige Implementierungspläne für andere Agenten (oder günstigere Modelle) zur Ausführung. Schreibgeschützt für den Quellcode – es plant Verbesserungen, wendet sie aber nicht an. Verwende dies, wenn der Nutzer darum bittet, "die Animationen zu verbessern", "die Bewegung zu prüfen", "diese App besser anfühlen zu lassen" oder eine Roadmap für Animationskorrekturen wünscht, anstatt eine Überprüfung eines einzelnen Diffs.