pick-ui-library

Recommends curated React libraries for frontend tasks like charts, toasts, and drag and drop.

Updated Mar 14, 2026
One-click install
npx skills add https://github.com/beelabstudio/ai --skill pick-ui-library-beelabstudio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pick-ui-library
Source: https://github.com/beelabstudio/ai/tree/main/skills/enabling/pick-ui-library
Command: npx skills add https://github.com/beelabstudio/ai --skill pick-ui-library-beelabstudio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a frontend library often means sifting through dozens of overlapping options with no clear winner. This Skill maps a UI task directly to one opinionated, curated pick from Emil Kowalski's list, removing decision fatigue and preventing mismatched choices like hand-rolled toasts or unvirtualized thousand-row lists. ## Core Features & Use Cases - Task-to-library lookup: Matches tasks across UI primitives, motion, charts, interaction, state, and styling to a single recommended library (e.g., Sonner for toasts, dnd kit for drag and drop, Virtuoso for virtualization). - Existing-dependency awareness: Checks package.json first and respects libraries already installed, flagging competitors without churning dependencies unprompted. - Mismatch detection: Catches common anti-patterns such as manual focus handling in dropdowns, re-rendered number animations, and template-literal className ternaries, then points to the right library. - Use Case: You ask "what should I use for a ⌘K command palette?" and get cmdk as the single recommendation, ready to install and wire up. ## Quick Start Ask the skill which library to use for a specific frontend task, such as "I need toasts in my React app."

Frequently Asked Questions about pick-ui-library

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What React library should I use for toast notifications?▼

Use Sonner for toasts and notifications. It is the curated pick for this task, so building toasts by hand or repurposing a modal library is considered a mismatch this skill flags.

How do I choose a library for drag and drop in React?▼

Use dnd kit for drag and drop interactions. Describe the task rather than a library name, and the skill matches it to dnd kit as the single recommendation.

Recharts vs Liveline for charts, which should I pick?▼

Use Liveline when data points arrive live and the chart scrolls with time. Use recharts for everything else, including static or interactive dashboard charts.

What library handles virtualization for long lists in React?▼

Use Virtuoso for virtualizing long lists and large tables, such as rendering 1,000 or more rows. If the project already uses a competitor like react-window, the recommendation is flagged without changing the dependency unless asked.

When should I use clsx versus cva for Tailwind styling?▼

Use clsx for ad-hoc conditional className strings. Use cva when a component has real variants like size, intent, or state that deserve a typed API; the two compose since cva accepts clsx-style inputs.

What happens if my task is not covered by the curated list?▼

The skill explicitly says the task is not covered and then recommends from general knowledge, making clear it has left the curated list rather than silently substituting an unlisted library.