pick-ui-library

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

Updated Sep 5, 2023
One-click install
npx skills add https://github.com/eyenalxai/dotfiles --skill pick-ui-library-eyenalxai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pick-ui-library
Source: https://github.com/eyenalxai/dotfiles/tree/main/.agents/skills/pick-ui-library
Command: npx skills add https://github.com/eyenalxai/dotfiles --skill pick-ui-library-eyenalxai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing the right frontend library for a task is time-consuming and error-prone, with countless overlapping options for toasts, charts, state management, and more. This Skill provides a curated, opinionated lookup table that maps common frontend tasks to a single vetted library recommendation. ## Core Features & Use Cases - Task-to-library matching: Maps tasks like command menus, OTP inputs, virtualization, animation, and state management to specific libraries such as cmdk, input-otp, Virtuoso, motion, and zustand. - Existing dependency awareness: Checks package.json first and respects libraries already installed, flagging competitors without churning dependencies. - Mismatch detection: Catches common anti-patterns like hand-built toasts, div-based dropdowns, and template-literal className ternaries, redirecting to the right tool. - Use Case: You ask "what should I use for drag and drop?" and get a single recommendation (dnd kit) with a one-sentence rationale, plus installation if requested. ## Quick Start Ask the skill which library to use for a specific frontend task, such as "what should I use for real-time charts?"

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 needing alternatives.

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. Building toasts by hand or with a modal library is a common mismatch that Sonner solves directly.

When should I use cva instead of clsx for Tailwind styling?

Use clsx for ad-hoc conditional className strings and 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.

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 a competitor is present, such as react-window instead of Virtuoso, it flags the recommendation but does not churn the dependency unless asked.

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

The skill explicitly says when a task falls outside the curated list and then recommends from general knowledge, clearly stating that the suggestion is no longer from the opinionated picks.