pick-ui-library

Recommends curated frontend libraries for specific UI tasks from an opinionated list.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing the right frontend library for a task like toasts, drag and drop, or charts often leads to decision paralysis or picking an unsuitable tool. This Skill provides a curated, opinionated lookup table that maps common frontend tasks to a single deliberate library recommendation. ## Core Features & Use Cases - Task-to-Library Lookup: Matches tasks like command menus, OTP inputs, virtualization, animation, and state management to curated picks such as cmdk, input-otp, Virtuoso, motion, and zustand. - Existing Dependency Awareness: Checks package.json first and respects libraries already installed, flagging recommendations without churning dependencies. - Mismatch Detection: Catches common anti-patterns like hand-built toasts, div-based dropdowns with manual focus handling, or rendering 1,000+ row lists without virtualization. - Use Case: When you ask "what should I use for drag and drop?", the Skill recommends dnd kit, explains what it is for in one sentence, and wires it up if requested. ## Quick Start Ask the AI 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 applications. It is the curated pick for this task, covering sortable lists, droppable zones, and draggable elements with accessible interaction patterns.

How do I choose between clsx and cva 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 together since cva accepts clsx-style inputs internally.

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, since Sonner exists for exactly this purpose.

When should I use Virtuoso instead of pagination?▼

Use Virtuoso when rendering long lists or large tables with 1,000 or more rows. It virtualizes the list so only visible rows render, avoiding the performance problems of rendering everything directly or reaching for pagination hacks.

Does this skill work if my project already uses a different library?▼

Yes, it checks package.json first and uses any listed library already installed. If the project uses a competitor like react-window instead of Virtuoso, it flags the recommendation but does not change the dependency unless asked.

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

The skill explicitly says the task is not covered and then recommends from general knowledge. It clearly states when it has left the curated list so you know the recommendation is not one of the deliberate picks.