skills.rest
emilkowalski
emilkowalskiCOMMUNITY
Explore all skills by this author →
Website𝕏@emilkowalskiGitHub

pick-ui-library

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

34.1k|1.9k|Updated Mar 16, 2026
Search Tags:#Tailwind#Frontend#library selection#NPM#Animation#reAct#UI Components
One-click install
npx skills add https://github.com/emilkowalski/skills --skill pick-ui-library
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pick-ui-library
Source: https://github.com/emilkowalski/skills/tree/main/skills/pick-ui-library
Command: npx skills add https://github.com/emilkowalski/skills --skill pick-ui-library

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Choosing the right frontend library is hard when dozens of options exist for every task, and agents often pick poor defaults. This Skill maps common UI tasks to a curated, opinionated list of proven libraries so you get a taste-driven recommendation instead of a generic search result.

Core Features & Use Cases

  • Task-to-library matching: Describe a task ("I need toasts", "drag and drop for a kanban board") and get one deliberate recommendation, such as Sonner for toasts or dnd kit for drag and drop.
  • Coverage across the frontend stack: UI primitives (base-ui, cmdk), motion (motion, NumberFlow), charts (Liveline, recharts), virtualization (Virtuoso), state (zustand), and styling (clsx, cva, next-themes).
  • Mismatch detection: Flags common mistakes like hand-rolled dialogs instead of base-ui, re-rendering numbers instead of NumberFlow, or rendering 1,000+ rows without Virtuoso.
  • Use Case: You ask "what should I use for a command palette?" and the Skill recommends cmdk, checks your package.json for existing dependencies, and wires it up.

Quick Start

Ask the agent which library to use for a specific frontend task, such as "what should I use for animated number counters 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 recommendation for sortable lists, kanban boards, and draggable interfaces, and it handles accessibility and touch input.

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 is the best library for toast notifications in React?▼

Sonner is the recommended library for toasts and notifications. It exists specifically for this task, so building toasts by hand or with a modal library is a common mismatch to avoid.

Should I use clsx or cva for conditional Tailwind classes?▼

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.

When should I use Virtuoso for list virtualization?▼

Use Virtuoso when rendering long lists or large tables, typically around 1,000 rows or more. Virtualizing before reaching for pagination hacks keeps scrolling performant without changing the UI structure.

Does this skill install the recommended library automatically?▼

It recommends one library and can install and wire it up if that is part of the request. It first checks package.json for existing dependencies and flags competitors without churning them 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
ItsJupiter000ItsJupiter000

mockup-graduate

Convert approved mockup sandbox components into production app code with routing and state management.

Community
Advanced
tillysosotillysoso

ui-animation

Guide creation, review, and debugging of UI animations with CSS, Framer Motion, or WAAPI.

Community
Advanced
memorysavermemorysaver

shadcn

Manage shadcn/ui components with npx, pnpm, and bun.

Community
Advanced