picking-ui-libraries

Recommends one curated frontend library for a given UI task from an opinionated list.

Updated Aug 3, 2026
One-click install
npx skills add https://github.com/m-de-graaff/skills --skill picking-ui-libraries-m-de-graaff
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: picking-ui-libraries
Source: https://github.com/m-de-graaff/skills/tree/main/skills/picking-ui-libraries
Command: npx skills add https://github.com/m-de-graaff/skills --skill picking-ui-libraries-m-de-graaff

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a frontend library for common UI tasks like toasts, drag and drop, charts, or state management often means sifting through dozens of competing options. This Skill provides a curated, opinionated lookup table that maps each task to a single recommended library, while checking the project's existing dependencies first to avoid redundant installs. ## Core Features & Use Cases - Task-to-library lookup: Covers components and primitives (base-ui, cmdk, Sonner), motion and visuals (Motion, NumberFlow, Shiki), charts (Recharts, Liveline), interaction (dnd kit, Virtuoso), and state/styling (Zustand, clsx, cva, next-themes). - Dependency awareness: Reads package.json before recommending, flagging when the project already uses a competitor instead of churning dependencies. - Mismatch detection: Catches common anti-patterns like hand-built toasts, manual dropdown focus handling, or rendering thousands of rows without virtualization. - Use Case: A developer asks which library to use for a command menu. The Skill checks package.json, confirms no existing solution, and recommends cmdk with a one-sentence rationale. ## Quick Start Ask which library to use for a specific frontend task such as drag and drop or toast notifications.

Frequently Asked Questions about picking-ui-libraries

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?▼

dnd kit is the recommended library for drag and drop in React projects. Before installing, check package.json to confirm the project does not already include a competing drag and drop solution.

What library should I use for toast notifications?▼

Sonner is the recommended library for toast notifications. Hand-built toasts or toasts embedded in a modal library are a mismatch worth replacing with Sonner.

Recharts vs Liveline for charts, which should I pick?▼

Use Liveline when data points arrive live and the chart scrolls with time, such as real-time streaming dashboards. Use Recharts for everything else, including general charts and dashboards.

When should I use Zustand for state management?▼

Zustand is not the first answer to shared state. Lift state first, and reach for a store only when distant branches of the component tree need frequently-changing state, or when useState and prop threading become a web.

clsx vs cva, what is the difference?▼

clsx handles ad-hoc conditional className strings, while cva is for components with real variants like size, intent, or state that deserve a typed API. They compose, since cva accepts clsx-style inputs.

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

The list is a snapshot of taste with a stated review date, and entries older than about a year should be verified for active maintenance before recommending. It does not evaluate libraries outside the list, benchmark them, or migrate between them.