What problem does it solve? Building premium React/Tailwind UI requires knowing which design tool handles which job — component discovery, animation effects, motion assets, design tokens, and quality linting are scattered across separate MCP servers, and picking the wrong one wastes time or produces generic output. ## Core Features & Use Cases - Multi-MCP Routing: Directs each UI job to the right server — 21st.dev for discovery and AI generation, Magic UI for animated components, shadcn for registry installs, LottieFiles for motion assets, Open Design for tokens, MDVP for design linting, and Storybook for component QA. - Playwright Fallback Path: When the 21st.dev API key is missing, scrapes the client-rendered catalog with Playwright to extract real component code instead of the empty Next.js shell. - Use Case: You need an animated pricing section for a landing page. The skill routes discovery to 21st.dev, pulls a marquee effect from Magic UI, grounds tokens in Open Design, then lints the rendered result with MDVP for slop. ## Quick Start Ask the agent to build an animated dashboard component using the 21st-dev-design workflow and verify the result with the design linter.
