Hyva Cms Custom Field

This generates custom field types and handlers for Hyvä's CMS editor, letting you extend beyond the built-in text, select, and textarea fields. It walks you through three patterns: basic custom inputs with validation, inline enhanced controls like searchable dropdowns, and modal-based handlers for complex selections like product pickers. The workflow covers module setup, template generation with proper Alpine.js wiring, di.xml registration, and the event protocols for field-to-handler communication. Use it when you need specialized CMS inputs like date ranges, color pickers, or product selectors. The references folder has solid examples of all three patterns, which matters since getting the event dispatch and validation containers right is fiddly.

skills.sh installs: 759
GitHub stars: 85
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add hyva-themes/hyva-ai-tools --skill hyva-cms-custom-field --agent claude-code

Installs into .claude/skills of the current project.

Files

Hyvä CMS Custom Field Type Creator

Overview

This skill guides the creation of custom field types and field handlers for Hyvä CMS components. Custom field types extend the built-in field types (text, textarea, select, etc.) with specialized input controls for the CMS editor interface.

Two types of custom fields:

Basic Custom Field Type: Custom input control with direct data entry (e.g., date range, color picker, custom validation)
Field Handler: Enhanced UI with complex interactions (e.g., product selector with images, searchable dropdown, link configuration modal)

Command execution: For commands that need to run inside the development environment (e.g., bin/magento), use the hyva-exec-shell-cmd skill to detect the environment and determine the appropriate command wrapper.