# magento-hyva-specialist

Скилл для разработки витрин Magento 2 на теме Hyvä: Alpine.js, Tailwind CSS и оптимизация фронтенда. Пригодится, когда переводите шаблоны на Hyvä.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 857 установок · ★ 31
- Автор: maxnorm
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/maxnorm/magento2-agent-skills/tree/HEAD/skills/magento-hyva-specialist/SKILL.md
- Обновлён: 2026-01-24
- HTML: https://affpapa.org/nevibecode/skills/magento-hyva-specialist

## Что делает

Скилл описывает рабочий процесс вокруг темы Hyvä: настройка темы и сборки, разработка компонентов на Alpine.js, вёрстка на Tailwind CSS, интеграция с GraphQL API Magento и оптимизация производительности. Внутри — разделы по архитектуре компонентов, кастомной конфигурации Tailwind, кэшированию GraphQL-запросов и работе с Core Web Vitals (LCP, FID, CLS).

Отдельный блок посвящён интеграции модулей: сторонние расширения, собственные модули, мост между легаси-кодом и паттернами Hyvä, headless-сценарии. Есть рекомендации по организации кода и процессу разработки.

Скилл заточен именно под Hyvä. Если витрина собрана на Luma или на другом фреймворке, советы по Alpine.js и Tailwind к ней не применить — это повод проверить, на чём стоит ваш фронтенд, прежде чем ставить.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add maxnorm/magento2-agent-skills --skill magento-hyva-specialist -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/magento-hyva-specialist/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/magento-hyva-specialist/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add maxnorm/magento2-agent-skills --skill magento-hyva-specialist -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/magento-hyva-specialist/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add maxnorm/magento2-agent-skills --skill magento-hyva-specialist -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/magento-hyva-specialist/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install maxnorm/magento2-agent-skills magento-hyva-specialist
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/magento-hyva-specialist/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add maxnorm/magento2-agent-skills --skill magento-hyva-specialist -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/maxnorm/magento2-agent-skills --path skills/magento-hyva-specialist
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/magento-hyva-specialist/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add maxnorm/magento2-agent-skills --skill magento-hyva-specialist -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/maxnorm/magento2-agent-skills/tree/HEAD/skills/magento-hyva-specialist/SKILL.md

## Когда брать
- настроить тему Hyvä и сборку ассетов
- написать компонент на Alpine.js с реактивным состоянием
- перевести существующие шаблоны Magento на архитектуру Hyvä
- подружить стороннее расширение с Hyvä
- сократить JS-бандл и убрать неиспользуемый CSS

## Примеры запросов агенту
- помоги настроить тему Hyvä и build-процесс для нашего магазина
- перепиши этот шаблон Magento на Hyvä с Alpine.js
- проверь, что мешает LCP на странице категории в Hyvä

## Похожие
- [hyva-cms-custom-field](https://affpapa.org/nevibecode/skills/hyva-cms-custom-field.md) — скилл · 752 установки
- [hyva-playwright-test](https://affpapa.org/nevibecode/skills/hyva-playwright-test.md) — скилл · 1300 установок
- [alpine-js](https://affpapa.org/nevibecode/skills/alpine-js.md) — скилл · 1300 установок
- [ghost](https://affpapa.org/nevibecode/skills/ghost.md) — скилл · 828 установок
- [storefront-builder](https://affpapa.org/nevibecode/skills/storefront-builder.md) — скилл · 384 установки
- [shopify-migration](https://affpapa.org/nevibecode/skills/shopify-migration.md) — скилл · 998 установок

Из того же набора: [maxnorm/magento2-agent-skills](https://affpapa.org/nevibecode/by/maxnorm/magento2-agent-skills.md) — 5 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md