pick-ui-library

Recommends frontend libraries for UI tasks from a curated opinionated list.

Updated Jul 14, 2026
One-click install
npx skills add https://github.com/quanthubbr/tron-claude-config --skill pick-ui-library-quanthubbr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pick-ui-library
Source: https://github.com/quanthubbr/tron-claude-config/tree/main/managed/skills/emilkowalski/pick-ui-library
Command: npx skills add https://github.com/quanthubbr/tron-claude-config --skill pick-ui-library-quanthubbr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing the right frontend library for a task like toasts, drag and drop, charts, or virtualization often means sifting through dozens of competing options. This Skill removes that decision fatigue by mapping your task directly to a curated, taste-driven list of proven libraries. ## Core Features & Use Cases - Task-to-Library Matching: Describe the task ("I need toasts", "what should I use for drag and drop?") and get one clear recommendation from the curated list covering UI primitives, motion, charts, state, and styling. - Existing Dependency Awareness: Checks your package.json first, so it works with libraries already installed and flags conflicts without churning dependencies uninvited. - Mismatch Detection: Catches common anti-patterns like hand-built toasts, div-based dropdowns with manual focus handling, or rendering 1,000+ row lists without virtualization. - Use Case: You are building a dashboard and need animated counters, a command palette, and dark mode. Invoke the skill and get pointed to NumberFlow, cmdk, and next-themes with one-sentence rationales. ## Quick Start Ask the skill 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 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 the weight of older alternatives.

What is the best React library for toast notifications?▼

Sonner is the recommended library for toasts and notifications. It exists specifically for this use case, so building toasts by hand or adapting a modal library is an unnecessary mismatch.

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.

How do I handle virtualization for long lists in React?▼

Use Virtuoso for virtualizing long lists and large tables. If a project already uses a competitor like react-window, the recommendation is flagged but the dependency is not swapped unless requested.

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.

What are the limitations of a curated library recommendation list?▼

The list is deliberately opinionated and does not cover every task. When a task falls outside it, the skill says so explicitly and recommends from general knowledge, clearly noting it has left the curated list.