shadcn-svelte — скилл для агентов
shadcn-svelte
Скилл по shadcn-svelte: агент читает components.json, ставит компоненты через CLI и собирает формы, диалоги и карточки по правилам библиотеки
- 9 207 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Агент запускает `npx shadcn-svelte@latest`, и команда скачивает пакет из npm и пишет файлы компонентов в проект
- Команда `add` по адресу реестра может подтянуть код из стороннего источника, который нужно проверять
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/shadcn-svelteОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Агент запускает `npx shadcn-svelte@latest`, и команда скачивает пакет из npm и пишет файлы компонентов в проект
- Команда `add` по адресу реестра может подтянуть код из стороннего источника, который нужно проверять
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скилл лежит в папке skills/shadcn-svelte репозитория библиотеки shadcn-svelte, порта shadcn/ui для Svelte. При работе агент сначала читает файл `components.json` в корне проекта и узнает псевдонимы путей, файл глобальных стилей, стиль оформления, набор значков и реестр компонентов. Затем он смотрит каталог `ui`, чтобы не импортировать то, что еще не добавлено, и ставит недостающее командой `npx shadcn-svelte@latest add`. Если нужного компонента нет, агент открывает его страницу на shadcn-svelte.com в формате `.md` и следует описанному там API. Главная часть скилла — набор правил с парами «неверно» и «верно» в четырех файлах: стили, формы, состав компонентов и значки. Среди правил: формы собираются из `Field.FieldGroup` и `Field.Field`, отступы задаются через `gap-*`, а не `space-y-*`, цвета берутся из семантических токенов вроде `bg-primary`, у диалога и боковой панели всегда есть заголовок, значок в кнопке получает `data-icon` без классов размера. Файл cli.md описывает команды `init`, `add`, `apply`, `update` и `registry build` с флагами, а customization.md объясняет переменные CSS, цвета OKLCH, темную тему и радиусы. Для обновления есть порядок: сначала зафиксировать работу, потом `update`, потом разобрать конфликты, а флаг `--overwrite` без согласия пользователя не применять.
Для кого. Для разработчиков на SvelteKit, Vite или Astro, которые собирают интерфейс из компонентов shadcn-svelte вместе с агентом.
Подходит, если
- Нужно собрать форму входа или настроек, и агент должен использовать `Field`, а не произвольную разметку из блоков `div`
- Агент вставляет неподходящие импорты: скилл сверяет их с `components.json` и содержимым каталога `ui`
- Нужен дашборд из боковой панели, карточек и таблицы данных без самодельных блоков
- В проекте сменился набор значков, и агент не должен подставлять `@lucide/svelte` по привычке
- Компоненты нужно обновить из реестра и не потерять собственные правки
Не подходит, если
- В проекте нет `components.json`: скилл включается по нему, и без него смысла ставить его мало
- Интерфейс написан на React и использует исходную библиотеку shadcn/ui: для нее есть отдельная запись shadcn-ui
- Нужны документация и автоисправление компонентов самого Svelte: для этого есть запись svelte-mcp
- Проект не использует Tailwind: правила скилла опираются на его классы и семантические токены
Пример запроса к агенту
Добавь страницу настроек профиля с полями имени и почты и переключателем уведомлений, используй компоненты shadcn-svelte и покажи состояние ошибки у обязательных полейОграничения
- Скилл помечен как не вызываемый пользователем вручную: он подключается агентом сам, когда в проекте есть `components.json` или упоминается shadcn-svelte, и отдельной команды у него нет.
- В списке разрешенных действий скилла только вызовы `npx shadcn-svelte@latest`, `pnpm dlx shadcn-svelte@latest` и `bunx --bun shadcn-svelte@latest`. Любой другой запуск агент выполняет по общим правилам вашего окружения.
- Для расходящихся мест скилл отсылает к онлайн-документации shadcn-svelte.com, так что без сети агент опирается только на встроенные правила и каталог `ui`.
- Папка содержит файл `agents/openai.yml` с названием и значками для среды Codex, а в документации к скиллу как пример назван Claude Code. Об остальных агентах в источнике ничего нет.
- Компоненты из чужих реестров по адресу агент ставит только после подтверждения источника, а импорты в них приходится проверять на жестко заданные пути.
Как отключить. Удалите папку shadcn-svelte из каталога скиллов агента (например, из `.claude/skills` проекта или домашней папки). Компоненты и файл `components.json` в проекте останутся, их можно убрать вручную.
Частые вопросы
Что скилл читает в проекте?
Файл `components.json` и каталог, на который указывает `aliases.ui`. Из первого агент берет псевдонимы путей, файл стилей Tailwind, стиль оформления, набор значков и адрес реестра, из второго узнает, какие компоненты уже добавлены. Больше ничего скилл по умолчанию не запрашивает.
Как правильно собрать форму?
По скиллу форма состоит из `Field.FieldGroup` и вложенных `Field.Field` с подписями `Field.FieldLabel`. Ошибка помечается атрибутом `data-invalid` у поля и `aria-invalid` у самого элемента ввода, а для блокировки ставятся `data-disabled` и `disabled`. Выбор от двух до семи вариантов собирается через `ToggleGroup`, а не циклом по кнопкам.
Как передать готовый набор оформления при создании проекта?
На сайте shadcn-svelte.com есть конструктор, который выдает строку набора. Ее передают команде `npx shadcn-svelte@latest init --preset <код>`. Файл cli.md в скилле перечисляет и остальные флаги `init`, например `--base-color` и `--no-deps`.
Как обновить компоненты и не потерять правки?
Сначала сделайте коммит или отложите изменения. Затем выполните `npx shadcn-svelte@latest update` с именем компонента или флагом `--all`, посмотрите изменения через `git diff` и разберите конфликты. На команде `add` флаг `--overwrite` скилл разрешает только с явного согласия пользователя.
Что проверяют тестовые сценарии в папке evals?
В файле evals.json три сценария. Первый просит форму настроек с валидацией: ожидается `Field.FieldGroup`, `ToggleGroup`, пара `data-invalid` и `aria-invalid`, отступы `gap-*` и семантические цвета. Два других сценария проверяют те же правила на других задачах.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
Скиллыshadcn-vue — скилл для агентов
shadcn-vue skill
Скилл shadcn-vue читает настройки вашего проекта и учит агента добавлять компоненты, формы и темы Vue-порта shadcn/ui по правилам библиотеки
Официальный скилл и MCP-сервер shadcn/ui: агент ищет компоненты в реестрах, ставит их через CLI и держится правил библиотеки
Скилл подбирает и ставит анимированные React-компоненты beUI через публичный MCP или реестр shadcn вместо самодельных виджетов
Скилл и MCP-сервер библиотеки Shaders: агент собирает фоны, стекло, градиенты и курсорные эффекты на WebGPU для React, Vue, Svelte, Solid и JS
MCP-сервер и скилл для интерфейсов: 31 дизайн-система для shadcn/ui, принципы UI и UX и проверка доступности для кода агента
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| shadcn-svelte — скилл для агентов (эта запись) | да | 9 207 | ||
| Svelte MCP | да | не нужна | 334 | официальный MCP-сервер Svelte: документация и автоисправление компонентов самого Svelte 5, без набора компонентов shadcn |
| shadcn/ui | нет | 126 314 | официальный скилл и MCP-сервер исходной библиотеки shadcn/ui для React с поиском по реестрам |
Коротко о README
Главная страница репозитория коротко представляет проект как набор компонентов для Svelte по образцу shadcn/ui и отсылает к сайту с документацией. Подробности о скилле лежат на странице docs/content/skills.md сайта: там перечислено, что ассистент узнает из `components.json`, какие команды CLI описаны и как устроены тема и реестр, а установка идет командой `skills add huntabyte/shadcn-svelte`. В самой папке скилла есть файл SKILL.md, четыре файла правил, справочник по CLI, руководство по настройке оформления и три сценария проверки.
Бейдж для README
Исходный SKILL.md
--- name: shadcn-svelte description: Manages shadcn-svelte components and projects — adding, updating, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn-svelte, the CLI, design-system presets, or any project with a components.json file. Also triggers for "shadcn-svelte init", "add component", or registry URLs. user-invocable: false allowed-tools: Bash(npx shadcn-svelte@latest *), Bash(pnpm dlx shadcn-svelte@latest *), Bash(bunx --bun shadcn-svelte@latest *) --- # shadcn-svelte A framework for building UI, components, and design systems for Svelte. Components are added as source to the user's project via the CLI. > **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn-svelte@latest`, `pnpm dlx shadcn-svelte@latest`, or `bunx --bun shadcn-svelte@latest` — based on the project's package manager. Examples below use `npx shadcn-svelte@latest` but substitute the correct runner for the project. ## Current Project Context Read `components.json` at the project root and, when you need the live file layout, list the directory given by the `aliases.ui` path (resolved with the same rules as the CLI).