skills.rest
j172
j172COMMUNITY
Explore all skills by this author →
Website𝕏@j172GitHub

pick-ui-library

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

Updated Jul 30, 2026
Search Tags:#web development#frontend#react#npm#tailwind#ui components#library recommendation
One-click install
npx skills add https://github.com/j172/bid --skill pick-ui-library-j172
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pick-ui-library
Source: https://github.com/j172/bid/tree/main/agent/skills/pick-ui-library
Command: npx skills add https://github.com/j172/bid --skill pick-ui-library-j172

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 described UI task directly to one opinionated, curated library pick, removing decision fatigue and preventing mismatched choices like hand-rolled toasts or unvirtualized thousand-row lists. ## Core Features & Use Cases - Task-to-library matching: 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 such as div-based dropdowns with manual focus handling or template-literal className ternaries, and points to the right tool. - Use Case: You ask "what should I use for a ⌘K command palette?" and get a single recommendation — cmdk — wired into your project, instead of a comparison table of five options. ## Quick Start Ask the agent which library to use for a specific frontend task, such as "I need 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. It is the curated pick for sortable lists, draggable cards, and drop targets, and it handles accessibility and keyboard interaction out of the box.

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 dashboard 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 unnecessary mismatch.

clsx vs cva — when should I use each 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.

When should I use Virtuoso instead of rendering a full list?▼

Use Virtuoso when rendering long lists or large tables, roughly a thousand rows or more. Virtualizing before reaching for pagination hacks avoids rendering thousands of DOM nodes at once.

Does this skill replace libraries already in my package.json?▼

No. It checks package.json first and uses a listed library if already installed. If the project uses a competitor, it flags the recommendation but does not swap dependencies unless asked.

Related Skills

Explore More Software Engineering Skills→
tambo-aitambo-ai
11.2k

add-to-existing-project

Detect an existing React project's tech stack and automate Tambo integration and provider wiring.

Official
Intermediate
h102-logh102-log

moai-domain-frontend

Implements React 19, Next.js 16, and Vue 3.5 component patterns for web UI development.

Community
Advanced
mrestrepoj10mrestrepoj10

pick-ui-library

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

Community
Basic
AbsolutSystemsAbsolutSystems
1

tech-lead-advisor

Evaluates architectural proposals for scalability, maintainability, security, and delivery fit with explicit tradeoffs.

Official
Advanced