Skip to main content
affpapa.org
RU EN
skill CX Codex

hyva-ui-component — Claude Code skill: use and install

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.

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

What hyva-ui-component does

The skill works with Hyvä UI’s non-CMS components, including headers, footers, galleries, menus and minicarts. It checks vendor/hyva-themes/hyva-ui/components/, lists available variants and reads the selected component’s README before making changes.

It then locates a theme under app/design/frontend/, copies files from the component’s src/ directory and records which files were created or updated. XML options go into etc/view.xml, while existing layout XML must be merged instead of replaced. Component and plugin dependencies are handled before the files are copied.

Hyva UI must be available at vendor/hyva-themes/hyva-ui or at a custom path. If it is missing, the workflow offers a Composer installation, a custom extraction path or a download from the Hyvä account area. Tailwind compilation is not automatic; the skill asks before invoking it.

What it helps with

  • list available non-CMS Hyvä UI components
  • choose a component variant for a Hyvä theme
  • copy component files into the theme
  • add XML options to etc/view.xml
  • track created and updated files

Example prompts for the agent

  • Add a Hyvä UI gallery to the existing theme and show its available variants.
  • Install the header component into a new Hyvä child theme.
  • Check dependencies for minicart, copy its files and report the changes.

How to install hyva-ui-component

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

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

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

Questions about hyva-ui-component

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

Run npx skills add hyva-themes/hyva-ai-tools --skill hyva-ui-component -a claude-code, then check ~/.claude/skills/hyva-ui-component/SKILL.md.

What does hyva-ui-component do?

It selects a non-CMS Hyvä UI component and variant, reads the component instructions, copies its files into a Hyvä theme and reports the changes.

What does hyva-ui-component require?

Hyvä UI must be available at vendor/hyva-themes/hyva-ui or a custom path. The workflow also uses hyva-exec-shell-cmd, hyva-theme-list, hyva-child-theme and hyva-compile-tailwind-css for related tasks.

Similar skills

All skills for Agent setup: memory, context, orchestration →
setup-matt-pocock-skills Matt Pocock This skill configures a repository for Matt Pocock's engineering skills by setting its issue tracker, triage labels, and domain docs layout. Run it before using the other skills. 1,052,851installs ask-matt Matt Pocock Routes you to the right Matt Pocock skill or flow for the task at hand. Use it when you need a starting point for a feature, prototype, incoming issue, or hard bug. 766,587installs to-tickets Matt Pocock Turns a plan, spec, or conversation into small end-to-end tickets with explicit blockers. Use it to agree on the work breakdown before tickets go to a tracker. 711,230installs writing-plans Jesse Vincent This skill turns requirements for a multi-step task into an implementation plan before code changes begin. It helps when another engineer needs exact files, interfaces, and checks. CX Codex 282,859installs caveman-review JuliusBrussee Turns code review comments into one line per finding: location, problem, fix. Useful when a diff or PR needs a fast pass without the filler. CX Codex +1 411,800installs caveman-compress JuliusBrussee Compresses CLAUDE.md, todo lists, and other prose files into a shorter format while retaining a readable backup. CX Codex +1 411,500installs

From the same set12

hyva-create-module Scaffolds a Magento 2 module in app/code/ with registration.php, composer.json and etc/module.xml. Useful when you need a new module without copying boilerplate by hand. CX Codex +1 1,300installs hyva-theme-list Walks a Magento 2 project and prints the path of every Hyvä theme it finds. Useful when the agent has to know which theme it is editing. CX Codex +1 1,300installs hyva-playwright-test Guides writing Playwright end-to-end tests for Hyvä Magento storefronts using Alpine.js. It resolves locator conflicts caused by hidden DOM elements. 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

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

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