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

chakra-ui-refactor

Проверяет, рефакторит и улучшает UI-код с использованием Chakra UI v3. Конвертирует HTML, Tailwind, CSS Modules или styled-components в Chakra UI, исправляет ошибки верстки и токенов. Полезно при запросах на ревью, конвертацию или улучшение компонентов.

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

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

Навык анализирует, рефакторит и улучшает UI-код с использованием Chakra UI v3, конвертируя HTML, Tailwind, CSS Modules или styled-components в компонентную структуру Chakra. Он исправляет ошибки верстки, токенов и доступности, обеспечивая соответствие современным стандартам фреймворка.

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

  • Ревью существующего UI-кода на предмет ошибок, доступности и соответствия Chakra UI v3
  • Конвертация компонентов из Tailwind CSS, CSS Modules или styled-components в Chakra UI
  • Улучшение и очистка кода на базе Chakra UI (устранение вложенности, обновление устаревших пропсов)
  • Исправление проблем с адаптивностью и токенами стилей (например, поддержка темной темы)

Как работает

  1. Определить контекст проекта (версия Chakra, фреймворк, тип исходного кода) и намерение пользователя (только ревью, рефакторинг или оба варианта)
  2. Проанализировать код по критериям: доступность, адаптивность, корректность API Chakra v3, использование токенов, структура компонентов и поддерживаемость
  3. При запросе ревью: сгруппировать находки по уровню критичности (Critical, Improvements, Optional) и показать минимальные исправления
  4. При запросе рефакторинга: преобразовать код согласно стратегии конвертации, сохранив поведение, обработчики событий и семантику
  5. Предоставить результат в виде исправленного кода, списка изменений и опциональных предложений по улучшению

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

Проверь этот компонент на Chakra UI v3: есть ли проблемы с доступностью и правильностью использования пропсов?
Рефактори этот код из Tailwind CSS в Chakra UI, сохранив всю логику и адаптивность
Исправь верстку и токены в этом компоненте, заменив жесткие цвета на семантические токены Chakra

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

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

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

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