AIKraft/AI/Войти
AIKraft/Skills/chakra-ui-builder

chakra-ui-builder

Создаёт UI-компоненты, страницы и темы на Chakra UI v3. Помогает с установкой, настройкой ChakraProvider, кастомизацией токенов, рецептов и тёмной темы. Используйте для любых задач по вёрстке и стилизации в Chakra UI.

CUchakra-ui official Разработка ★ 40.7k

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

Skill помогает разрабатывать UI-компоненты, страницы и темы на Chakra UI v3, обеспечивая доступную и адаптивную верстку. Он автоматизирует настройку проекта, включая установку зависимостей, конфигурацию ChakraProvider и интеграцию с Next.js или Vite.

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

  • Создание UI-компонентов и страниц с использованием семантических токенов и адаптивных стилей Chakra UI v3.
  • Настройка окружения проекта: установка @chakra-ui/react, @emotion/react и next-themes, а также генерация файлов через CLI.
  • Исправление типичных проблем настройки, таких как ошибки гидратации в Next.js App Router или отсутствие обертки Provider.
  • Разработка форм с использованием Field.Root и управление состоянием интерактивных элементов с учетом Server/Client компонентов в Next.js.

Как работает

  1. Проанализировать контекст проекта: проверить package.json на версию Chakra UI, фреймворк (Next.js, Vite, React), язык (TS/JS) и менеджер пакетов.
  2. Выполнить установку и настройку Chakra UI: использовать CLI для генерации сниппетов (snippet add) или вручную создать components/ui/provider.tsx с ChakraProvider и ThemeProvider.
  3. Выбрать правильные примитивы макета (Stack, Flex, Grid, Container) и использовать семантические токены (bg.subtle, fg.default) вместо жестко заданных цветов.
  4. Применить адаптивные стили, используя массивы или объекты для брейкпоинтов, обеспечив поддержку как минимум базового (mobile) и md (desktop) разрешений.
  5. Реализовать формы через Field.Root для корректной связи лейблов и ошибок, а также управлять состоянием через атрибут disabled.
  6. Обеспечить доступность (aria-label, alt, семантические заголовки) и правильно распределить директиву 'use client' только для интерактивных компонентов в Next.js.

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

Настройте Chakra UI v3 в проекте Next.js App Router с поддержкой темной темы и добавьте кнопку 'Submit' в синей цветовой палитре.
Создайте адаптивную карточку товара, которая отображает имя и цену, используя серверный компонент, и кнопку 'Add to cart' как клиентский компонент.
Разработайте форму регистрации с полями Email и Password, используя Field.Root, с валидацией и текстом помощи, адаптированную для мобильных и десктопных устройств.

Что понадобится

  • Установленный Node.js и менеджер пакетов (npm, pnpm, yarn или bun).
  • Фреймворк Next.js (App Router или Pages Router), Vite или plain React.
  • Доступ к файлам проекта (package.json, lockfile, существующие компоненты) для анализа контекста.

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

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

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

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