pick-ui-library

Recommends curated frontend libraries for UI tasks like charts, toasts, drag and drop, and state management.

Updated Jul 3, 2026
One-click install
npx skills add https://github.com/alex-jordan547/agent-setup --skill pick-ui-library-alex-jordan547
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pick-ui-library
Source: https://github.com/alex-jordan547/agent-setup/tree/main/archive/2026-09-10/pick-ui-library
Command: npx skills add https://github.com/alex-jordan547/agent-setup --skill pick-ui-library-alex-jordan547

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a frontend library for a common task often means sifting through dozens of similar options with unclear tradeoffs. This Skill provides an opinionated, curated lookup table that maps UI tasks directly to a single recommended library, eliminating decision fatigue and inconsistent picks across a project. ## Core Features & Use Cases - Task-to-library lookup: Covers UI primitives (base-ui, cmdk, Sonner, input-otp), motion (motion, NumberFlow, Cobe, shiki), charts (Liveline, recharts), interaction (dnd kit, Virtuoso), and state/styling (zustand, 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 without focus handling, and unvirtualized thousand-row lists. - Use Case: You ask "what should I use for drag and drop?" and get a single recommendation (dnd kit) with a one-sentence rationale, ready to install and wire up. ## Quick Start Ask the agent which library to use for a specific frontend task, such as "I need toasts in my React app" or "what should I use for a command palette?"

Frequently Asked Questions about pick-ui-library

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

FAQPage Schema
What library should I use for drag and drop in React?

Use dnd kit for drag and drop in React. It is the curated pick for this task, covering sortable lists, droppable zones, and complex drag interactions without needing to compare alternatives.

What is the best library for toasts and notifications in React?

Use Sonner for toasts and notifications. Building toasts by hand or adapting a modal library is a common mismatch this list explicitly flags, since Sonner exists for exactly this purpose.

recharts vs Liveline for charts, which should I pick?

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.

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. They compose, since cva accepts clsx-style inputs internally.

How do I handle rendering very long lists in React?

Use Virtuoso for virtualization when rendering long lists or large tables, such as 1,000 or more rows. It is recommended before reaching for pagination hacks or rendering all rows directly.

What if my task is not covered by the curated library 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.