pick-ui-library

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

Updated Jul 15, 2026
One-click install
npx skills add https://github.com/Alex918-stack/papertrader --skill pick-ui-library-alex918-stack
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pick-ui-library
Source: https://github.com/Alex918-stack/papertrader/tree/main/agent/skills/pick-ui-library
Command: npx skills add https://github.com/Alex918-stack/papertrader --skill pick-ui-library-alex918-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing the right frontend library is time-consuming and inconsistent across projects. This Skill maps a described UI task to a curated, opinionated library list so you get one deliberate recommendation instead of evaluating dozens of options. ## Core Features & Use Cases - Task-to-library matching: Describe a task (toasts, command menus, OTP inputs, virtualization, drag and drop) and get a single curated recommendation such as Sonner, cmdk, input-otp, Virtuoso, or dnd kit. - Existing dependency awareness: Checks package.json first, reuses already-installed listed libraries, and flags competitors without churning dependencies. - Mismatch detection: Catches common mistakes like hand-built toasts, div-based dropdowns without focus handling, re-rendered number animations, and unvirtualized thousand-row lists. - Use Case: You ask "what should I use for a ⌘K command palette?" and receive cmdk with a one-sentence rationale, plus wiring guidance if requested. ## Quick Start Ask the agent 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 toast notifications?

Use Sonner for toasts and notifications. It is the curated pick for this task, and building toasts by hand or with a modal library is a common mismatch this recommendation corrects.

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 handles drag and drop in React?

dnd kit is the recommended library for drag and drop interactions in React. It covers sortable lists, droppable zones, and draggable elements without needing a custom implementation.

clsx vs cva for conditional Tailwind classes?

Use clsx for ad-hoc conditional className strings and 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.

When should I use Virtuoso for list virtualization?

Use Virtuoso when rendering long lists or large tables, typically around 1,000 rows or more. It virtualizes rendering so you avoid pagination hacks and the performance cost of mounting every row.

What happens if my project already uses a different library?

The recommendation checks package.json first. If a listed library is installed it is used directly; if a competitor like react-window is installed instead of Virtuoso, the recommendation is flagged but the dependency is not replaced unless requested.