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

shadcn-ui

Помогает интегрировать компоненты shadcn/ui: искать, устанавливать и настраивать их. Подходит для создания UI на React 18+ и Tailwind CSS 3.0+ с использованием Radix UI. Позволяет кастомизировать темы и использовать готовые блоки.

GOGoogle official Разработка ★ 8.4k

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

Skill помогает разработчикам обнаруживать, интегрировать и настраивать компоненты shadcn/ui, которые копируются непосредственно в проект. Это обеспечивает полный контроль над кодом, отсутствие привязки к версиям библиотек и нулевые накладные расходы на рантайме.

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

  • Поиск и выбор подходящих UI-компонентов для проекта на React и Tailwind CSS.
  • Копирование и установка компонентов shadcn/ui в локальную кодовую базу.
  • Кастомизация стилей, поведения и структуры компонентов с использованием Radix UI или Base UI.
  • Обновление отдельных компонентов без блокировки версий всей библиотеки.

Как работает

  1. Изучить принципы работы shadcn/ui как коллекции переиспользуемых компонентов, а не библиотеки.
  2. Осуществить поиск доступных компонентов через интерфейс или документацию.
  3. Копировать выбранные компоненты в проект, обеспечивая полный владение кодом.
  4. Настроить компоненты, изменив стилизацию, поведение или структуру по необходимости.
  5. Использовать Radix UI или Base UI как базовые примитивы для кастомизации.

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

Как установить компонент Button из shadcn/ui в мой проект?
Найди доступные компоненты для модальных окон в shadcn/ui.
Как кастомизировать стиль компонента Card, используя Tailwind CSS?

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

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

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

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