shadcn · pedronauck — скилл для Claude Code: что делает и как установить
Задаёт правила сборки интерфейсов на shadcn/ui и Radix UI. Помогает агенту сохранять поддержку тем оформления и доступность экранов.
npx skills add pedronauck/skills --skill shadcn -a claude-codeЧто делает shadcn
Скилл инструктирует ИИ-агента при работе с библиотекой shadcn/ui. Он требует использовать токены дизайн-системы вроде bg-background или text-foreground. Прямые цвета вроде bg-white под строгим запретом, потому что они ломают переключение светлой и тёмной тем. Доступность сохраняется через атрибуты Radix UI, которые нельзя удалять из разметки.
Для составных компонентов скилл предписывает раздельные экспорты, а не вложенные свойства через Object.assign. Внутри заложен чек-лист проверки: агент должен контролировать работу навигации с клавиатуры, запуск тестов и типизацию через pnpm run typecheck. Для чтения файлов скилл использует стандартные инструменты Read, Grep и Glob.
Какие задачи решает
- настроить цвета компонентов через токены дизайн-системы
- расширить стандартный компонент новыми свойствами и вариантами
- сохранить разметку доступности Radix UI для скринридеров
- оформить составные части интерфейса через раздельный экспорт
Примеры запросов агенту
- Добавь в проект кнопку с состоянием загрузки по правилам shadcn
- Создай диалоговое окно и проверь, что атрибуты доступности сохранены
- Переведи стили карточки на токены дизайн-системы вместо фиксированных цветов
Как установить shadcn
1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill shadcn -a claude-code2Вручную: положить файлы
~/.claude/skills/shadcn/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/shadcn/
1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill shadcn -a codex2Вручную: положить файлы
.agents/skills/shadcn/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill shadcn -a cursor2Вручную: положить файлы
.cursor/skills/shadcn/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install pedronauck/skills shadcn2Вручную: положить файлы
.github/skills/shadcn/SKILL.md1Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill shadcn -a gemini-cli2Командой платформы
gemini skills install https://github.com/pedronauck/skills --path skills/curated/shadcnВручную: положить файлы
.devin/skills/shadcn/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add pedronauck/skills --skill shadcn -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о shadcn
Как установить shadcn в Claude Code?
Выполните команду npx skills add pedronauck/skills --skill shadcn -a claude-code. Также можно вручную поместить файл по пути ~/.claude/skills/shadcn/SKILL.md.
Что делает этот скилл?
Он передаёт агенту правила работы с компонентами shadcn/ui и библиотекой Radix UI. Инструкции помогают избежать прямых цветов Tailwind CSS и поддерживают доступность интерфейса.
Почему скилл запрещает классы вроде bg-white?
Фиксированные цвета Tailwind ломают смену светлой и тёмной тем оформления. Вместо них скилл требует задавать фон и границы через переменные в globals.css и токены вроде bg-background.
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — shadcn от других авторов.
