pick-ui-library

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing the right frontend library is time-consuming and error-prone, with dozens of overlapping options for every task. This Skill provides an opinionated, curated lookup table that maps common frontend tasks directly to a single recommended library, eliminating decision fatigue. ## Core Features & Use Cases - Task-to-library mapping: Covers UI primitives (base-ui), command menus (cmdk), toasts (Sonner), OTP inputs (input-otp), animation (motion, NumberFlow), charts (Liveline, recharts), drag and drop (dnd kit), virtualization (Virtuoso), state (zustand), and styling (clsx, cva, next-themes). - Existing-dependency awareness: Checks package.json first and respects libraries already installed rather than churning dependencies. - Mismatch detection: Flags common anti-patterns like hand-built toasts, div-based dropdowns, and unvirtualized thousand-row lists, then points to the right library. - Use Case: You ask "what should I use for a ⌘K command palette?" and get a direct recommendation of cmdk with installation guidance. ## Quick Start Ask the assistant which library to use for a specific frontend task, such as "what should I use for drag and drop 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 drag and drop?▼

Use dnd kit for drag and drop in React applications. It is the curated recommendation for sortable lists, draggable elements, and drop targets, and it handles the interaction complexity without manual event wiring.

How do I choose between recharts and Liveline for charts?▼

Use Liveline when data points arrive live and the chart scrolls with time, such as streaming dashboards. Use recharts for everything else, including static or interactive general-purpose charts.

What library should I use for toast notifications in React?▼

Use Sonner for toasts and notifications. It exists specifically for this purpose, so building toasts by hand or adapting a modal library is an anti-pattern the recommendation steers you away from.

When should I use clsx versus cva for 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. They compose, since cva accepts clsx-style inputs internally.

Does this replace libraries already installed in my project?▼

No. The recommendation process checks package.json first and uses a listed library if already present. If a competitor is installed, such as react-window instead of Virtuoso, it flags the recommendation without churning the dependency unless asked.

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

The skill says so explicitly and then recommends from general knowledge, clearly stating it has left the curated list. It does not silently substitute unlisted alternatives for covered tasks.