Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
hyva-themes avatar

Hyva Ui Component

hyva-themes/hyva-ai-tools

  • 791 installs
  • 78 repo stars
  • Updated July 31, 2026
  • hyva-themes/hyva-ai-tools

hyva-ui-component is a Hyvä Magento 2 agent skill that lists, installs, and copies non-CMS Hyva UI template components into a child theme for developers customizing ecommerce storefront chrome.

About

hyva-ui-component is a hyva-themes/hyva-ai-tools skill that applies template-based non-CMS Hyva UI components to a Hyvä Magento 2 theme. It lists available components such as headers, footers, galleries, menus, and minicarts with variants, displays component README instructions, and copies files from {hyva_ui_path}/components/ into app/design/frontend/{Vendor}/{Theme}/. The skill requires companion skills hyva-exec-shell-cmd, hyva-theme-list, hyva-child-theme, and hyva-compile-tailwind-css. Developers reach for hyva-ui-component when extending a Hyvä child theme with prebuilt UI blocks instead of authoring layouts from scratch. Tailwind CSS compilation integrates through the required hyva-compile-tailwind-css dependency.

  • Lists all available non-CMS Hyva UI components and their variants from the official catalog
  • Displays the official component README with exact installation instructions
  • Copies component files from vendor/hyva-themes/hyva-ui/components/ into the active theme directory
  • Requires hyva-exec-shell-cmd, hyva-theme-list, hyva-child-theme, and hyva-compile-tailwind-css
  • Automatically refreshes the component catalog after new Hyva UI installation

Hyva Ui Component by the numbers

  • 791 all-time installs (skills.sh)
  • +29 installs in the week ending Aug 2, 2026 (Skillselion tracking)
  • Ranked #443 of 2,245 Frontend Development skills by installs in the Skillselion catalog
  • Data as of Aug 2, 2026 (Skillselion catalog sync)
npx skills add https://github.com/hyva-themes/hyva-ai-tools --skill hyva-ui-component

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs791
repo stars★ 78
Last updatedJuly 31, 2026
Repositoryhyva-themes/hyva-ai-tools ↗

How do you add Hyva UI components to Magento?

Quickly add, install, or customize non-CMS Hyva UI components such as headers, footers, galleries, menus, or minicarts into their Hyvä Magento 2 theme.

Who is it for?

Magento 2 developers on Hyvä child themes who need to add or customize non-CMS UI blocks like headers, footers, menus, or minicarts.

Skip if: Non-Magento storefronts, CMS page builder blocks, or shops not using Hyvä theme and its companion hyva-ai-tools skills.

When should I use this skill?

A developer asks to add, install, or apply a Hyva UI component such as header, footer, gallery, menu, or minicart to a Hyvä theme.

What you get

Installed Hyva UI component files in the Magento 2 child theme directory with README-guided variants and compiled Tailwind CSS.

  • installed theme component files
  • selected component variant applied

Files

SKILL.mdMarkdownGitHub ↗

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.

Step 1: Identify Theme Path

Use the hyva-theme-list skill to find existing Hyvä themes. Filter the results to only include themes in app/design/frontend/ (exclude vendor themes).

Prompt the user to select:

  • Existing Hyvä themes: List themes returned by the script as options (e.g., Example/winterWonderTheme)
  • Create new theme: Always include an option to create a new child theme

If user selects "Create new theme": 1. Use the hyva-child-theme skill to create the new theme first 2. Continue with the newly created theme path after the skill completes

If user selects an existing theme: Continue with the selected theme path: app/design/frontend/{Vendor}/{Theme}

Step 2: List or Select Component

If no component specified or user asks to list components, show only the "Non-CMS Components (Template-Based)" section from references/components.md.

Do NOT list or mention:

  • CMS components (accordion, card, categories, error-page, generic-content, order-confirmation, shortcuts, testimonial, usp, product-data/C-highlights)
  • Plugins (alpine-collapse, splidejs, sticky-header, tailwind-v3-design-tokens, tailwind-v4)

These are internal dependencies or require the CMS Tailwind JIT compiler and are not applicable for direct installation via this skill.

Step 3: Show Variants

Variants: A=Basic, B=Enhanced, C=Advanced, D=Specialized. List with: ls {hyva_ui_path}/components/{component}/

Step 4: Read Component README

Always read {hyva_ui_path}/components/{component}/{variant}/README.md before copying. Present to user: dependencies, configuration options, special requirements.

Step 5: Copy Component Files

Before copying, check which destination files already exist to track created vs updated:

# List source files
find {hyva_ui_path}/components/{component}/{variant}/src -type f

# For each source file, check if destination exists
# e.g., for src/Magento_Catalog/templates/product/view/gallery.phtml
# check: {theme_path}/Magento_Catalog/templates/product/view/gallery.phtml

Track each file as either:

  • created: Destination file did not exist before copy
  • updated: Destination file already existed (will be overwritten)

Then copy:

cp -r {hyva_ui_path}/components/{component}/{variant}/src/* {theme_path}/

The src/ directory contains Magento module folders (Magento_Theme/, Magento_Catalog/, etc.) that map directly to theme structure. For existing layout XML files, merge content rather than overwriting.

Step 5.5: Add XML Configuration Options

Check if README contains XML configuration (look for <var name=", etc/view.xml).

If found: 1. Extract the first XML block containing <var name= elements with default values 2. Identify the module attribute (e.g., module="Magento_Catalog") 3. Add to {theme_path}/etc/view.xml:

  • If file doesn't exist: Create with full <view> structure
  • If <vars module="..."> exists: Add <var> elements inside it
  • If section missing: Add new <vars module="..."> before </view>

4. Notify: "Added configuration options to {theme_path}/etc/view.xml with default values."

Preserve existing view.xml content and keep XML comments from README.

Step 6: Handle Dependencies

Check README for dependencies and install them automatically (do not ask the user to select plugins):

  • Plugin dependencies: Copy required files from {hyva_ui_path}/plugins/{plugin}/src/ (e.g., splidejs for gallery/D-splide)
  • Component dependencies: Apply dependent components first
  • External packages: e.g., composer require hyva-themes/magento2-hyva-payment-icons

Step 7: Ask to recompile styles

  • Rebuild Tailwind: Always ask: "Do you need to recompile Tailwind CSS styles?" Never automatically build — an external tool may already be handling this. If the user wants to compile, use the hyva-compile-tailwind-css skill with the target theme.

Step 8: Output Summary

After applying all changes, output a summary of modifications:

8.1: List Modified Files

Display all files that were created or modified during this component installation. Use the tracking from Step 5 to label each file correctly:

  • (created): File did not exist before and was newly created
  • (updated): File already existed and was overwritten
Modified files:
  - {theme_path}/Magento_Catalog/templates/product/view/gallery.phtml (updated)
  - {theme_path}/Magento_Theme/templates/html/header.phtml (created)
  - {theme_path}/etc/view.xml (updated)

8.2: XML Configuration Table

If XML configuration was added to {theme_path}/etc/view.xml, parse the XML block from the README and display a table of options:

# Extract the XML config block from README and parse it
php <skill_path>/scripts/parse_readme_xml.php --format=table < xml_block.txt

The table shows each option with columns:

  • Option: The full option path without a common prefix (e.g., magnifier.enable)
  • Value: The default value configured
  • Description: Explanatory text from the XML comment

Example output (common prefix like gallery. is automatically stripped):

Option               | Value      | Description
---------------------+------------+---------------------------------------------------
nav                  | thumbs     | Gallery navigation style (false/thumbs/counter)
magnifier.enable     | false      | Turn on/off magnifier (true/false)

For markdown output (e.g., when creating documentation), use --format=md.

Step 9: Final steps

1. Review copied templates for store-specific customization

Quick Reference

{hyva_ui_path}/components/{component}/{variant}/
├── README.md       # Instructions
├── media/          # Preview images
└── src/            # Files to copy to theme

See references/components.md for the full component catalog (only show non-CMS section to users).

<!-- Copyright © Hyvä Themes https://hyva.io. All rights reserved. Licensed under OSL 3.0 -->

Related skills

vercel-labsVercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kvercel-labsVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6kshadcnShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120kxixu-meDevelop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72leonxlnxMinimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kleonxlnxImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k

FAQ

Where does hyva-ui-component copy files?

hyva-ui-component copies component files from {hyva_ui_path}/components/ into the Magento theme path app/design/frontend/{Vendor}/{Theme}/ for non-CMS Hyva UI blocks.

Which skills does hyva-ui-component require?

hyva-ui-component requires hyva-exec-shell-cmd, hyva-theme-list, hyva-child-theme, and hyva-compile-tailwind-css companion skills to list themes, run shell commands, and compile Tailwind CSS.

Frontend Developmentfrontendintegrations
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.