Skip to main content
skill CX Codex

hyva-cms-component — Claude Code skill: Hyvä CMS components

Walks you through building a custom Hyvä CMS component for Magento 2: module, fields, PHTML template and setup:upgrade.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-component -a claude-code
Open on GitHub

What hyva-cms-component does

The skill covers the whole path from picking a module to writing files. You name the component, give it a label and category, choose fields, and it produces components.json plus a PHTML template. Both new and existing modules are supported. For an existing one it checks that etc/module.xml lists Hyva_CmsBase and that composer.json requires hyva-themes/commerce-module-cms, adding either if missing.

Field types come from the project itself when possible: the skill runs bin/magento hyva:cms:list-fields through the hyva-exec-shell-cmd wrapper and only falls back to references/field-types.md when that command is not there. Icons are picked from the lucide set, skipping any already taken by another component — the skill dumps current components first to know which ones those are. Presets cover Basic Card, Image Card, CTA Block, Text Block, Feature Item, Testimonial and Accordion Item.

Watch the children property. It belongs at the component level, not inside content as a field type; put it in the wrong place and the schema rejects the file. Child-only components use require_parent: true instead. Four companion skills do the heavy lifting — hyva-exec-shell-cmd, hyva-create-module, hyva-cms-components-dump and hyva-render-media-image — so the environment and icon steps depend on them being installed.

What it helps with

  • scaffold a Hyvä CMS component inside a new Magento 2 module
  • add a CMS component to a module you already have
  • define component fields in components.json without schema errors
  • find a lucide icon no other component uses
  • set up template variants and child components

Example prompts for the agent

  • Create a Hyvä CMS component feature_card with fields for a heading and an image
  • Add a new CMS component to the Acme_CmsComponents module
  • Build a custom Hyvä CMS element with default and compact variants

How to install hyva-cms-component

1Skills CLI (Vercel)

npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-component -a claude-code

2Manually: put the files in place

~/.claude/skills/hyva-cms-component/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/hyva-cms-component/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about hyva-cms-component

How do I install hyva-cms-component in Claude Code?

Run npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-component -a claude-code. The skill file lands at ~/.claude/skills/hyva-cms-component/SKILL.md.

What does hyva-cms-component do?

It guides you through creating a custom Hyvä CMS component: choosing the module, defining fields, generating components.json and the PHTML template, then running bin/magento setup:upgrade.

Which skills does it depend on?

hyva-exec-shell-cmd, hyva-create-module, hyva-cms-components-dump and hyva-render-media-image. They handle environment commands, module creation and icon selection.

Similar skills

Everything for Frontend and UI →

From the same set12

hyva-ui-component This skill applies template-based Hyvä UI components to a selected theme. It helps choose a component, review its variant and copy the required files. CX Codex +1 1,300installs hyva-render-media-image Writes responsive <picture> markup for Hyvä Theme templates through the Media view model. Useful when mobile and desktop need different image sources. CX Codex +1 1,300installs hyva-compile-tailwind-css Builds Tailwind CSS stylesheets for Hyvä themes in Magento 2. It triggers production builds or watch mode when updated utility classes fail to render on the storefront. CX Codex +1 1,300installs hyva-child-theme Builds a Hyvä child theme inside a Magento 2 project, including its frontend structure and Tailwind CSS setup. Useful when starting a custom theme. CX Codex +1 1,300installs hyva-alpine-component Guides the agent through building Alpine.js components for Hyvä themes in Magento 2 that keep working when Content Security Policy is strict. CX Codex +1 1,300installs hyva-exec-shell-cmd Identifies the Magento dev setup and selects the right command wrapper for containers or local execution. CX Codex +1 1,300installs 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. CX Codex +1 752installs hyva-cms-components-dump Dumps every Hyvä CMS component available in a Magento 2 project, merged across the modules that are switched on. CX Codex +1 744installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor