shadcn/ui — скилл
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
- 126 880 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Агент запускает npx shadcn и записывает файлы компонентов в проект
- Код компонентов скачивается из внешних реестров
Установка
- Работает в
Ручная установка
npx skills add shadcn/uiСтавит скилл в агенты, которые поддерживают SKILL.md.
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Агент запускает npx shadcn и записывает файлы компонентов в проект
- Код компонентов скачивается из внешних реестров
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл подгружает в контекст агента конфигурацию проекта из components.json и список уже установленных компонентов. Дальше агент сначала ищет готовый компонент в реестрах командой shadcn search, берет документацию через shadcn docs и добавляет код в проект через CLI, а не пишет разметку с нуля. Набор правил запрещает типичные ошибки: ручные цвета вместо семантических токенов, space-y вместо gap, самодельные формы без Field. Отдельно в репозитории есть MCP-сервер shadcn, который дает агенту поиск и установку элементов из любых реестров, включая приватные.
Для кого. Для фронтенд-разработчиков на React и Tailwind, которые собирают интерфейс на shadcn/ui с помощью агента.
Подходит, если
- В проекте есть components.json и агент добавляет или правит компоненты
- Нужно собрать страницу из готовых блоков вместо ручной верстки
- Нужно подключить сторонний или корпоративный реестр компонентов
Не подходит, если
- Проект на другой библиотеке компонентов, например MUI или Ant Design
- Интерфейс не на React
Пример запроса к агенту
Собери страницу настроек профиля на shadcn: вкладки, карточки и форму с валидациейОграничения
Скилл вызывает npx shadcn@latest, поэтому нужен Node.js и доступ к npm и реестру ui.shadcn.com. Правила рассчитаны на актуальную версию shadcn/ui с Tailwind, в старых проектах часть советов может не совпасть с кодом.
Как отключить. Удалите папку shadcn из каталога скиллов агента. MCP-сервер уберите из конфигурации клиента, например из .mcp.json.
Частые вопросы
Чем скилл отличается от MCP-сервера?
Скилл учит агента правилам библиотеки и работе с CLI. MCP-сервер дает инструменты для поиска и установки элементов из реестров. Их можно ставить вместе.
Работает ли с приватными реестрами?
Да, MCP-сервер читает реестры из components.json, в документации описана настройка авторизации.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыShadcn UI MCP Server
Shadcn UI v4 MCP Server
MCP-сервер, который отдает агенту исходники, демо и блоки компонентов shadcn/ui для React, Svelte, Vue и React Native
shadcn-svelte — скилл для агентов
shadcn-svelte
Скилл по shadcn-svelte: агент читает components.json, ставит компоненты через CLI и собирает формы, диалоги и карточки по правилам библиотеки
shadcn-vue — скилл для агентов
shadcn-vue skill
Скилл shadcn-vue читает настройки вашего проекта и учит агента добавлять компоненты, формы и темы Vue-порта shadcn/ui по правилам библиотеки
MCP-сервер и скилл для интерфейсов: 31 дизайн-система для shadcn/ui, принципы UI и UX и проверка доступности для кода агента
Скилл подбирает и ставит анимированные React-компоненты beUI через публичный MCP или реестр shadcn вместо самодельных виджетов
MCP-сервер и плагин 21st.dev: поиск готовых React/Tailwind компонентов, логотипов и генерация интерфейса прямо из агента
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| shadcn/ui (эта запись) | нет | 126 880 | |
| shadcn-vue — скилл для агентов | да | 10 749 | скилл shadcn-vue читает настройки вашего проекта и учит агента |
| shadcn-svelte — скилл для агентов | да | 9 222 | скилл по shadcn-svelte |
| beUI | да | 1 896 | скилл подбирает и ставит анимированные React-компоненты beUI через |
Коротко о README
Корневой README короткий и отправляет в документацию на ui.shadcn.com. На странице Skills описана установка через npx skills add shadcn/ui и состав скилла: контекст проекта, команды CLI, темы, создание реестров и связь с MCP. На странице MCP есть команды mcp init для Claude Code, Cursor, VS Code, Codex и OpenCode и примеры конфигурации. Лицензия MIT.
Бейдж для README
Исходный SKILL.md
--- name: shadcn description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset". user-invocable: false allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *) --- # shadcn/ui A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI. > **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project. ## Current Project Context ```json !`npx shadcn@latest info --json` ``` The JSON above contains the project config and installed components. Use `npx shadcn@latest docs <component>` to get documentation and example URLs for any component. ## Principles 1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too. 2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table. 3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc. 4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`. ## Critical Rules These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs.