AIKraft/AI/Войти
AIKraft/Skills/shadcn

shadcn

Управляет компонентами shadcn/ui: добавляет, ищет, исправляет, отлаживает и стилизует UI, включая чат-интерфейсы. Полезно при работе с shadcn/ui, реестрами компонентов, пресетами (--preset) и проектами с components.json.

shadcn official Разработка ★ 125.1k

Что делает навык

Управляет компонентами shadcn/ui: добавляет, ищет, исправляет, отлаживает и стилизует UI, включая чат-интерфейсы. Работает с реестрами компонентов, пресетами (--preset) и проектами с components.json, обеспечивая соблюдение принципов композиции и семантической стилизации.

Когда применять

  • Добавление новых UI-компонентов из реестра shadcn/ui в существующий проект.
  • Исправление верстки форм и элементов ввода с использованием FieldGroup, Field и валидации через data-invalid.
  • Отладка и стилизация чат-интерфейсов с использованием MessageScroller, Bubble и Attachment.
  • Применение пресетов (preset) для настройки темы, шрифтов и переменных CSS.
  • Поиск и использование существующих компонентов вместо написания кастомной верстки.

Как работает

  1. Получить контекст проекта, запустив npx shadcn@latest info --json, чтобы узнать установленные компоненты, алиасы и настройки.
  2. Проверить наличие нужного компонента в проекте или найти его через npx shadcn@latest search.
  3. Получить документацию и примеры через npx shadcn@latest docs <component> и перейти по ссылкам.
  4. Установить или обновить компонент с помощью npx shadcn@latest add, предварительно проверив изменения через --diff.
  5. Применить пресеты, используя команды preset decode, preset url или apply, соблюдая правила переключения (overwrite, partial, merge).
  6. Проверить добавленные файлы на соответствие критическим правилам (composition, styling, forms) и исправить импорты иконок/алиасов.

Примеры запросов агенту

Добавь компонент Dialog из shadcn/ui и покажи документацию по его использованию.
Исправь верстку формы входа, используя FieldGroup и Field, заменив кастомные div на семантические компоненты.
Примени пресет nova к текущему проекту, предварительно проверив его настройки через preset decode.

Что понадобится

  • Node.js и пакетный менеджер проекта (npm, pnpm, bun) для выполнения CLI-команд.
  • Наличие файла components.json в проекте.
  • Доступ к интернету для загрузки компонентов из реестров.

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «shadcn-shadcn» из репозитория: # https://github.com/shadcn/ui
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r shadcn-shadcn/ ~/.claude/skills/shadcn-shadcn/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.