pick-ui-library

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing a frontend library often means sifting through dozens of overlapping options and inconsistent recommendations. This Skill maps a described task to a single curated, opinionated library pick so you stop comparing and start building. ## Core Features & Use Cases - Task-to-library matching: Describe the task (toasts, drag and drop, virtualization, OTP inputs, command menus) and get one deliberate recommendation from a curated list covering base-ui, cmdk, Sonner, dnd kit, Virtuoso, zustand, motion, and more. - Existing-dependency awareness: Checks package.json first so recommendations respect what the project already uses instead of churning dependencies. - Mismatch detection: Flags common anti-patterns like hand-built toasts, div-based dropdowns with manual focus handling, or rendering thousand-row lists without virtualization. - Use Case: You ask "what should I use for a ⌘K command palette?" and get cmdk with a one-sentence rationale, plus wiring guidance if requested. ## Quick Start Ask the agent 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
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 that task, covering sortable lists, droppable zones, and draggable elements without the weight of older alternatives.

What is the best toast notification library for React?

Sonner is the recommended library for toasts and notifications in React. It exists specifically for this use case, so building toasts by hand or adapting a modal library is unnecessary.

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.

Does this skill replace libraries already in my package.json?

No. It checks package.json first and uses a listed library if the project already has one. If the project uses a competitor, it flags the recommendation but does not swap the dependency unless asked.

When should I use clsx versus cva for 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. They compose, since cva accepts clsx-style inputs internally.

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

The skill says so explicitly and then recommends from general knowledge, making clear that the suggestion falls outside the curated list rather than presenting it as an endorsed pick.