pick-ui-library
作成者： emilkowalski
与えられたフロントエンドタスクに適したライブラリを、厳選された意見ベースのリストから選び出します — 数値入力、OTP入力、チャート、コマンドメニュー、仮想化、ドラッグ＆ドロップ、トースト、状態管理、スタイリングなど。明示的に呼び出された場合のみ実行され、自動的には起動しません。
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).
emilkowalskiのその他のスキル
find-animation-opportunities
emilkowalski
コードベースまたはUIを検索して、アニメーション化すべきだがされていない場所を見つけ、すべきでないものはすべて拒否します。読み取り専用です。正確な値でモーションを提案しますが、実装はしません。ユーザーが「ここで何をアニメーション化できるか？」と尋ねたり、「これをより生き生きと感じさせる」ことを望む場合に使用します。既存のアニメーションを修正するには、代わりにimprove-animationsまたはreview-animationsを使用してください。
developmentdesigncreative
animate
emilkowalski
アニメーションをゼロから構築し、適切かどうかを判断する順序で決定を下します——そもそもアニメーションさせるべきか、目的、使用ツール、プロパティ、カーブと持続時間、割り込み方法、終了方法。実装を記述します。アニメーションの作成、動きの追加、コンポーネントに動きを持たせる、トランジションの構築を依頼された場合に使用してください。既存のモーションを批評する場合はreview-animationsを、コードベース全体を監査する場合はimprove-animationsを使用してください。
prototype
emilkowalski
あなたが説明するUIパーツの、本質的に異なる複数のバージョンを構築し、視覚的なピッカーの背後にレンダリングして、ライブで切り替えながら確認し、しっくりくるものを昇格させることができます。明示的に呼び出された場合のみ実行され、単独でトリガーされることはありません。
developmentdesigncreative
ask-sonner
emilkowalski
Sonner（Reactトーストライブラリ）のガイド — Toasterのインストールとセットアップ、適切なtoast()呼び出しの選択、プロミスとローディングトースト、トーストの更新・破棄・永続化、スタイリング、テーマ設定とアイコン、配置と複数のトースター。Sonnerを使用する際やトラブルシューティングに使用します — トーストが表示されない、二重に表示される、スタイルが失われる、Tailwindクラスが無視される、モーダルの背後に配置される、ダークモードに従わない場合など。
emil-design-eng
emilkowalski
このスキルは、Emil KowalskiのUIポリッシュ、コンポーネントデザイン、アニメーションの決定、そしてソフトウェアを素晴らしいものにする目に見えない細部に関する哲学をエンコードしています。
designdevelopmentcreative
review-animations
emilkowalski
アニメーションとモーションコードを、Emil Kowalskiのデザインエンジニアリング哲学に基づく高い品質基準でレビューします。デフォルトでフラグを立て、承認は実績によって得られます。
animation-vocabulary
emilkowalski
逆引き用語集で、Webアニメーションやモーションエフェクトの曖昧な説明から正確な用語を導き出します（「ポップオーバーが開くときの
creativedesignresearch
improve-animations
emilkowalski
コードベースのアニメーションとモーションコードをシニアモーションアドバイザーとして調査し、優先順位付けされた監査結果と、他のエージェント（または低コストモデル）が実行可能な自己完結型の実装計画を作成します。ソースコードは読み取り専用で、改善計画を立案するのみで、適用は行いません。ユーザーが「アニメーションを改善して」「モーションを監査して」「このアプリの感触を良くして」と依頼した場合や、単一の差分レビューではなくアニメーション修正のロードマップを求めている場合に使用します。