ui-picks

What problem does it solve? Choosing the right UI library for a specific interface scenario is time-consuming, and copying components into a project often leaves broken imports, mismatched design tokens, and leftover mock data. This Skill provides a curated routing table of UI libraries and a disciplined porting workflow so components land in the project correctly wired. ## Core Features & Use Cases - Scenario-based routing table: Maps interface needs (decorative effects, card layouts, state transitions, micro-interactions, product controls, marketing/dashboard blocks, AI chat UIs, UI sound effects) to a specific recommended library. - Porting workflow: A four-step process covering source extraction, dependency reconciliation, design-token mapping, and quality checks against AI-template artifacts, performance, and reduced-motion. - WebGL/shader reference: A dedicated reference for Canvas UI and Paper Shaders effects, enabled only when the user explicitly requests shader-based visuals. - Use Case: When asked to add a particle background or an AI chat interface, the Skill identifies the scenario, picks the matching library (e.g., assistant-ui for chat runtime), and ports the components with dependencies reconciled against the existing package.json. ## Quick Start Ask the agent to add a specific UI element to your project, such as "add a thinking-state loader and an AI chat interface to my React app", and it will select and wire the appropriate libraries.