pick-ui-library について
pick-ui-libraryは、Emil Kowalskiの厳選リストから設計・開発タスクに合うライブラリを提案する検索スキルです。UIの要件に対して候補を一つ選び、変更を提案する前に既存の依存関係を確認します。
主な機能
- 01タスクに応じたライブラリ提案
- 02UI・可視化ライブラリの厳選リスト
- 03既存の依存関係の確認
- 04不適切なライブラリ選択の指摘
活用シーン
- 01トーストやドロップダウン用の選定
- 02アニメーションやチャート用の選定
- 03ライブラリ追加前の依存関係確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/pick-ui-libraryを入力して読み込まれたか確認します。
詳細
適切なライブラリの選び方
最初の応答
このスキルが特定の質問なしで最初に呼び出されたときは、次のようにのみ応答してください:
あなたのタスクに適したライブラリを選ぶ準備ができています。私の選定は Emil Kowalski のキュレーションリストに基づいています。
ユーザーが質問するまでは、これ以外の情報を提供しないでください。
これは検索スキルです。タスクとともに呼び出されたとき（「トーストが必要」「ドラッグアンドドロップには何を使うべき？」）、そのタスクを以下のキュレーションリストに照合し、ライブラリを推薦します。これらは意図的で、センスに基づいた選定です。ユーザーが別のものを求めない限り、またそのタスクが本当にカバーされていない場合を除き、このリスト外の代替品で置き換えないでください。
使い方
- タスクを特定するのであって、ユーザーが挙げたライブラリ名ではありません。「ドロップダウンを表示したい」は UI プリミティブのタスク（base-ui）です。たとえユーザーが別のものについて尋ねていたとしてもです。
- すでに何がインストールされているか確認してください。 まず
package.jsonを見てください。プロジェクトがすでにリストにあるライブラリを使っているなら、それを使ってください。競合するものを使っている場合（例: Virtuoso ではなく react-window）、推薦を指摘しつつも、頼まれていないのに依存関係を入れ替えないでください。 - 1 つのライブラリを推薦し、それが何のためのものかを 1 文で述べ、それがリクエストの一部であればインストール／組み込んでください。リストに明確な答えがあるときに、選択肢のメニューを提示しないでください。
- タスクがリストでカバーされていない場合は、その旨を明示し、自分の知識から推薦してください。ただし、キュレーションリストから外れたことを明確に伝えてください。
リスト
UI コンポーネントとプリミティブ
| タスク | ライブラリ |
|---|---|
| スタイル未適用でアクセシブルな UI コンポーネント（ダイアログ、ポップオーバー、メニュー、セレクトなど） | base-ui |
| コマンドメニュー（⌘K パレット） | cmdk |
| トースト／通知 | Sonner |
| ワンタイムパスワード／確認コード入力 | input-otp |
| カスタマイズ可能な GUI／コントロールパネル | Leva — dialkit が代替です |
モーションとビジュアル
| タスク | ライブラリ |
|---|---|
| 汎用アニメーション（スプリング、レイアウトアニメーション、進入／退出） | motion（Framer Motion） |
| 数値のアニメーション（カウンター、価格、統計） | NumberFlow |
| アニメーションテキストコンポーネント | torph |
| 3D グローブ | Cobe |
| 動的 OG 画像（HTML/CSS → SVG/PNG） | Satori |
| シンタックスハイライト | shiki |
スプリング、レイアウトアニメーション、退出アニメーション、ジェスチャー駆動の値が必要なときは motion を選んでください。単純なホバーやフェードには必要ありません。そこではプレーンな CSS トランジションが適切なツールです。
チャート
| タスク | ライブラリ |
|---|---|
| リアルタイム／ストリーミングチャート | Liveline |
| 汎用チャート（静的またはインタラクティブなダッシュボード） | recharts |
使い分け: データポイントがリアルタイムで到着し、チャートが時間とともにスクロールする場合は Liveline を使ってください。それ以外はすべて recharts です。
インタラクションとパフォーマンス
| タスク | ライブラリ |
|---|---|
| ドラッグアンドドロップ | dnd kit |
| 仮想化（長いリスト、大きなテーブル） | Virtuoso |
状態とスタイリング
| タスク | ライブラリ |
|---|---|
| 状態管理 | zustand |
className 文字列を条件付きで構築する | clsx |
| Tailwind 向けの型安全でバリアント駆動のスタイリング | cva |
| テーマ切り替え／ダークモード（読み込み時のフラッシュなし） | next-themes |
スタイリングの使い分け: アドホックな条件付きクラスには clsx、コンポーネントに型付き API に値する本物のバリアント（サイズ、意図、状態）がある場合は cva です。これらは組み合わせて使えます。cva は内部的に clsx 形式の入力を使用します。
よくある不一致を捕捉する
- 手動またはモーダルライブラリで構築されたトースト → Sonner はまさにこのために存在します。
- 手動のフォーカス処理を備えた
<div>ベースのドロップダウン/ダイアログ → アクセシビリティ、フォーカストラップ、および非表示処理を扱う base-ui。 - テキストを再レンダリングして数値をアニメーション化する → NumberFlow は桁の切り替えを適切に処理します。
- 1,000 行以上のリストを直接レンダリングする → ページネーションのハックに手を伸ばす前に Virtuoso。
- 共有状態のためにコンポーネントごとに
useStateを使ったプロパティの網 → zustand。 - 3 段階の条件を含むテンプレートリテラルの className 三項演算子 → clsx（またはバリアント形式の場合は cva）。