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.
npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-component -a claude-codeWhat 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.jsonwithout 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_cardwith fields for a heading and an image - Add a new CMS component to the
Acme_CmsComponentsmodule - 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-code2Manually: put the files in place
~/.claude/skills/hyva-cms-component/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/hyva-cms-component/
1Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-component -a codex2Manually: put the files in place
.agents/skills/hyva-cms-component/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-component -a cursor2Manually: put the files in place
.cursor/skills/hyva-cms-component/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install hyva-themes/hyva-ai-tools hyva-cms-component2Manually: put the files in place
.github/skills/hyva-cms-component/SKILL.md1Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-component -a gemini-cli2Platform CLI
gemini skills install https://github.com/hyva-themes/hyva-ai-tools --path skills/hyva-cms-componentManually: put the files in place
.devin/skills/hyva-cms-component/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-cms-component -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
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.