hyva-alpine-component

What it does

This skill provides a library of pre-built, reusable UI components designed specifically for the Hyva theme using Alpine.js. It enables developers to rapidly integrate interactive frontend elements like modals, accordions, and carousels into their Magento 2 stores without writing custom JavaScript from scratch.

When to use it

• You need to add interactive UI elements such as dropdowns or lightboxes to a Hyva-based storefront quickly.
• Your development team wants to reduce code duplication by leveraging shared component logic across multiple pages.
• You are building a custom theme extension and require standardized behavior for common user interface patterns.

Key capabilities

• Pre-built Alpine.js components tailored for the Hyva theme architecture.
• Ready-to-use interactive widgets including modals, tabs, and sliders.
• Simplifies frontend development by abstracting complex JavaScript logic into reusable blocks.

Example prompts

• "Install the hyva-alpine-component skill to add a product quick-view modal to my store."
• "Use this component library to create an accordion section for FAQ items on the contact page."
• "Integrate a carousel slider using the available Hyva Alpine components for the homepage banner."

Tips & gotchas

Ensure your Magento 2 installation is running the Hyva theme, as these components are not compatible with standard Luma or default themes. Always verify that your version of Alpine.js matches the requirements specified in the component documentation to prevent runtime errors.