# hyva-cms-component

Ведёт по шагам создания кастомного компонента Hyvä CMS для Magento 2: модуль, поля, шаблон PHTML и setup:upgrade.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 762 установки · ★ 85
- Автор: hyva-themes
- Лицензия: OSL-3.0 · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/hyva-themes/hyva-ai-tools/tree/HEAD/skills/hyva-cms-component/SKILL.md
- Обновлён: 2026-07-31
- HTML: https://affpapa.org/nevibecode/skills/hyva-cms-component

## Что делает

Скилл проводит через весь цикл: выбираете модуль, задаёте имя компонента, метку, категорию и поля, а на выходе получаете `components.json` и PHTML-шаблон. Работает и с новым модулем, и с существующим — во втором случае он проверит, что в `etc/module.xml` есть зависимость `Hyva_CmsBase`, а в `composer.json` — `hyva-themes/commerce-module-cms`, и добавит их, если их нет.

Поля берутся из живого списка: скилл предлагает прогнать `bin/magento hyva:cms:list-fields` через обёртку `hyva-exec-shell-cmd`, а к файлу `references/field-types.md` откатывается, только когда команда недоступна. Иконку он подбирает из набора lucide, отсеивая те, что уже заняты другими компонентами, — для этого сначала дампит текущие компоненты. Есть готовые пресеты полей: Basic Card, Image Card, CTA Block, Text Block, Feature Item, Testimonial, Accordion Item.

\`children` — свойство уровня компонента, а не тип поля внутри `content`. Если записать его как поле, схема отвалится; для дочерних компонентов есть `require_parent: true`. Скилл опирается на четыре других: `hyva-exec-shell-cmd`, `hyva-create-module`, `hyva-cms-components-dump` и `hyva-render-media-image`, так что без них шаги про окружение и иконки не пройдут.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-component -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-component -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-component -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install hyva-themes/hyva-ai-tools hyva-cms-component
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-component -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/hyva-themes/hyva-ai-tools --path skills/hyva-cms-component
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-component -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/hyva-themes/hyva-ai-tools/tree/HEAD/skills/hyva-cms-component/SKILL.md

## Когда брать
- создать компонент Hyvä CMS в новом модуле Magento 2
- добавить CMS-компонент в уже существующий модуль
- описать поля компонента в `components.json` без ошибок схемы
- подобрать свободную иконку lucide для компонента
- настроить варианты шаблона и дочерние компоненты

## Примеры запросов агенту
- Создай компонент Hyvä CMS `feature_card` с полями для заголовка и картинки
- Добавь новый CMS-компонент в модуль `Acme_CmsComponents`
- Сделай кастомный элемент Hyvä CMS с вариантами default и compact

## Похожие
- [frontend-design](https://affpapa.org/nevibecode/skills/frontend-design.md) — скилл · 1025790 установок
- [design-taste-frontend](https://affpapa.org/nevibecode/skills/design-taste-frontend.md) — скилл · 678700 установок
- [prototype](https://affpapa.org/nevibecode/skills/prototype.md) — скилл · 986201 установка
- [hyperframes](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes.md) — скилл · 1200000 установок
- [hyperframes-cli](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes-cli.md) — скилл · 1300000 установок
- [webapp-testing](https://affpapa.org/nevibecode/skills/webapp-testing.md) — скилл · 186758 установок

Из того же набора: [hyva-themes/hyva-ai-tools](https://affpapa.org/nevibecode/by/hyva-themes/hyva-ai-tools.md) — 12 карточек

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