83.3K+Скачать
Перейти к руководству
shadcn-uiавтор Google Labs

shadcn UI Skill.

Навык для Claude Code и Codex в области UI-дизайна: интеграция и кастомизация компонентов shadcn/ui — поиск, установка, лучшие практики.

  • Web и UI
  • UI-код
Скачать OpenDesignИнструкция по использованию
google-labs-code/stitch-skills · plugins/stitch-build/skills/shadcn-ui/SKILL.mdSKILL.md
--- name: shadcn-ui description: Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices. --- ## Core Principles ## Component Discovery and Installation ## Project Setup ## Component Architecture ## Customization Best Practices ## Blocks and Complex Components
Метаданные и заголовки разделов считаны из исходного файла 2026-09-14 · 9 117 символов полностью

01 Что делает

Что делает skill shadcn-ui в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Этот skill даёт агенту экспертные рекомендации по созданию приложений с shadcn/ui — набором доступных, настраиваемых компонентов, построенных на Radix UI или Base UI и Tailwind CSS. Он охватывает обнаружение компонентов через инструменты shadcn MCP, установку через CLI или ручную интеграцию, настройку проекта с помощью команд create и init, а также опции components.json, такие как style, baseColor, cssVariables, rsc и rtl.

В нём объясняется структура файлов components/ui/ и хелпер cn(), а затем кастомизация через переменные CSS в app/globals.css, варианты class-variance-authority и компоненты-обёртки. Блоки организованы по категориям, далее следуют правила доступности, распространённые паттерны для форм, диалогов и таблиц, устранение неполадок и список из пяти шагов проверки.

Что он выдаёт

  • Файлы исходного кода компонентов, записанные в components/ui/ и подключённые к вашим импортам.
  • Обновлённый components.json, отражающий конфигурацию и добавленные компоненты.
  • Исходный код блоков, полученный для многофайловых интерфейсов, таких как дашборды или процессы входа.
  • Ваши собственные файлы компонентов-обёрток, например components/custom-button.tsx.
Смотрите пример запроса ↗

Как это работает

  1. 01
    Сначала изучите каталог

    Изучайте доступные компоненты через инструменты shadcn MCP, а не угадывайте названия — используйте list_components, get_component_metadata и get_component_demo.

  2. 02
    Добавьте компонент через CLI

    Рекомендуемый способ — команда add, которая скачивает исходный код, адаптированный под вашу конфигурацию, устанавливает зависимости и размещает файлы в components/ui/.

  3. 03
    Или интегрируйте исходный код вручную

    Для ручной интеграции получите код с помощью get_component, создайте файл самостоятельно, установите peer-зависимости и скорректируйте импорты.

  4. 04
    Инициализируйте конфигурацию проекта

    В новых проектах используйте create для выбора стиля, шрифтов и библиотеки компонентов; в существующих проектах запустите init, который создаёт components.json.

  5. 05
    Оформление через CSS-переменные

    Цвета задаются в конфигурации Tailwind и CSS-переменных, при этом блок .dark задаёт переопределения для тёмного режима.

  6. 06
    Проверяйте перед коммитом

    Проверьте типы, запустите линтер, протестируйте доступность, проверьте светлый и тёмный режимы и убедитесь в корректности брейкпоинтов.

02 Определите своё применение

Когда использовать skill shadcn-ui

Используйте навык shadcn-ui в Claude Code или Codex, когда задача — UI-дизайн такого рода. Применимость и ограничения ниже взяты из собственного файла навыка.

Хорошо подходит

  • Начало нового проекта, где стиль, шрифты и библиотеку компонентов нужно выбрать заранее.
  • Внедрение shadcn/ui в существующую кодовую базу, для которой нужна конфигурация components.json.
  • Работа с приватным или командным реестром, указанным в components.json, либо просмотр публичного Registry Directory.
  • Сборка более крупных экранов, например, потоков аутентификации или дашбордов, из готовых блоков.
  • Проекты, где навигация с клавиатуры, ARIA-атрибуты и управление фокусом обязательны без компромиссов.

Знайте границы

  • Версии компонентов и примитивов расходятся, поэтому обновления могут ломать код и требуют проверки release notes.

Что предоставить

  • Библиотека примитивовВыберите Radix UI или Base UI; скачанный исходный код адаптируется под этот выбор.
  • Названия реестровКогда настроен не только реестр по умолчанию, сначала выведите список доступного, прежде чем получать элементы из него.
  • Категория блоковНеобязательный фильтр по категории сужает список блоков перед получением их исходного кода.

03 Внутри скилла

Правила, которые skill shadcn-ui задаёт Claude Code и Codex

7 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт агенту, — та часть файла, которая меняет результат.

  1. Владейте кодом компонентов

    Относитесь к компонентам как к скопированному исходному коду, который можно переписывать, а не как к зависимости для целостного обновления; вы можете свободно менять стилизацию, поведение и структуру.

  2. Не помещайте обёртки в Components/ui/

    Составные или расширенные компоненты размещаются в components/, но не в components/ui/, где хранятся сами компоненты shadcn.

  3. Объединяйте классы с помощью Cn()

    Каждый компонент shadcn использует хелпер cn() — комбинацию clsx и tailwind-merge, — чтобы переопределения не конфликтовали.

  4. Выражайте варианты через Cva

    Логика вариантов и размеров относится к class-variance-authority, а defaultVariants задаёт, какой вариант и размер применяются, если ничего не передано.

  5. Сохраняйте доступность при кастомизации

    Сохраняйте ARIA-атрибуты, оставляйте обработчики клавиатуры, тестируйте со скринридерами и поддерживайте видимые индикаторы фокуса.

  6. Учитывайте требования к среде выполнения

    shadcn/ui v4 требует React 18+, а в проектах на Next.js — Next.js 13+; некоторые компоненты также фиксируют конкретные версии Radix UI.

  7. При ручной установке разрешайте peer-зависимости самостоятельно

    Ручная интеграция означает, что вы сами разрешаете peer-зависимости и исправляете импорты, вместо того чтобы это делал CLI.

04 Применение

Установить shadcn-ui в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить shadcn-ui в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill shadcn-ui

Общая форма CLI skills для plugins/stitch-build/skills/shadcn-ui/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по дизайну интерфейса

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt
Set up shadcn/ui in my existing [Next.js app] with the new-york style and zinc base color, then add Button, Card and Dialog. Use the login block for the sign-in page, and wrap Button in a LoadingButton in components/ that shows a spinner while [the form submission] is pending. Keep the ARIA attributes and keyboard handling intact.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

  • Запустите линтер проекта, чтобы выявить проблемы со стилем в скопированном коде.
  • Проверьте доступность с помощью инструментов, таких как axe DevTools.
  • Проведите визуальную проверку в светлом и тёмном режимах.
  • Проверьте поведение на разных breakpoint'ах.

В OpenDesign shadcn-ui включён по умолчанию: Plugins → Skills, выберите его в верхней панели.

Скачать OpenDesignЧитать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Ветка main
Файл skill
plugins/stitch-build/skills/shadcn-ui/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 0337446
License
Apache-2.0 Из LICENSE.
Звёзды репозитория
8 304 Снимок GitHub сделан 2026-09-14 для всего репозитория google-labs-code/stitch-skills, который содержит 12 скиллов в этом каталоге. Не является рейтингом или счетчиком использования для shadcn-ui.
Проверено OpenDesign
2026-09-14 Исходный файл, путь, текст лицензии и количество звёзд проверены. Включён в основной OpenDesign (проверено 2026-08-28); запись живого запуска на этой странице отсутствует.

Внутри SKILL.md

  1. Основные принципыПочему скопированный код, которым вы владеете, лучше зависимости.
  2. Поиск и установка компонентовИнструменты MCP, CLI против ручной установки, кастомные реестры.
  3. Настройка проектаcreate против init, параметры components.json, необходимые зависимости.
  4. Архитектура компонентовСтруктура директорий и утилита объединения классов cn().
  5. Лучшие практики кастомизацииТематизация через CSS-переменные, варианты cva, компоненты-обёртки вне components/ui/.
  6. Блоки и сложные компонентыПросмотр, получение и установка многофайловых блоков по категориям.
  7. ДоступностьКлавиатурная навигация, ARIA, фокус и поведение отключённых элементов на базе Radix, которые нужно сохранить.
  8. Типовые паттерныГотовые рецепты импорта для форм, диалогов и таблиц данных.
  9. Устранение неполадокРешения проблем импорта, конфликтов стилей, зависимостей и версий.
  10. Проверка и качествоПять проверок перед коммитом — от проверки типов до QA адаптивности.
  11. РесурсыФайлы со справкой по настройке, каталогу, кастомизации и миграции.
  12. ПримерыПримеры реализации, а также паттерны для форм, дашбордов, авторизации и таблиц данных.
Собственное описание skill
Экспертное руководство по интеграции и созданию приложений с компонентами shadcn/ui, включая поиск компонентов, установку, настройку и лучшие практики.

Описание из метаданных SKILL.md. Полный файл содержит около 9 117 символов. Читайте полный файл на GitHub.

06 Перед установкой

Вопросы о skill shadcn-ui

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Radix UI или Base UI?

Подойдёт любой вариант. Вы выбираете примитив в конфигурации, и CLI соответствующим образом адаптирует загружаемый исходный код. Описанные гарантии доступности относятся к компонентам, построенным на примитивах Radix UI.

shadcn UI

Запустите shadcn-ui на реальной задаче UI-дизайна.

Скилл shadcn-ui встроен в OpenDesign. Скачайте приложение, выберите скилл в Plugins → Skills, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesignВсе навыки
Терминал
npx skills add https://github.com/google-labs-code/stitch-skills --skill shadcn-ui