hyva-compile-tailwind-css — скилл для Claude Code: сборка стилей
Автоматизирует сборку Tailwind CSS для тем Hyvä в Magento 2. Запускает продакшен-билд или режим отслеживания изменений, когда новые стили не отображаются на витрине.
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a claude-codeЧто делает hyva-compile-tailwind-css
Скилл компилирует таблицы стилей Tailwind внутри тем Hyvä для Magento 2. Он ищет активную тему в каталоге app/design/frontend/, проверяет наличие папки node_modules внутри <theme-path>/web/tailwind и при необходимости подтягивает зависимости через npm ci. По умолчанию агент выполняет продакшен-сборку через npm run build, а режим npm run watch включает только при явном запросе на отслеживание правок.
Для выполнения команд скиллу обязательно требуются установленные инструменты hyva-exec-shell-cmd и hyva-theme-list. Первый определяет окружение и оборачивает shell-команды, а второй находит пути к установленным темам. Результат работы сохраняется в файл <theme-path>/web/css/styles.css, обновление которого агент проверяет по времени модификации. Если стили в браузере не обновились, потребуется сбросить кэш или выполнить bin/magento setup:static-content:deploy.
Какие задачи решает
- собрать стили Tailwind для темы Hyvä в продакшен-режиме
- запустить фоновый режим watch для отслеживания правок в шаблонах
- восстановить пропавшие стили после изменения разметки Magento 2
- установить недостающие npm-зависимости темы перед сборкой
Примеры запросов агенту
- Собери стили Tailwind для текущей темы Hyvä
- Почему стили Tailwind не применяются после правок в шаблоне? Пересобери CSS
- Запусти отслеживание изменений стилей через watch mode
Как установить hyva-compile-tailwind-css
1Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a claude-code2Вручную: положить файлы
~/.claude/skills/hyva-compile-tailwind-css/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/hyva-compile-tailwind-css/
1Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a codex2Вручную: положить файлы
.agents/skills/hyva-compile-tailwind-css/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a cursor2Вручную: положить файлы
.cursor/skills/hyva-compile-tailwind-css/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install hyva-themes/hyva-ai-tools hyva-compile-tailwind-css2Вручную: положить файлы
.github/skills/hyva-compile-tailwind-css/SKILL.md1Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a gemini-cli2Командой платформы
gemini skills install https://github.com/hyva-themes/hyva-ai-tools --path skills/hyva-compile-tailwind-cssВручную: положить файлы
.devin/skills/hyva-compile-tailwind-css/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора5
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о hyva-compile-tailwind-css
Как установить hyva-compile-tailwind-css в Claude Code?
Выполните команду npx skills add hyva-themes/hyva-ai-tools --skill hyva-compile-tailwind-css -a claude-code. Конфигурация сохранится в файле ~/.claude/skills/hyva-compile-tailwind-css/SKILL.md.
Что делает скилл hyva-compile-tailwind-css?
Он находит тему оформления Hyvä, устанавливает недостающие пакеты через npm ci и запускает компиляцию Tailwind CSS в файл styles.css.
Какие дополнительные скиллы нужны для работы?
Требуются hyva-exec-shell-cmd для адаптации консольных команд под среду выполнения и hyva-theme-list для автоматического поиска тем в проекте.
