# hyva-cms-custom-field

Generates custom inputs and modal handlers for Hyvä CMS components. Helps Magento developers extend editor controls without writing boilerplate by hand.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 752 installs · ★ 85
- Author: hyva-themes
- License: OSL-3.0 · policy=link-only · description only; the file stays with the author
- Source: https://github.com/hyva-themes/hyva-ai-tools/tree/HEAD/skills/hyva-cms-custom-field/SKILL.md
- Updated: 2026-07-31
- HTML: https://affpapa.org/en/nevibecode/skills/hyva-cms-custom-field

## What it does

The skill outlines steps to implement bespoke field types for the Hyvä CMS editor. It covers basic inputs such as sliders or color pickers, as well as complex Alpine.js modal pickers that need separate dialogs.

During generation, the assistant sets up PHTML templates in `view/adminhtml/templates/`, wires events with Magewire, and configures `etc/adminhtml/di.xml`. For modal dialogs, it adds layout updates into `liveview_editor.xml` and produces component definitions for `components.json`.

This skill only works with Hyvä CMS and fails on standard Magento forms. Your module must declare dependencies on `Hyva_CmsBase`, `Hyva_CmsLiveviewEditor`, and `hyva-themes/commerce-module-cms`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-custom-field -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/hyva-cms-custom-field/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/hyva-cms-custom-field/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-custom-field -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/hyva-cms-custom-field/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-custom-field -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/hyva-cms-custom-field/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

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

2. **Manually: put the files in place**
- File: `.github/skills/hyva-cms-custom-field/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-custom-field -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/hyva-themes/hyva-ai-tools --path skills/hyva-cms-custom-field
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/hyva-cms-custom-field/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-custom-field -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/hyva-themes/hyva-ai-tools/tree/HEAD/skills/hyva-cms-custom-field/SKILL.md

## When to use it
- build PHTML templates for specialized Hyvä CMS input controls
- wire Alpine.js modal dialogs for component asset selection
- register custom field definitions in `etc/adminhtml/di.xml`
- declare new input elements in `components.json`

## Example prompts
- Build a custom date range picker field for a Hyvä CMS promo block
- Create an Alpine.js modal product picker for Hyvä CMS components
- Register a custom color picker input in di.xml for the CMS editor

## Similar
- [magento-hyva-specialist](https://affpapa.org/en/nevibecode/skills/magento-hyva-specialist.md) — skill · 857 installs
- [platform-custom-field-generate](https://affpapa.org/en/nevibecode/skills/platform-custom-field-generate.md) — skill · 6500 installs
- [ghost](https://affpapa.org/en/nevibecode/skills/ghost.md) — skill · 828 installs
- [cms-development](https://affpapa.org/en/nevibecode/plugins/cms-development.md) — plugin · ★ 40418
- [contentful-custom-app-from-scratch](https://affpapa.org/en/nevibecode/skills/contentful-custom-app-from-scratch.md) — skill · 2800 installs
- [cms-migration](https://affpapa.org/en/nevibecode/skills/cms-migration.md) — skill · 1900 installs

From the same set: [hyva-themes/hyva-ai-tools](https://affpapa.org/en/nevibecode/by/hyva-themes/hyva-ai-tools.md) — 6 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md