Create Hyvä templates with Alpine.js, Tailwind CSS, and PHP View Models.
npx skills add https://github.com/furan917/magento-ai-toolkit --skill magento-hyva
Please help me install this Agent Skill. Skill: magento-hyva Source: https://github.com/furan917/magento-ai-toolkit/tree/main/skills/magento-hyva Command: npx skills add https://github.com/furan917/magento-ai-toolkit --skill magento-hyva
Magento storefronts often require Hyvä-compliant frontends that leverage Alpine.js, Tailwind CSS, and lightweight View Models. This skill provides a guided pattern to build Hyvä templates and interactive components without relying on legacy KnockoutJS or RequireJS.
.phtml templates using Alpine.js attributes and Tailwind CSS classes, paired with PHP View Models for data.Paste this skill as a system prompt and describe the Hyvä frontend component you want to build.
High-intent search queries and answers about installing and using this skill.
To build Hyvä Magento frontend templates, you create .phtml files using Alpine.js attributes for interactivity and Tailwind CSS classes for styling, paired with PHP View Models to supply data. This approach avoids legacy KnockoutJS and RequireJS dependencies.
The best way to fetch data in Hyvä Magento components without RequireJS is using PHP View Models or GraphQL. You wire these data sources directly into your Alpine.js components to render dynamic content like live product prices and add-to-cart actions.
No, Hyvä themes avoid legacy KnockoutJS UI components and RequireJS. Instead, you build interactive Magento storefront features using Alpine.js for frontend reactivity and Tailwind CSS for styling within .phtml templates.
To ensure secure output escaping in Hyvä Magento .phtml templates, you use the built-in $escaper object. Following Hyvä best practices requires escaping all dynamically generated HTML output to prevent XSS vulnerabilities.
You create an interactive product gallery by building a Hyvä .phtml template with Alpine.js components handling user interactions and Tailwind CSS for layout. Data is supplied via PHP View Models or GraphQL to display product images and variations.
Use GraphQL instead of PHP View Models in Hyvä Magento development when you need to fetch data asynchronously from the client-side via Alpine.js, whereas PHP View Models are ideal for preparing server-side data before rendering the .phtml template.
Happy-HorizonCompile Tailwind CSS for Hyvä themes in Magento 2.
InchooCreate Hyvä child themes and Alpine.js components in Magento 2.
maxnormBuild reactive Magento 2 frontends with Alpine.js components and Magento REST API data binding.
OrcaQubitsDevelop and customize Magento 2 frontend components using layout XML, PHTML templates, and JavaScript modules.