Установка скиллов и плагинов OpenClaw осуществляется на ваш страх и риск. Все файлы были получены из открытых источников и предоставляются «как есть». Мы не гарантируем их корректную работу, безопасность или совместимость с вашей системой. Перед установкой настоятельно рекомендуется ознакомиться с содержимым кода и убедиться, что вы понимаете, какие изменения будут внесены в вашу систему.
jgarrison929 · 2 февраля 2026
Обзор
Коротко: этот навык помогает вашему AI-агенту работать с библиотекой компонентов shadcn/ui — от установки и настройки тем до кастомизации отдельных компонентов и сборки сложных интерфейсов. :
Shadcn Ui — это навык OpenClaw, который используется при разработке интерфейсов с компонентами shadcn/ui, макетами на Tailwind CSS, формами с использованием react-hook-form и zod, а также при работе с темами, тёмным режимом, боковыми панелями, мобильной навигацией и любыми вопросами по компонентам shadcn. :
Созданный пользователем jgarrison929, этот навык был скачан более 6000 раз на ClawHub и устанавливается одной командой, после чего сразу расширяет возможности вашего AI-агента. :
Сценарии использования
- Установка и настройка shadcn/ui в новом проекте Next.js с кастомной темой
- Создание таблицы данных с сортировкой, фильтрацией, пагинацией и выбором строк
- Разработка командной палитры с поиском, навигацией с клавиатуры и группировкой результатов
- Кастомизация вариантов компонентов под конкретную дизайн-систему
Установка
Для установки навыка в OpenClaw-агент выполните следующую команду:
npx clawhub@latest install shadcn-uiПосле установки навык сразу становится доступен для использования в проектах.
Безопасность
Проверки безопасности показывают, что навык является безопасным и не запрашивает лишние разрешения или доступ к данным. Он выполняет исключительно функции, связанные с работой shadcn/ui, без скрытых действий или привилегий. :
SKILL.md
Описание: используйте при разработке UI с shadcn/ui, Tailwind CSS, react-hook-form и zod, а также при работе с темами, диалогами, таблицами, меню и другими компонентами.
Основные триггеры: shadcn, component library, UI components, dark mode, theming, sidebar layout, dialog, toast, dropdown menu, data table и другие.
Эксперт по shadcn/ui
Это полноценное руководство по созданию production-интерфейсов с использованием shadcn/ui, Tailwind CSS, react-hook-form и zod.
Ключевая идея
shadcn/ui — это не классическая библиотека компонентов, а набор готовых элементов, которые копируются прямо в ваш проект. Вы полностью контролируете код и не зависите от внешних пакетов. :
Установка компонентов
# Инициализация в проекте Next.js
npx shadcn@latest init
# Добавление компонентов
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add form
npx shadcn@latest add input
npx shadcn@latest add select
npx shadcn@latest add table
npx shadcn@latest add toast
npx shadcn@latest add dropdown-menu
npx shadcn@latest add sheet
npx shadcn@latest add tabs
npx shadcn@latest add sidebarВозможности
- Подробные инструкции по установке и использованию компонентов
- Готовые паттерны для форм с react-hook-form и zod
- Поддержка тем, тёмного режима и адаптивной навигации
- Гибкая кастомизация интерфейсов под дизайн-систему
- Работа с layout, навигацией, данными и обратной связью
Частые вопросы
Работает ли это только с Next.js?
Нет, shadcn/ui можно использовать в любом React-проекте, включая Vite, Remix и другие фреймворки. :
Как реализуется темизация?
Темы настраиваются через CSS-переменные и Tailwind, что даёт гибкость и контроль над внешним видом.
Можно ли использовать без Tailwind?
Да, но Tailwind является основным инструментом стилизации в экосистеме shadcn/ui и обеспечивает максимальную совместимость.
Файл из источника