pick-ui-library
通知、コマンドメニュー、ドラッグ、長い一覧の表示、グラフなど、画面づくりの作業ごとに使うライブラリを、作者が選んだ 19 行の表から 1 つに決めて勧めさせる。呼んだときだけ動く
npx skills add emilkowalski/skills/pick-ui-library入れる前にこのスキルがすること・注意点・SKILL.md の原文を確かめてください。解析は安全性の判定ではありません。
- インストール
- 198,693
- 実用度
- 22
- GitHub star
- 54,091
- 最終更新
- 2026/11/5
頼み方の例
そのままコピーして使えますpick-ui-libraryスキルを使って、この管理画面に必要な部品（通知、⌘K のコマンドメニュー、千行を超える表）に使うライブラリを選んでください。先に package.json を見て、すでに入っているものがあれば教えてください。インストールはまだしないでください。
対象のファイルや状況は、ご自身の作業に合わせて置き換えてください。
このスキルがすること
SKILL.md の記述から機械的に抽出- 外部通信・シェル実行・ファイル操作の記述は見つかりませんでした
これは安全性の判定ではありません。 SKILL.md にそう書かれているという事実だけを並べています。実際に問題があるかは使い方と文脈で決まるため、当サイトでは断定しません。導入前に SKILL.md の原文を確認してください。
SKILL.md の規模
いつ使うか
画面の部品を作る前に、使うライブラリを決めたいときのスキルです。「通知を出したい」「ドラッグで並べ替えたい」と言うと、作者の表から 1 つを選んで勧めます。
公開しているのは、通知の部品 Sonner の作者の Emil Kowalski さんです。リポジトリの説明は、エージェントが通知の部品を手で作ったり、放置されたパッケージを入れたりする代わりに、作者が使って信頼しているものから選ばせる、という狙いを挙げています。
- 作業とライブラリの表
- 19 行
- 表の分け方
- 5 分類
- 見逃しやすい取り違えの例
- 6 件
- SKILL.md の大きさ（2026-10-23 時点）
- 4,790 バイト
表は 5 分類・19 行
表は次の 5 つに分かれています（下は主な行）。
| 分類 | 主な作業 → ライブラリ |
|---|---|
| 部品の土台 | 見た目の無いアクセシブルな部品 → base-ui、⌘K のメニュー → cmdk、通知 → Sonner、確認コードの入力 → input-otp、調整用の操作盤 → Leva（代わりに dialkit） |
| 動きと見た目 | 汎用の動き → motion、数字の動き → NumberFlow、文字の動き → torph、3D の地球儀 → Cobe、OG 画像の生成 → Satori、コードの色分け → shiki |
| グラフ | 流れ続けるデータ → Liveline、それ以外 → recharts |
| 操作と速さ | ドラッグ → dnd kit、長い一覧や大きな表 → Virtuoso |
| 状態と見た目の指定 | 状態の管理 → zustand、クラス名の組み立て → clsx、型付きの見た目の種類 → cva、暗い表示への切り替え → next-themes |
選ぶ手順は 4 段
本文は、表を引く前の手順を 4 段で決めています。
- 作業を見極める利用者が名前を挙げたライブラリではなく、やりたい作業で考える。「ドロップダウンを出したい」は部品の土台の作業
- 入っているものを見るまず package.json を確かめる。表のライブラリが入っていればそれを使う
- 1 つだけ勧める何のためのものかを 1 文で言う。頼まれていれば入れて組み込むまでやる
- 表に無ければそう言う自分の知識で勧めるが、表の外に出たことをはっきり伝える
答えがはっきりしているときに選択肢を並べない、とも書かれています。表の外の候補に置き換えるのは、利用者が求めたときか、作業が表に無いときだけです。
迷いやすいところの分け方
表の中で、よく迷う 3 か所に分け方が書かれています。
motion か CSS か
バネの動き、レイアウトの動き、消えるときの動き、指の動きに追従する値なら motion。単純なホバーやフェードは CSS の transition で足りる
Liveline か recharts か
データが次々に届き、時間とともにグラフが流れるなら Liveline。それ以外はすべて recharts
clsx か cva か
その場の条件でクラスを付け外すなら clsx。大きさや状態などの種類があり、型付きの指定にする価値があるなら cva。2 つは組み合わせて使える
使わないほうがいいとき
選択肢を比べたい
このスキルは、表に答えがあれば 1 つだけ勧めます。候補を並べて長所と短所を比べたいなら、呼ぶ前に「比べてほしい」と頼むか、使わずに聞くほうが早いです。
表に無い分野
表に無いのは、たとえばフォームの検証、日付の選択、データの取得、文字の国際化などです。こうした作業では表の外から勧めることになり、作者の選定という利点はなくなります。表に無いときは表の外に出たと言う、と本文は決めています。
決めた部品の使い方を深く知りたい
通知の Sonner を組み込む・直すなら、同じ作者の ask-sonner が詳しいです。shadcn/ui で部品を揃えるなら shadcn の側です。
注意点
呼んだときだけ動く
frontmatter に disable-model-invocation: true があり、説明文も「明示的に呼んだときだけ動き、自分からは動かない」としています。部品を作っている途中で勝手にライブラリを勧めることはありません。使うときはスキルの名前で呼びます。
最初の返事が決まっている
質問を付けずに呼ぶと、作者の表から選ぶ準備ができた、という 1 文だけを返すよう決められています。質問されるまで、ほかのことは言いません。呼ぶときは、作りたいものを一緒に書くと 1 往復で済みます。
作者の好みで選んだ表
表にあるのは名前と公式の場所だけで、版、対応する環境、開発が続いているかは書かれていません。どの枠組み（React か Vue かなど）で使えるかも、表には書かれていません。入れる前に、それぞれの公式の案内で確かめてください。
入っているライブラリを勝手に入れ替えない
すでに表の外の同種のもの（例として react-window と Virtuoso が挙がっています）が入っているときは、勧めを伝えるだけにとどめる、と本文にあります。頼まれていない入れ替えはしません。
解析で分かったこと
SKILL.md の解析では、外部通信・シェル実行の記述は見つかっていません。同梱ファイルはありません。ただし、頼めばライブラリを入れて組み込むところまでやる、と本文にあります。インストールはパッケージを取ってきて package.json を書き換えるので、勧めだけ欲しいときは「入れないで」と添えてください。
インストール数の推移
日次で記録9月18日 〜 11月7日（49日分）
インストール数と 1 日あたりの増加は Skillselion が に集計した値です。上流の更新は数日おきなので、前日比ではありません。GitHub star と最終更新は に GitHub から取得しました。
併用すると強いスキル
animate
画面の動きを 0 から作らせる。まず「動かすべきか」を使う頻度で判定し、目的を 1 語で言えなければ作らない。道具・動かす値・緩急・長さを決まった表から選び、動きを減らす設定の対応まで込みで書く
ask-sonner
React の通知部品 Sonner の組み込み・使い分け・見た目の変え方・不具合の直し方を、作者本人の知見で答えさせる。「出ない」「2 回出る」「Tailwind が効かない」「暗い表示に追従しない」の原因表つき
emil-design-eng
画面の動きと部品の作り込みを見直させる。そもそも動かすべきかから始め、緩急・長さ・押したときの反応まで数字で決める。直しは前後の表で出させる
shadcn
shadcn/ui を「規約どおりに」書かせる。className の使い方から禁止事項まで持っている
よくある質問
見逃しやすい取り違えとは何ですか
本文が 6 つ挙げています。通知を手作りしているか、モーダルのライブラリで作っている。div で作ったドロップダウンで手作業の焦点の管理をしている。文字を描き直して数字を動かしている。千行を超える一覧をそのまま描いている。共有の状態を部品ごとの useState とプロップの受け渡しで回している。三項演算子が 3 段重なったクラス名を書いている。それぞれ Sonner、base-ui、NumberFlow、Virtuoso、zustand、clsx（種類の形なら cva）に置き換えるよう書かれています。
呼んだら「準備ができた」としか言いません
決められた動きです。質問を付けずに呼ぶと、準備ができたという 1 文だけを返し、質問を待ちます。「長い一覧には何を使う」のように、続けて作業を伝えてください。
表に無いものを聞くとどうなりますか
表に無いと伝えたうえで、エージェント自身の知識から勧めます。そのとき、作者の表から外れたことをはっきり言うよう本文が決めています。表の中からの勧めと、表の外からの勧めを区別して受け取ってください。
同じ作者のほかのスキルとはどうつながりますか
動きを一から作る animate は、部品が要るなら手作りせずこのスキルに回すよう書いています。動きの選び方は animate、使う部品の選び方はこのスキル、という分担です。