Hyva Ui Component

This handles the installation of Hyva UI components into your Hyvä theme by copying template files from the vendor directory into your theme's structure. It walks you through selecting a theme (or creating a child theme), picking a component variant (A through D), and merging the files while tracking what gets created versus updated. The workflow is careful about dependencies, automatically installing required plugins and parsing README instructions before applying changes. It even extracts XML configuration blocks and adds them to your view.xml with sensible defaults. One nice touch is that it never auto-compiles Tailwind, assuming you might have your own build process running. Basically saves you from manually copying files around and missing dependencies.

skills.sh installs: 1.3K
GitHub stars: 85
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add hyva-themes/hyva-ai-tools --skill hyva-ui-component --agent claude-code

Installs into .claude/skills of the current project.

Files

Hyva UI Component

Applies Hyva UI template-based (non-CMS) components to a Hyvä theme by copying files from {hyva_ui_path}/components/ to app/design/frontend/{Vendor}/{Theme}/.

Path variable: {hyva_ui_path} = vendor/hyva-themes/hyva-ui (default) or user-provided custom path.

Command execution: For any commands that need to run inside the development environment (e.g., bin/magento commands), use the hyva-exec-shell-cmd skill to detect the environment and determine the appropriate command wrapper.

Step 0: Verify Hyva UI Installation

ls vendor/hyva-themes/hyva-ui/components/ 2>/dev/null

If NOT found, offer options: (A) User provides custom extraction path, (B) composer require --dev hyva-themes/hyva-ui, (C) Download from https://hyva.io/my-account/my-downloads/

After install, refresh catalog: <skill_path>/scripts/refresh_catalog.sh {hyva_ui_path} <skill_path>/references/components.md

Where <skill_path> is the directory containing this SKILL.md file.