hyva-cms-component_skill

Overview

This skill helps you create custom Hyvä CMS components for Magento 2 (new or existing modules). It guides module selection, components.json and PHTML generation, field and variant configuration, icon selection, and runs setup:upgrade when files are created. Use it to produce schema-compliant components and safe Hyvä templates ready for live editing.

How this skill works

The skill interactively collects module and component details, picks an appropriate lucide icon (avoiding collisions with existing components), and builds or updates etc/hyva_cms/components.json and view/frontend/templates/elements PHTML files. It validates children placement and field attributes, generates template headers and patterns for text, richtext, image, link, boolean, select and children rendering, then triggers the environment wrapper to run bin/magento setup:upgrade.

When to use it

• Create a new Hyvä CMS component in a new module
• Add a component to an existing module (app/code or vendor)
• Generate components.json entries and PHTML templates with correct editor attributes
• Add children-supporting components or child-only items
• Create template variants (compact, wide, etc.)

Best practices

• Always read critical patterns: children must be a root-level property, not a content field
• Put validation rules inside attributes (attributes.required, minlength, maxlength, pattern)
• Use template: false for child-only items that parent renders directly and access flat child data
• Include Hyva_CmsBase design and advanced includes for consistent defaults
• Use $block->getEditorAttrs() and Escaper for safe live editing and output escaping

Example use cases

• Create a Feature Card component with title, image, text, and CTA link plus default and compact variants
• Add a child-only list item component and a parent list component that accepts it
• Build an Image Card preset using the Image Card field preset and the Hyva media view model for responsive images
• Migrate an existing component into Hyvä by adding icon, category, and proper components.json entries
• Generate a CTA Block with select-style variants and live-editable text and link fields