hyva-ui-component — скилл для Claude Code: установка
Скилл переносит шаблонные UI-компоненты Hyvä в выбранную тему. Он помогает выбрать компонент, вариант, зависимости и файлы для копирования.
npx skills add hyva-themes/hyva-ai-tools --skill hyva-ui-component -a claude-codeЧто делает hyva-ui-component
Скилл работает с не-CMS-компонентами Hyva UI: шапкой, подвалом, галереей, меню и мини-корзиной. Он проверяет каталог vendor/hyva-themes/hyva-ui/components/, показывает доступные варианты и читает README выбранного компонента перед установкой.
Далее агент определяет тему в app/design/frontend/, копирует файлы из src/ и отмечает созданные и обновлённые файлы. XML-настройки добавляются в etc/view.xml, а существующие layout XML нужно объединять, а не перезаписывать. Зависимости компонентов и плагинов обрабатываются до копирования.
Без установленного Hyva UI потребуется указать пользовательский путь, установить пакет через Composer или скачать его из кабинета Hyvä. Пересборка Tailwind CSS не запускается автоматически: агент отдельно спрашивает, нужно ли её выполнить.
Какие задачи решает
- найти доступные не-CMS-компоненты Hyva UI
- выбрать вариант компонента для темы Hyvä
- скопировать файлы компонента в тему
- добавить XML-настройки в
etc/view.xml - отследить созданные и обновлённые файлы
Примеры запросов агенту
- Добавь галерею Hyva UI в существующую тему и покажи доступные варианты.
- Установи компонент
headerв новую дочернюю тему Hyvä. - Проверь зависимости компонента
minicart, скопируй файлы и покажи изменения.
Как установить hyva-ui-component
1Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-ui-component -a claude-code2Вручную: положить файлы
~/.claude/skills/hyva-ui-component/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/hyva-ui-component/
1Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-ui-component -a codex2Вручную: положить файлы
.agents/skills/hyva-ui-component/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-ui-component -a cursor2Вручную: положить файлы
.cursor/skills/hyva-ui-component/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install hyva-themes/hyva-ai-tools hyva-ui-component2Вручную: положить файлы
.github/skills/hyva-ui-component/SKILL.md1Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-ui-component -a gemini-cli2Командой платформы
gemini skills install https://github.com/hyva-themes/hyva-ai-tools --path skills/hyva-ui-componentВручную: положить файлы
.devin/skills/hyva-ui-component/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-ui-component -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о hyva-ui-component
Как установить hyva-ui-component в Claude Code?
Выполните npx skills add hyva-themes/hyva-ai-tools --skill hyva-ui-component -a claude-code, затем проверьте файл ~/.claude/skills/hyva-ui-component/SKILL.md.
Что делает hyva-ui-component?
Скилл выбирает не-CMS-компонент Hyva UI и его вариант, читает инструкции, переносит файлы в тему Hyvä и показывает изменения.
Что нужно для работы с hyva-ui-component?
В проекте нужен Hyva UI в vendor/hyva-themes/hyva-ui или по пользовательскому пути. Для выполнения команд среды используются hyva-exec-shell-cmd, а для темы и Tailwind нужны связанные скиллы Hyvä.
