skills.rest
caravanglory
caravangloryCOMMUNITY
Explore all skills by this author →
GitHub

Hyva Module Compatibility

Adapt Magento 2 Luma modules to Hyva storefronts with Alpine.js and Tailwind.

2|3|Updated Mar 19, 2026
Search Tags:#compatibility#tailwind#hyva#magento#alpinejs#viewmodels
One-click install
npx skills add https://github.com/caravanglory/magehub --skill hyva-module-compatibility-caravanglory
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Hyva Module Compatibility
Source: https://github.com/caravanglory/magehub/tree/main/skills/hyva/hyva-module-compatibility
Command: npx skills add https://github.com/caravanglory/magehub --skill hyva-module-compatibility-caravanglory

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps convert Magento 2 modules that were built for Luma into storefront-compatible Hyva implementations, removing frontend dependencies that break when RequireJS, Knockout, or LESS are not available.

Core Features & Use Cases

  • Frontend migration guidance: Replace Luma-only templates, layout blocks, and JavaScript behaviors with Hyva-compatible Alpine.js and Tailwind patterns.
  • Architecture choices: Decide whether changes belong in a dedicated compatibility module, a theme override, or the base module while preserving maintainability.
  • Safer data handling: Move dynamic storefront data into ViewModels and cache-safe patterns so private content and customer-specific values do not leak into full-page cache.
  • Use case: A Magento extension with Knockout widgets and RequireJS dependencies needs to work on a Hyva storefront without breaking the original Luma path.

Quick Start

Adapt the Magento module for Hyva by replacing Luma-specific frontend code with Hyva-compatible templates, ViewModels, Tailwind styling, and layout overrides.

Frequently Asked Questions about Hyva Module Compatibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a Magento 2 module compatible with Hyva storefront?▼

To make a Magento 2 module compatible with Hyva, you must replace Luma-specific frontend code like RequireJS and Knockout with Alpine.js and Tailwind patterns. This involves migrating templates, layout blocks, and JavaScript behaviors into Hyva-compatible implementations.

Why does my Magento extension break on a Hyva storefront?▼

Magento extensions break on Hyva because Luma-oriented modules depend on RequireJS, Knockout, and LESS, which Hyva does not load. Adapting the module involves replacing these dependencies with Alpine.js and Tailwind styling to restore frontend functionality.

How do I handle dynamic data in Magento 2 Hyva modules without breaking full-page cache?▼

To handle dynamic data safely in Hyva modules without breaking full-page cache, move storefront data into ViewModels and cache-safe patterns. This prevents customer-specific values and private content from leaking into cached pages.

Should I use a compatibility module or theme override when migrating Magento 2 extensions to Hyva?▼

When migrating Magento extensions to Hyva, you can choose between a dedicated compatibility module, a theme override, or modifying the base module. A compatibility module preserves maintainability and keeps the original Luma path intact.

Do I need Alpine.js and ViewModels to convert Luma templates for Hyva?▼

Yes, converting Luma templates for Hyva requires Alpine.js replacements and ViewModels. Hyva uses Alpine.js for interactive JavaScript behaviors and ViewModels to supply dynamic data cache-safely, replacing outdated Knockout widgets.

Related Skills

Explore More Software Engineering Skills→
OrcaQubitsOrcaQubits
35

magento-frontend

Develop and customize Magento 2 frontend components using layout XML, PHTML templates, and JavaScript modules.

Official
Intermediate
InchooInchoo
18

hyva-ui-component-css

Develop themeable Hyva Magento 2 UI components with Tailwind CSS and Alpine.js.

Official
Intermediate
InchooInchoo
18

Hyvä Theme: Setup & Alpine.js Components

Create Hyvä child themes and Alpine.js components in Magento 2.

Official
Intermediate
magewirephpmagewirephp
262

magewire-theming

Create Magento 2 theme compatibility modules integrating Magewire with Hyvä, Luma, Breeze, or Backend themes.

Community
Advanced