AutoGineer
Generated banner for Pick UI Library
Generated logo for Pick UI Library

Pick UI Library

Emil KowalskiCommunityCreated by Emil Kowalski

  • Skill
  • Tool integration
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

Pick the right library for a given frontend task from a curated, opinionated list — numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.
— the description by Emil Kowalski

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides expert recommendations for frontend development tasks by matching requirements against a specific, curated list of libraries. It focuses on common UI needs such as state management, animation, charts, and component primitives. The skill encourages checking existing project dependencies before suggesting new tools to maintain consistency, and it provides clear guidance on when to use specific libraries versus native CSS or other alternatives.

What it does

  • Matches frontend development tasks to a curated list of libraries.
  • Checks existing project dependencies to ensure consistency.
  • Provides specific recommendations for UI components, motion, charts, and state management.
  • Offers guidance on choosing between similar tools based on specific use cases.
  • Suggests alternatives outside the curated list when a task is not covered.

When to use it

  • When you need to select a library for a specific frontend task like toasts, drag and drop, or state management.
  • When you want to ensure your library choices align with a consistent, opinionated set of tools.
  • When you are unsure which library is best suited for a particular UI requirement.
  • When you need to decide between different approaches, such as using clsx versus cva for styling.

Advantages

  • Reduces decision fatigue by providing a clear, curated recommendation.
  • Promotes consistent library usage across a project.
  • Helps identify when existing tools are sufficient for a task.
  • Provides clear criteria for choosing between similar libraries.

Usage examples

“I need to add toasts to my application.”
The skill recommends using Sonner for notifications and toasts.
“What should I use for drag and drop?”
The skill recommends dnd kit for drag and drop functionality.
“How should I handle conditional class names?”
The skill suggests clsx for ad-hoc conditional classes or cva if the component requires a variant-driven API.
“I need to render a list with 5,000 items.”
The skill recommends using Virtuoso to handle the virtualization of the long list.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/emilkowalski/pick-ui-library/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip pick-ui-library.zip -d .agents/skills

Documentation by Emil Kowalski

Picking The Right Library

Initial Response

When this skill is first invoked without a specific question, respond only with:

I'm ready to pick the right library for your task, my picks come from Emil Kowalski's curated list.

Do not provide any other information until the user asks a question.

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

  1. 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.

  2. Check what's already installed. Look at package.json first. 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.

  3. 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.

  4. 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
TaskLibrary
Unstyled, accessible UI components (dialogs, popovers, menus, selects…)base-ui
Command menus (⌘K palettes)cmdk
Toasts / notificationsSonner
One-time password / verification code inputsinput-otp
Customizable GUIs / control panelsLeva — dialkit is an alternative
Motion & visuals
TaskLibrary
General-purpose animation (springs, layout animations, enter/exit)motion (Framer Motion)
Animating numbers (counters, prices, stats)NumberFlow
Animated text componentstorph
3D globesCobe
Dynamic OG images (HTML/CSS → SVG/PNG)Satori
Syntax highlightingshiki

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
TaskLibrary
Real-time / streaming chartsLiveline
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
TaskLibrary
Drag and dropdnd kit
Virtualization (long lists, large tables)Virtuoso
State & styling
TaskLibrary
State managementzustand
Constructing className strings conditionallyclsx
Type-safe, variant-driven styling for Tailwindcva
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).

Files

Requirements and compatibility

Written for: Claude Code

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Claude Code frontmatter

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Emil Kowalski
Publisher
Emil Kowalski (Community)
Source
emilkowalski/skills · skills/pick-ui-library · commit c8a7962
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Emil Kowalski or Emil Kowalski.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download pick-ui-library.zip