# 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.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1300 installs · ★ 85
- Author: hyva-themes
- License: OSL-3.0 · policy=link-only · description only; the file stays with the author
- Source: https://github.com/hyva-themes/hyva-ai-tools/tree/HEAD/skills/hyva-child-theme/SKILL.md
- Updated: 2026-07-31
- HTML: https://affpapa.org/en/nevibecode/skills/hyva-child-theme

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-child-theme -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/hyva-child-theme/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/hyva-child-theme/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-child-theme -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/hyva-child-theme/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-child-theme -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/hyva-child-theme/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install hyva-themes/hyva-ai-tools hyva-child-theme
```

2. **Manually: put the files in place**
- File: `.github/skills/hyva-child-theme/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-child-theme -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/hyva-themes/hyva-ai-tools --path skills/hyva-child-theme
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/hyva-child-theme/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add hyva-themes/hyva-ai-tools --skill hyva-child-theme -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/hyva-themes/hyva-ai-tools/tree/HEAD/skills/hyva-child-theme/SKILL.md

## When to use it
- 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
- Create a Hyvä child theme for vendor `Acme` named `StoreTheme`.
- List the available Hyvä parent themes, then use my selected one for the new theme.
- Set up `web/tailwind`, compile the CSS, and run `bin/magento setup:upgrade`.

## Similar
- [frontend-design](https://affpapa.org/en/nevibecode/skills/frontend-design.md) — skill · 1025790 installs
- [design-taste-frontend](https://affpapa.org/en/nevibecode/skills/design-taste-frontend.md) — skill · 678700 installs
- [prototype](https://affpapa.org/en/nevibecode/skills/prototype.md) — skill · 986201 installs
- [hyperframes](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes.md) — skill · 1200000 installs
- [hyperframes-cli](https://affpapa.org/en/nevibecode/skills/heygen-com-hyperframes-cli.md) — skill · 1300000 installs
- [webapp-testing](https://affpapa.org/en/nevibecode/skills/webapp-testing.md) — skill · 186758 installs

From the same set: [hyva-themes/hyva-ai-tools](https://affpapa.org/en/nevibecode/by/hyva-themes/hyva-ai-tools.md) — 12 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md