21st-dev-builder-v2 — Claude Code skill: build sites from 21st.dev components

What 21st-dev-builder-v2 does

The skill fires when a request names 21st.dev or asks for a component from that registry. The agent then checks whether the project is ready — package.json, tailwind.config.*, components.json — splits the job into sections and hunts for components in the matching categories. A landing page pulls from hero, features, pricing, testimonials, cta, footers, navbars; a dashboard from sidebar, cards, tables, tabs; auth screens from sign-ins, sign-ups, forms.

Discovery runs against live pages. The agent opens a category at https://21st.dev/s/{slug}, digs into a component at https://21st.dev/r/{author}/{component}, and falls back to site:21st.dev searches when browsing is not enough. Components land in the project with npx shadcn@latest add "https://21st.dev/r/{author}/{component}" as full source you own and can edit. When the 21st_magic_component_builder tool is present it becomes the main generation path; otherwise web search plus the npx install covers the same ground.

The stack is fixed: React 18+ or Next.js with the App Router, Tailwind CSS 4+, Radix UI primitives, TypeScript. On Vue, Svelte or React Native the skill has nothing to offer. Candidates are judged on functional fit, the live preview, how well they sit next to already chosen blocks, and dark mode support. For visual consistency the author suggests taking related blocks from a single author.