SU
shadcn
Управляет компонентами shadcn/ui: добавляет, ищет, исправляет, стилизует и собирает UI, включая чат-интерфейсы. Актуально при работе с shadcn/ui, реестрами компонентов, пресетами (--preset), командами shadcn init или проектами с components.json.
Что делает навык
Управляет компонентами shadcn/ui: добавляет, ищет, исправляет, стилизует и собирает UI, включая чат-интерфейсы. Работает с реестрами компонентов, пресетами (--preset) и командами shadcn init или проектами с components.json.
Когда применять
- Добавление новых компонентов или блоков из реестров shadcn/ui с проверкой установленных зависимостей.
- Стилизация и верстка интерфейсов с соблюдением правил использования Tailwind CSS, семантических цветов и композиции компонентов.
- Исправление импортов и структуры кода в компонентах из сторонних реестров (например, @bundui, @magicui) под контекст проекта.
- Создание чат-интерфейсов с использованием специфичных примитивов (MessageScroller, Bubble, Attachment).
Как работает
- Получить контекст проекта через npx shadcn@latest info --json для анализа конфигурации и установленных компонентов.
- Проверить наличие нужных компонентов в проекте или найти их через npx shadcn@latest search перед написанием кастомного кода.
- Получить документацию и примеры через npx shadcn@latest docs <component> и перейти по ссылкам для верного использования API.
- Установить или обновить компоненты с помощью npx shadcn@latest add, предварительно проверив изменения через --diff.
- Применить пресеты через npx shadcn@latest apply или init --preset, предварительно согласовав стратегию (overwrite, merge) с пользователем.
- Проверить добавленные файлы на соответствие критическим правилам (composition.md, styling.md) и заменить иконки на библиотеку проекта (iconLibrary).
Примеры запросов агенту
Добавь компонент Dialog из реестра @shadcn и настрой его заголовок и контент.
Исправь стилизацию формы: замени space-y на gap, используй FieldGroup и семантические цвета.
Собери интерфейс чата с использованием MessageScroller и Bubble, добавь поддержку вложений через Attachment.
Что понадобится
- Установленный CLI shadcn/ui (npx shadcn@latest, pnpm dlx shadcn@latest или bunx --bun shadcn@latest)
- Проект с конфигурацией components.json и настроенным пакетным менеджером
- Доступ к интернету для загрузки компонентов из реестров и получения документации
Описание составлено по SKILL.md навыка, сверено 05.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «shadcn-ui-shadcn» из репозитория:
# https://github.com/shadcn-ui/ui
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r shadcn-ui-shadcn/ ~/.claude/skills/shadcn-ui-shadcn/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.