pick-ui-library

Recommends curated frontend libraries for UI, animation, charts, state, and styling tasks.

Updated Aug 12, 2026
One-click install
npx skills add https://github.com/brunoolf/frontend-craft --skill pick-ui-library-brunoolf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pick-ui-library
Source: https://github.com/brunoolf/frontend-craft/tree/main/skills/pick-ui-library
Command: npx skills add https://github.com/brunoolf/frontend-craft --skill pick-ui-library-brunoolf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a frontend library often means sifting through dozens of overlapping options and ending up with inconsistent dependencies. This Skill maps a described task to a single opinionated, curated library pick so the project stays coherent. ## Core Features & Use Cases - Task-to-library matching: Covers UI primitives (base-ui, cmdk, Sonner, input-otp), motion (motion, NumberFlow, Cobe), 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 avoids churning installed libraries unless asked. - Mismatch detection: Flags common anti-patterns like hand-built toasts, div-based dialogs, re-rendered number animations, and unvirtualized thousand-row lists. - Use Case: You ask "what should I use for a command palette?" and get cmdk installed and wired up, instead of a comparison table of five options. ## Quick Start Ask 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
How do I choose the right React library for a frontend task?▼

Describe the task rather than naming a library, and the skill matches it to one curated pick from its list. For example, a dropdown request maps to base-ui, and a toast request maps to Sonner, with installation handled if requested.

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

Use dnd kit for drag and drop interactions. It is the curated pick in this list and covers sortable lists, draggable elements, and drop targets in React applications.

Liveline vs recharts for charts, which should I use?▼

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.

Does this replace libraries already installed in my project?▼

No. It checks package.json first and uses a listed library already present. If a competitor is installed, such as react-window instead of Virtuoso, it flags the recommendation but does not change the dependency unless asked.

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; cva composes with clsx-style inputs internally.

What happens if my task is not covered by the curated list?▼

The skill says so explicitly and then recommends from general knowledge, clearly stating that the suggestion comes from outside the curated list rather than presenting it as a vetted pick.