shadcnавтор shadcn

shadcn Skill.

Навык для Claude Code и Codex в области UI-дизайна: добавляет, ищет, исправляет, стилизует и компонует shadcn-компоненты в проекте.

Web и UI
UI-код

Скачать OpenDesign Инструкция по использованию

shadcn-ui/ui · skills/shadcn/SKILL.mdSKILL.md

--- name: shadcn description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset". --- ## Current Project Context ## Principles ## Critical Rules ## Key Patterns ## Component Selection ## Key Fields

Метаданные и заголовки разделов считаны из исходного файла 2026-09-14 · 19 427 символов полностью

01 Что делает

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

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

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

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

Этот skill управляет проектами на shadcn/ui: добавляет, ищет, исправляет и компонует компоненты. Он внедряет живой контекст проекта из components.json, применяет специфичные для фреймворка правила для форм, стилизации, композиции, иконок и интерфейсов чата, а также использует shadcn CLI для всех операций. Компоненты устанавливаются как исходный код через npx shadcn@latest (или пакетный менеджер проекта).

Этот skill применяется при работе с shadcn/ui, реестрами компонентов, готовыми пресетами кода или любым проектом с файлом components.json. Он охватывает директивы RSC, Tailwind v3/v4, различия между примитивами Base UI и Radix, определение библиотеки иконок и структуру монорепозиториев. Каждая команда учитывает реальные алиасы проекта, пакетный менеджер и разрешённые пути.

Что он выдаёт

Файлы исходного кода компонентов shadcn, добавленные в разрешённый ui-путь проекта
Объединённые файлы компонентов при обновлении, сохраняющие локальные изменения при применении обновлений из upstream

Смотрите пример запроса ↗

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

01
Внедрение контекста проекта
Запускает npx shadcn@latest info --json, чтобы получить конфигурацию проекта, установленные компоненты, алиасы, флаг RSC, версию Tailwind, библиотеку иконок, базу (radix или base) и разрешённые пути.
02
Поиск в реестрах перед созданием кастомного UI
Использует npx shadcn@latest search для проверки реестра shadcn и сторонних реестров на наличие существующих компонентов, соответствующих задаче.
03
Получение документации и примеров компонентов
Запускает npx shadcn@latest docs <component>, чтобы получить документацию и ссылки на примеры, а затем загружает их для проверки корректного использования API перед созданием или исправлением компонента.
04
Добавление или обновление компонентов с помощью CLI
Использует npx shadcn@latest add для установки компонентов.
05
Исправление импортов в сторонних компонентах
После добавления компонентов из сторонних реестров проверяет файлы, не относящиеся к UI, на наличие жёстко заданных путей вида @/components/ui/...
06
Проверка и подтверждение добавленных компонентов
Считывает все добавленные файлы, чтобы проверить отсутствующие подкомпоненты, неверную композицию, нарушения критических правил и несоответствия импортов иконок.

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

Когда использовать навык shadcn

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

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

Создание UI с компонентами shadcn/ui в существующем проекте с файлом components.json
Инициализация нового проекта shadcn с preset-кодом или именованным preset, например nova или vega
Создание интерфейсов чата или переписки с использованием MessageScroller, Message, Bubble, Attachment и Marker

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

Ручная загрузка файлов компонентов с GitHub вместо использования CLI
Использование реестра по умолчанию, если пользователь не указал, какой из них использовать
Использование --overwrite для обновления компонентов без явного одобрения пользователя
Придумывание возможностей, интеграций или имён файлов, отсутствующих в контексте проекта

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

Название компонента или блокаНазвание компонента shadcn (button, dialog, select) или элемента реестра (@magicui/shimmer-button, owner/repo/item) для добавления или поиска.
Preset-код или именованный presetСтрока в base62 с префиксом версии (например, a2r6bw) с ui.shadcn.com, или именованный preset (nova, vega, maia, lyra, mira, luma) для init или apply.

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

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

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

Используйте gap-, никогда space-x- или space-y-*
Для расстояния между flex-дочерними элементами используйте gap-. Для вертикальных стеков — flex flex-col gap-. space-x- и space-y- никогда не допускаются.
Формы используют FieldGroup + Field
Макеты форм должны использовать компоненты FieldGroup и Field. Никогда не используйте обычный div с space-y- или grid gap- для макета формы.
Иконки в кнопках используют data-icon
Иконки внутри Button должны иметь data-icon="inline-start" или data-icon="inline-end". Никаких классов размера, таких как size-4 или w-4 h-4, на иконках внутри компонентов.
Элементы всегда внутри своей группы
SelectItem находится внутри SelectGroup, DropdownMenuItem — внутри DropdownMenuGroup, CommandItem — внутри CommandGroup. Никогда не рендерите элементы напрямую.
Используйте семантические цветовые токены, а не исходные значения
Используйте bg-primary, text-muted-foreground и т. д. Никогда не используйте исходные цвета Tailwind, такие как bg-blue-500 или text-emerald-600. Никаких ручных переопределений цвета dark:.
Dialog, Sheet и Drawer всегда должны иметь заголовок
DialogTitle, SheetTitle и DrawerTitle обязательны для обеспечения доступности. Используйте className="sr-only", если заголовок должен быть визуально скрыт.
Никогда не декодируйте preset-коды вручную
Используйте npx shadcn@latest preset decode <code>, preset url <code> или preset open <code>. Для определения preset с учётом контекста проекта используйте preset resolve. Никогда не собирайте URL preset вручную.
Запускайте все CLI-команды через пакетный менеджер проекта
Используйте npx shadcn@latest, pnpm dlx shadcn@latest или bunx --bun shadcn@latest в зависимости от поля packageManager проекта. Никогда не используйте npx по умолчанию, если проект использует pnpm или bun.

04 Применение

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

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

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

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

Terminal

npx skills add https://github.com/shadcn-ui/ui --skill shadcn

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

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

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

Starter prompt

I need a settings page with tabs for profile, account, and notifications. Each tab should have form fields grouped by section, with a save button at the bottom. Use the project's existing shadcn components and follow the FieldGroup pattern. The profile tab needs an avatar upload, the account tab needs email and password inputs with inline buttons to change them, and the notifications tab needs toggle groups for frequency (daily, weekly, monthly) and a set of checkboxes for notification types. Make sure all validation states use data-invalid and aria-invalid correctly.

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

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

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

Запустите npx shadcn@latest info, чтобы убедиться, что компонент добавлен в список установленных компонентов
Проверьте, что импорты иконок соответствуют полю iconLibrary проекта (lucide-react, @tabler/icons-react и т. д.)

В OpenDesign импортируйте shadcn по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

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

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

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

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

Author: shadcn
Repository: github.com/shadcn-ui/ui Ветка main
Файл skill: skills/shadcn/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 2b3e6d4
License: MIT Из LICENSE.md.
Звёзды репозитория: 123 708 Снимок GitHub сделан 14.09.2026 для всего репозитория shadcn-ui/ui. Это не рейтинг и не счётчик использования shadcn.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Контекст текущего проектаВнедряет актуальную конфигурацию проекта и список установленных компонентов из npx shadcn@latest info --json
ПринципыСначала используйте существующие компоненты, комбинируйте вместо повторного изобретения, используйте встроенные варианты, используйте семантические цвета
Критические правилаОбязательные правила для стилей, форм, композиции, иконок, чата и CLI со ссылками на подробные файлы
Ключевые паттерныСамые распространённые паттерны кода: макет форм, валидация, иконки в кнопках, отступы, равные размеры, цвета статусов
Выбор компонентовТаблица сопоставления UI-задач с нужными компонентами shadcn (кнопки, формы, оверлеи, обратная связь, навигация, чат)
Ключевые поляОписывает aliases, isRSC, tailwindVersion, base, iconLibrary, resolvedPaths, framework, packageManager, preset из контекста проекта
Документация, примеры и использование компонентовЗапустите npx shadcn@latest docs, чтобы получить URL, и загрузите их для корректных паттернов API и использования
WorkflowПроцесс из девяти шагов: получить контекст, проверить установленное, выполнить поиск, получить документацию, установить, исправить импорты, проверить, обработать реестры, переключить пресеты
Обновление компонентовИспользуйте --dry-run и --diff для слияния изменений из upstream с сохранением локальных модификаций, никогда не используйте --overwrite без согласования
Краткий справочникПримеры CLI-команд для init, apply, add, search, docs, view, операций с preset с флагами и синтаксисом реестра
Подробные справочные материалыСсылки на отдельные файлы правил для форм, композиции, чата, иконок, стилей, base-vs-radix, CLI, реестра, кастомизации

Собственное описание skill

«Управляет компонентами и проектами shadcn: добавляет, ищет, исправляет, отлаживает, стилизует и компонует UI, включая интерфейсы чата. Предоставляет контекст проекта, документацию компонентов и примеры использования. Применяется при работе с shadcn/ui, реестрами компонентов, пресетами, кодами --preset или любым проектом с файлом components.json. Также активируется для „shadcn init", „создать приложение с --preset" или „переключиться на --preset"».

Описание из front-matter SKILL.md. Полный файл занимает около 19 427 символов. Читать полный файл на GitHub.

shadcn

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

Скачайте OpenDesign, импортируйте shadcn по ссылке на SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/shadcn-ui/ui --skill shadcn

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

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

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

Когда использовать навык shadcn

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

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

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

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

Используйте gap-, никогда space-x- или space-y-*

Формы используют FieldGroup + Field

Иконки в кнопках используют data-icon

Элементы всегда внутри своей группы

Используйте семантические цветовые токены, а не исходные значения

Dialog, Sheet и Drawer всегда должны иметь заголовок

Никогда не декодируйте preset-коды вручную

Запускайте все CLI-команды через пакетный менеджер проекта