pick-ui-library

Overview

Pick UI Library is a Claude Code lookup skill that maps frontend tasks to the right library from a curated, opinionated list. Instead of presenting a menu of competing options, it gives a single recommendation per task category based on deliberate, taste-driven selections. The skill checks the project's existing package.json first: if a listed library is already installed it uses that, and if a competitor is present it flags the recommendation without forcing a migration.

The curated list spans UI primitives (base-ui for accessible unstyled components), command menus (cmdk), toasts (Sonner), OTP inputs (input-otp), animation (motion/Framer Motion for springs and layout, NumberFlow for animated numbers, torph for animated text), charts (Liveline for real-time streaming, recharts for everything else), drag-and-drop (dnd kit), virtualization (Virtuoso), state management (zustand), and styling utilities (clsx for conditional classes, cva for typed variant-driven styles, next-themes for dark mode).

Key Features

• One answer per task: Each frontend task maps to exactly one recommended library, eliminating decision fatigue and analysis paralysis
• Existing dependency awareness: Checks package.json before recommending, respecting what is already installed and flagging conflicts rather than churning dependencies
• Mismatch detection: Identifies common anti-patterns like hand-built toasts (should use Sonner), manual focus-trapped dialogs (should use base-ui), or re-rendered number text (should use NumberFlow)
• Clear category boundaries: Defines precise splits between overlapping tools, such as Liveline vs. recharts (streaming vs. static data) and clsx vs. cva (ad-hoc conditionals vs. typed variants)
• Task-first matching: Identifies the underlying task from the user's request rather than matching on library names, so "I need a dropdown" routes to base-ui even if the user asked about something else
• Explicit out-of-scope handling: When a task is not covered by the curated list, the skill says so clearly and recommends from general knowledge with a disclaimer

Who is this for?

• Frontend developers who want fast, opinionated library recommendations without researching and comparing multiple options for each task
• Teams adopting Claude Code who want consistent library choices across their codebase enforced by a shared skill
• Developers building React or Next.js applications who need production-ready solutions for common UI patterns like toasts, dialogs, drag-and-drop, and virtualized lists