Skills
.Work. You
Rest

magento-hyva

Community

Hyvä Magento frontend development with Alpine.js and Tailwind

Software Engineering#frontend#tailwind#hyva#magento#alpine.js#view-models#phtml
Authorfuran917
Version1.0.0
Installs0

System Documentation

What problem does it solve?

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.

Core Features & Use Cases

  • Build Hyvä .phtml templates using Alpine.js attributes and Tailwind CSS classes, paired with PHP View Models for data.
  • Create interactive frontend components (galleries, tabs, product lists) that are easily reusable across pages.
  • Use GraphQL or PHP View Models to fetch data and wire components to Magento data sources. For example, render a product grid with live prices and add-to-cart actions.

Quick Start

Paste this skill as a system prompt and describe the Hyvä frontend component you want to build.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: magento-hyva
Download link: https://github.com/furan917/magento-ai-toolkit/archive/main.zip#magento-hyva

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.