21st-dev-builder-v2 — скилл для Claude Code

Что делает 21st-dev-builder-v2

Скилл включается, когда в запросе упоминают 21st.dev или просят компонент оттуда. Дальше агент работает по фазам: проверяет, готов ли проект (package.json, tailwind.config.*, components.json), разбивает задачу на секции и ищет под них компоненты в категориях реестра. Для лендинга это hero, features, pricing, testimonials, cta, footers, navbars, для дашборда — sidebar, cards, tables, tabs, для страниц входа — sign-ins, sign-ups, forms.

Поиск идёт по живым страницам: агент открывает https://21st.dev/s/{slug} по категории, углубляется в карточку https://21st.dev/r/{author}/{component}, а при необходимости ищет через site:21st.dev. Компоненты ставятся командой npx shadcn@latest add "https://21st.dev/r/{author}/{component}" — исходники попадают в проект целиком, их можно править. Если доступен инструмент 21st_magic_component_builder, он становится основным способом генерации, иначе хватает веб-поиска и установки через npx.

Стек жёстко задан: React 18+ или Next.js с App Router, Tailwind CSS 4+, примитивы Radix UI, TypeScript. На Vue, Svelte или React Native скилл не сработает — он и не задуман под них. Отбор кандидатов идёт по функциональности, качеству превью, совместимости с уже выбранными компонентами и поддержке тёмной темы; ради единообразия автор советует брать связанные блоки у одного автора.