shadcn-vue — скилл для агентов
shadcn-vue skill
Скилл shadcn-vue читает настройки вашего проекта и учит агента добавлять компоненты, формы и темы Vue-порта shadcn/ui по правилам библиотеки
- 10 720 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скилл разрешает агенту запускать в оболочке `npx shadcn-vue@latest`, то есть выполнять код пакета из npm
- Команда `add` записывает исходники компонентов в проект и ставит зависимости, а `--overwrite` перезаписывает файлы
- Компоненты из сторонних реестров приносят чужой код, который скилл просит прочитать после добавления
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/shadcn-vue-skillОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скилл разрешает агенту запускать в оболочке `npx shadcn-vue@latest`, то есть выполнять код пакета из npm
- Команда `add` записывает исходники компонентов в проект и ставит зависимости, а `--overwrite` перезаписывает файлы
- Компоненты из сторонних реестров приносят чужой код, который скилл просит прочитать после добавления
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл `shadcn-vue` из репозитория unovue/shadcn-vue дает агенту знания о Vue-порте shadcn/ui и включается, когда в проекте есть `components.json`. На каждом обращении он запускает `npx shadcn-vue@latest info --json` и подставляет в контекст данные проекта: фреймворк, версию Tailwind, алиасы импортов, базовую библиотеку `reka`, набор иконок, список установленных компонентов и пути файлов. По этим данным агент подбирает правильные импорты и правит файл стилей, указанный в `tailwindCssFile`. Работа идет по порядку: сначала проверить, какие компоненты уже стоят, затем найти нужный командой `search`, получить адреса документации и примеров командой `docs` и только потом добавить код через `add`. Обновление установленного компонента проходит через `add --dry-run` и `--diff` по каждому файлу, чтобы сохранить ваши правки, а `--overwrite` без вашего согласия запрещен. Если вы не назвали реестр, агент спрашивает, откуда брать блок. При смене пресета (`nova`, `vega`, `maia`, `lyra`, `mira`, `luma` или код) он предлагает на выбор перезаписать, объединить или пропустить компоненты. Правила в четырех файлах папки `rules/` закрывают типичные ошибки: отступы через `gap-*` вместо `space-y-*`, формы на `FieldGroup` и `Field`, `ToggleGroup` для наборов из 2–7 вариантов, обязательные `DialogTitle` и `AvatarFallback`, иконки через `data-icon` без размеров, уведомления через `vue-sonner` и цвета только из семантических токенов.
Для кого. Для фронтенд-разработчиков на Vue, Nuxt и Vite, которые строят интерфейс на shadcn-vue и хотят, чтобы агент добавлял компоненты по правилам библиотеки.
Подходит, если
- Проект на Vue, Nuxt, Vite или Astro уже содержит `components.json`, и агент должен собирать экраны из компонентов shadcn-vue
- Нужно собрать форму входа или настроек из `FieldGroup`, `Field` и `InputGroup` с правильной разметкой ошибок
- Нужно сменить пресет оформления на код вроде `a2r6bw` и сохранить правки в установленных компонентах
- Компоненты ставятся из сторонних реестров, и после добавления надо проверить импорты и недостающие подкомпоненты
- Нужно подтянуть новую версию компонента и не потерять локальные изменения
Не подходит, если
- В проекте нет `components.json`: скилл включается только вместе с этим файлом
- Проект на React: для оригинальной библиотеки в каталоге есть отдельный скилл shadcn/ui
- Вы используете другую библиотеку компонентов для Vue: скилл знает API shadcn-vue на базе `reka`
- Нужен только поиск по реестрам: CLI сам запускает MCP-сервер командой `shadcn-vue mcp`, и скилл для этого не требуется
Пример запроса к агенту
Добавь на страницу настроек форму профиля с полями имени и почты на компонентах shadcn-vue и проверь импортыОграничения
- Скилл помечен как вызываемый только автоматически. Он разрешает агенту выполнять в оболочке команды `npx shadcn-vue@latest`, `pnpm dlx shadcn-vue@latest` и `bunx --bun shadcn-vue@latest`.
- На каждом обращении запускается `npx shadcn-vue@latest info --json`, и пакет берется в версии `latest`.
- Базовая библиотека в скилле одна, `reka`. Шаблонов четыре: `nuxt`, `vite`, `astro` и `laravel`.
- Реестр скилл не угадывает: если вы не назвали его, например `@shadcn`, агент спросит. В файлах из сторонних реестров попадаются импорты вроде `@/components/ui/...`, и их нужно сверить с вашими алиасами.
- Команда `apply` работает только в существующем проекте с `components.json`. Лицензия MIT.
Как отключить. Удалите папку `shadcn-vue` из каталога скиллов агента, куда ее положила команда `npx skills add`. Установленные компоненты и файл `components.json` остаются в проекте и работают без скилла.
Частые вопросы
Как поставить скилл shadcn-vue?
Выполните `npx skills add unovue/shadcn-vue`. После этого агент подхватывает скилл сам при работе с компонентами shadcn-vue, отдельной команды вызова нет.
Когда скилл включается?
Когда он находит в проекте файл `components.json`. Тогда он получает от `shadcn-vue info --json` настройки проекта и добавляет их в контекст агента перед каждым ответом.
Какие пресеты и шаблоны поддерживаются?
Названные пресеты: `nova`, `vega`, `maia`, `lyra`, `mira` и `luma`. Код пресета вида `a2r6bw` берется с сайта shadcn-vue.com. Шаблоны проекта: `nuxt`, `vite`, `astro` и `laravel`. Новый проект создает `init --name my-app --preset nova`.
Как обновить компонент и не потерять правки?
Выполните `add <компонент> --dry-run`, чтобы увидеть затронутые файлы, и `add <компонент> --diff <файл>` по каждому. Если локальных правок нет, файл можно перезаписать, а если есть, агент читает его и вносит изменения апстрима вручную. Скачивать файлы с GitHub напрямую скилл запрещает.
Как скилл требует писать формы?
Макет формы строится на `FieldGroup` и `Field`; `div` с `space-y-*` для этого не годится. Ошибка отмечается атрибутом `data-invalid` на `Field` и `aria-invalid` на поле ввода. Кнопка внутри поля идет через `InputGroup` и `InputGroupAddon`, а связанные флажки группируются в `FieldSet` с `FieldLegend`.
Есть ли у проекта MCP-сервер?
Да, команда `shadcn-vue mcp` запускает его по stdio, а `shadcn-vue mcp init` записывает настройки для Claude Code, Cursor, VS Code и OpenCode. Для Codex настройки в `~/.codex/config.toml` вносят вручную. Сервер ищет, показывает и ставит компоненты из реестров, а настройки проекта по-прежнему читает `info`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
Скиллыshadcn-svelte — скилл для агентов
shadcn-svelte
Скилл по shadcn-svelte: агент читает components.json, ставит компоненты через CLI и собирает формы, диалоги и карточки по правилам библиотеки
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
Набор скиллов для разработки на Vue 3: практики Composition API, роутер, Pinia, тесты, JSX, Options API и разбор ошибок
Скилл подбирает и ставит анимированные React-компоненты beUI через публичный MCP или реестр shadcn вместо самодельных виджетов
Скилл и MCP-сервер библиотеки Shaders: агент собирает фоны, стекло, градиенты и курсорные эффекты на WebGPU для React, Vue, Svelte, Solid и JS
Скиллы Энтони Фу
Anthony Fu's Skills
Набор скиллов для стека Vue, Vite и Nuxt: личные соглашения автора и выжимки из официальной документации инструментов
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| shadcn-vue — скилл для агентов (эта запись) | да | 10 720 | ||
| shadcn/ui | нет | 126 314 | скилл и MCP-сервер оригинальной библиотеки shadcn/ui, а shadcn-vue является ее портом на Vue | |
| Shadcn UI MCP Server | нет | ключ необязателен | 3 069 | MCP-сервер сообщества: отдает агенту исходники, демо и блоки компонентов shadcn/ui для React, Svelte, Vue и React Native |
Коротко о README
В репозитории лежат сайт с документацией в `apps/v4` (страницы о скиллах и MCP, файл `llms.txt`), исходники CLI в `packages/cli` вместе с командой `mcp`, старый сайт в `deprecated/www` и реестры компонентов в формате JSON. Скилл расположен в `skills/shadcn-vue`: основной `SKILL.md`, справочники `cli.md`, `customization.md`, `mcp.md` и папка `rules/` с правилами по стилям, формам, составу компонентов и иконкам. Главная страница коротко описывает проект как набор компонентов с открытым кодом и отправляет в документацию, раздел о спонсорах и руководство для участников.
Бейдж для README
Исходный SKILL.md
--- name: shadcn-vue description: Manages shadcn-vue components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn-vue, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn-vue init", "create an app with --preset", or "switch to --preset". user-invocable: false allowed-tools: Bash(npx shadcn-vue@latest *), Bash(pnpm dlx shadcn-vue@latest *), Bash(bunx --bun shadcn-vue@latest *) --- # shadcn-vue 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-vue@latest`, `pnpm dlx shadcn-vue@latest`, or `bunx --bun shadcn-vue@latest` — based on the project's `packageManager`. Examples below use `npx shadcn-vue@latest` but substitute the correct runner for the project. ## Current Project Context ```json !`npx shadcn-vue@latest info --json` ``` The JSON above contains the project config and installed components. Use `npx shadcn-vue@latest docs <component>` to get documentation and example URLs for any component. ## Principles 1. **Use existing components first.** Use `npx shadcn-vue@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. ### Styling & Tailwind → [styling.md](./rules/styling.md) - **`class` for layout, not styling.** Never override component colors or typography. - **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`. - **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`. - **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`. - **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`). - **Use `cn()` for conditional classes.** Don't write manual template literal ternaries. - **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking. ### Forms & Inputs → [forms.md](./rules/forms.md) - **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout.