pick-ui-library

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

Updated Aug 29, 2026
One-click install
npx skills add https://github.com/Seyamalam/pstu_final --skill pick-ui-library-seyamalam
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pick-ui-library
Source: https://github.com/Seyamalam/pstu_final/tree/main/.agents/skills/pick-ui-library
Command: npx skills add https://github.com/Seyamalam/pstu_final --skill pick-ui-library-seyamalam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing the right frontend library for a task is time-consuming and often leads to inconsistent or poorly suited picks. This Skill maps common UI tasks to a curated, opinionated list of libraries so recommendations stay consistent across a project. ## Core Features & Use Cases - Task-to-library matching: Covers UI primitives, command menus, toasts, OTP inputs, animation, number transitions, charts, drag and drop, virtualization, state management, and Tailwind styling. - Existing-dependency awareness: Checks package.json first and avoids churning installed dependencies unless asked. - Mismatch detection: Flags common anti-patterns like hand-built toasts, div-based dialogs, or rendering thousand-row lists without virtualization. - Use Case: Ask "what should I use for drag and drop?" and get a single recommendation (dnd kit) with wiring guidance instead of a menu of options. ## Quick Start Ask the skill which library to use for a specific frontend task, such as "I need toasts in my React app" or "what should I use for a command palette?"

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 handles sortable lists, droppable zones, and keyboard accessibility, and is the curated pick for this task in the skill's list.

How do I choose a toast notification library for React?

Use Sonner for toast notifications in React. It is purpose-built for toasts, so avoid building them by hand or repurposing a modal library for transient notifications.

Recharts vs Liveline for charts, which should I pick?

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 library handles virtualization for long lists in React?

Use Virtuoso for virtualizing long lists and large tables in React. If a project already uses a competitor like react-window, keep it unless you explicitly want to migrate.

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.

Does this skill run automatically during frontend work?

No, it only runs when explicitly invoked because disable-model-invocation is set. You must ask for a library recommendation directly to trigger it.