hyva-child-theme — Claude Code skill: create a 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.
npx skills add hyva-themes/hyva-ai-tools --skill hyva-child-theme -a claude-codeWhat hyva-child-theme does
This skill creates a Hyvä child theme for a Magento 2 project. It collects the vendor namespace and theme name, checks available parent themes through hyva-theme-list, and creates the theme directory with registration.php, theme.xml, composer.json, and web/tailwind.
The Tailwind directory is copied without node_modules. The skill also updates hyva.config.json so Tailwind scans the parent theme paths, then calls hyva-compile-tailwind-css to install dependencies and compile CSS. Commands such as bin/magento are run through hyva-exec-shell-cmd when the environment requires a wrapper.
The setup requires hyva-exec-shell-cmd, hyva-theme-list, and hyva-compile-tailwind-css. If a Hyvä parent theme is not installed, the child theme cannot inherit its files or Tailwind configuration.
What it helps with
- create a Hyvä child theme in Magento 2
- generate the theme registration and configuration files
- find a suitable Hyvä parent theme
- copy the Tailwind setup without
node_modules - compile CSS and register the new theme
Example prompts for the agent
- Create a Hyvä child theme for vendor
AcmenamedStoreTheme. - List the available Hyvä parent themes, then use my selected one for the new theme.
- Set up
web/tailwind, compile the CSS, and runbin/magento setup:upgrade.
How to install hyva-child-theme
1Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-child-theme -a claude-code2Manually: put the files in place
~/.claude/skills/hyva-child-theme/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/hyva-child-theme/
1Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-child-theme -a codex2Manually: put the files in place
.agents/skills/hyva-child-theme/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-child-theme -a cursor2Manually: put the files in place
.cursor/skills/hyva-child-theme/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install hyva-themes/hyva-ai-tools hyva-child-theme2Manually: put the files in place
.github/skills/hyva-child-theme/SKILL.md1Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-child-theme -a gemini-cli2Platform CLI
gemini skills install https://github.com/hyva-themes/hyva-ai-tools --path skills/hyva-child-themeManually: put the files in place
.devin/skills/hyva-child-theme/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add hyva-themes/hyva-ai-tools --skill hyva-child-theme -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-child-theme
How do I install hyva-child-theme in Claude Code?
Run npx skills add hyva-themes/hyva-ai-tools --skill hyva-child-theme -a claude-code, then check ~/.claude/skills/hyva-child-theme/SKILL.md.
What does hyva-child-theme do?
It creates a Hyvä child theme in Magento 2, writes the required theme files, prepares the Tailwind directory, and builds the CSS.
Which skills does hyva-child-theme require?
It requires hyva-exec-shell-cmd, hyva-theme-list, and hyva-compile-tailwind-css for command execution, parent-theme discovery, and CSS compilation.
