Source: emilkowalski/skills · Maintainer: community: Emil Kowalski · License: MIT · Checked: 24 October 2026
What is the pick UI library skill?
The pick UI library skill, pick-ui-library, gives your agent one designer-engineer's list of trusted frontend libraries, sorted by task, and tells it to recommend a single pick from that list when you need toasts, a command menu, charts, drag and drop or similar. The goal is to stop agents from hand-rolling components that a good library already handles. It is for frontend developers, mostly in React projects, who want consistent, opinionated dependency choices.
It is one of 15 skills in Emil Kowalski's emilkowalski/skills repo. The README describes it as: "Have your agent pick the right library for the task based on libraries I use and trust, instead of letting AI hand-roll a toast component or install an abandoned package." Emil Kowalski also wrote Sonner, one of the picks on the list.
As of 24 October 2026, its skills.sh page listed about 182,000 installs (snapshot, 24 October 2026).
What does it do?
The folder holds one short file, a SKILL.md of about 700 words. Its description says it "Only runs when explicitly invoked; it does not trigger on its own."
It is user-invoked. The frontmatter sets disable-model-invocation: true. Per the Claude Code skills docs, that prevents Claude from loading the skill automatically and is meant for workflows "you want to trigger manually with /name." Type /pick-ui-library to run it.
Invoked with no question, the agent replies only with "I'm ready to pick the right library for your task, my picks come from Emil Kowalski's curated list." and waits.
How the agent decides:
- Identify the task, not the library you named. "I need to show a dropdown" is a UI primitives task, so the answer is base-ui.
- Check what's installed. It reads
package.jsonfirst. A listed library already in use wins. A competitor, such as react-window instead of Virtuoso, gets flagged but not replaced unless you ask. - Recommend one library with a one-sentence reason, and wire it up if that is part of the request. The SKILL.md says "Don't present a menu of options when the list has a clear answer."
- Say when it leaves the list. If the task isn't covered, the agent says so and recommends from its own knowledge.
The list:
| Task | Pick |
|---|---|
| Unstyled, accessible UI components | base-ui |
| Command menus (Cmd+K palettes) | cmdk |
| Toasts and notifications | Sonner |
| One-time password inputs | input-otp |
| Control panels and tweakable GUIs | Leva (dialkit as an alternative) |
| General animation: springs, layout, enter and exit | motion (Framer Motion) |
| Animating numbers | NumberFlow |
| Animated text | torph |
| 3D globes | Cobe |
| Dynamic OG images | Satori |
| Syntax highlighting | shiki |
| Real-time, streaming charts | Liveline |
| General charts | recharts |
| Drag and drop | dnd kit |
| Virtualized long lists and tables | Virtuoso |
| State management | zustand |
Conditional className strings |
clsx |
| Variant-driven Tailwind styling | cva |
| Theme switching without a flash | next-themes |
A few splits are spelled out. Use motion for springs, layout animations, exit animations or gesture-driven values; a simple hover or fade only needs CSS transitions. Use Liveline when data arrives live and the chart scrolls with time, recharts for everything else. Use clsx for ad-hoc conditional classes and cva when a component has real variants that deserve a typed API.
It ends with common mismatches to catch: hand-built toasts, <div> dropdowns with manual focus handling, numbers animated by re-rendering text, 1,000+ row lists rendered directly, prop-drilled shared state, and className ternaries three conditions deep.
How do you install it?
The skills.sh page gives this command for the skills CLI:
npx skills add https://github.com/emilkowalski/skills --skill pick-ui-library
The repo README's command adds the whole collection, and the CLI lets you pick which of the 15 skills to keep:
npx skills@latest add emilkowalski/skills
Add -g to make it available across projects. For Claude Code, the folder lands in .claude/skills/pick-ui-library/ or ~/.claude/skills/pick-ui-library/, the standard Claude Code skill locations. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills. How each tool treats disable-model-invocation is up to that tool, so check its docs if the skill loads when you didn't call it.
On claude.ai, zip the folder and upload it under Customize > Skills, as the Claude help article on skills describes. Code execution must be turned on.
How do you use it?
Call it with a task, not a library name. Example prompts (suggestions, not quotes from the repo):
/pick-ui-library I need toasts for save and error messages./pick-ui-library We render a 5,000 row table and scrolling is slow./pick-ui-library Add a verification code input to the sign-up flow and wire it up./pick-ui-library What should I use for a live price chart that updates every second?/pick-ui-library Our className logic has nested ternaries everywhere. What should replace it?
Expect one recommendation with a short reason. If you ask it to wire the library up, the agent installs and integrates it, so review the diff and the new dependency as you would any other change.
Tips and limits
- One person's stack. These are "deliberate, taste-driven picks," as the SKILL.md puts it. Teams with an existing design system or approved dependency list should add that to their project instructions, or edit the list in their copy.
- Mostly React. Several picks are React or Next.js libraries: cmdk is a "Fast, unstyled command menu React component", Sonner is "An opinionated toast component for React," and next-themes targets Next.js. On other frameworks, check each library's docs for support.
- It may install packages. Step 3 allows the agent to install and wire up the pick when that is part of your request. Keep it to a recommendation by asking only "what should I use."
- Lists age. Library health changes. Check each project's activity and license before adopting it.
- Light footprint. One Markdown file, no scripts, no API keys.
- Security audit. As of 24 October 2026, skills.sh showed Pass from Gen Agent Trust Hub, Socket and Snyk.
The repo's MIT License (copyright 2026 Emil Kowalski) lets you copy and change the skill as long as you keep the notice.
Save it in your Kipt library
Because the skill is a single editable list, it is a good one to keep your own copy of. In Kipt, open Skills and paste the skill's GitHub folder link into the import box; paste the repo link instead and Kipt shows a list of all 15 skills to pick from. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:
npx skills add https://github.com/<you>/<repo>.git --all -g
Kipt is not affiliated with Emil Kowalski or emilkowalski/skills.
Similar skills
- Emil Kowalski skill (emil-design-eng): the main skill in the repo, with the Sonner component principles.
- shadcn skill: working with shadcn/ui components in your project.
- Frontend design skill: Anthropic's skill for steering agents away from generic UI.
- Find animation opportunities skill: where motion helps, with values for motion and CSS.
- Animation vocabulary skill: the right words for the effect you want.