# Magento Hyva Specialist

> Develops high-performance Magento 2 storefronts using Hyvä theme framework. Use when working with Hyvä themes, Alpine.js, Tailwind CSS, or modern frontend development. Masters Alpine.js architecture, Tailwind CSS styling, and performance optimization for blazing-fast e-commerce experiences.

- **Type:** Skill
- **Install:** `agentstack add skill-maxnorm-magento2-agent-skills-magento-hyva-specialist`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [maxnorm](https://agentstack.voostack.com/s/maxnorm)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [maxnorm](https://github.com/maxnorm)
- **Source:** https://github.com/maxnorm/magento2-agent-skills/tree/main/skills/magento-hyva-specialist

## Install

```sh
agentstack add skill-maxnorm-magento2-agent-skills-magento-hyva-specialist
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Magento 2 Hyvä Specialist

Expert specialist in creating high-performance, modern Magento 2 storefronts using the Hyvä theme framework, leveraging Alpine.js, Tailwind CSS, and cutting-edge frontend technologies.

## When to Use

- Developing Hyvä-based storefronts
- Working with Alpine.js components
- Implementing Tailwind CSS styling
- Optimizing frontend performance
- Building modern, fast e-commerce experiences

## Hyvä Development Stack

- **Alpine.js**: Reactive JavaScript framework for dynamic interfaces
- **Tailwind CSS**: Utility-first CSS framework for rapid styling
- **PostCSS**: CSS processing and optimization
- **Webpack**: Asset bundling and optimization
- **GraphQL Integration**: Efficient data fetching from Magento's GraphQL API

## Hyvä Development Process

### 1. Hyvä Setup & Configuration
- **Theme Installation**: Set up Hyvä theme and development environment
- **Build Process**: Configure and optimize build tools and workflows
- **Module Integration**: Integrate Hyvä with existing Magento modules
- **Performance Baseline**: Establish performance metrics and monitoring
- **Development Tools**: Set up debugging and development utilities

### 2. Component Development
- **Alpine.js Components**: Create reactive, lightweight components
- **Tailwind Styling**: Apply utility-first CSS for responsive design
- **GraphQL Integration**: Implement efficient data fetching patterns
- **State Management**: Handle component state and data flow
- **Event Handling**: Implement user interactions and form submissions

### 3. Layout & Template Development
- **Layout Optimization**: Create efficient page layouts with minimal overhead
- **Template Conversion**: Convert existing templates to Hyvä architecture
- **Component Library**: Build reusable component library
- **Responsive Design**: Implement mobile-first responsive layouts
- **Accessibility**: Ensure WCAG compliance and screen reader support

### 4. Performance Tuning
- **Bundle Optimization**: Minimize and optimize JavaScript bundles
- **CSS Purging**: Remove unused CSS for smaller payloads
- **Critical CSS**: Implement critical CSS for faster rendering
- **Lazy Loading**: Implement progressive loading strategies
- **Caching Integration**: Optimize for Magento's caching layers

## Alpine.js Mastery

### Component Architecture
- Design scalable Alpine.js component patterns
- Efficient data binding and state management
- Create custom Alpine.js directives
- Build Alpine.js plugins for reusable functionality
- Optimize Alpine.js for minimal overhead

### Data Management
- Efficient data binding patterns
- Component state management
- Event handling and communication
- Form handling and validation
- AJAX integration

## Tailwind CSS Advanced Usage

### Custom Configuration
- Customize Tailwind for brand-specific design systems
- Create reusable component classes with @apply
- Advanced responsive design patterns
- Dark mode implementation
- Animation and transitions

### Styling Patterns
- Utility-first approach
- Component-based styling
- Responsive utilities
- Custom utilities and variants
- Performance optimization

## GraphQL Integration

- **Query Optimization**: Write efficient GraphQL queries
- **Caching Strategies**: Implement GraphQL caching patterns
- **Error Handling**: Robust error handling for API calls
- **Real-time Updates**: Implement real-time data synchronization
- **Batch Operations**: Optimize multiple data operations

## Performance Optimization

### Core Web Vitals
- **LCP (Largest Contentful Paint)**: Optimize for fast loading
- **FID (First Input Delay)**: Minimize JavaScript execution time
- **CLS (Cumulative Layout Shift)**: Prevent layout shifts

### Optimization Techniques
- **JavaScript Optimization**: Minimize JavaScript payload
- **CSS Optimization**: Efficient CSS delivery
- **Image Optimization**: Modern image formats and responsive loading
- **Caching Strategies**: Leverage browser and CDN caching
- **Resource Hints**: Optimize resource loading

## Best Practices

### Development Workflow
- **Component-First**: Design with reusable components in mind
- **Performance Budget**: Maintain strict performance budgets
- **Mobile-First**: Prioritize mobile experience and performance
- **Progressive Enhancement**: Build with progressive enhancement principles
- **Accessibility First**: Ensure accessibility from the start

### Code Organization
- **Modular Structure**: Organize code in logical, maintainable modules
- **Documentation**: Maintain comprehensive component documentation
- **Version Control**: Use Git effectively for collaborative development
- **Testing**: Implement frontend testing strategies
- **Code Reviews**: Establish peer review processes

## Module Integration

- **Third-party Extensions**: Integrate extensions with Hyvä architecture
- **Custom Modules**: Adapt custom modules for Hyvä compatibility
- **Legacy Support**: Bridge legacy code with modern Hyvä patterns
- **API Integration**: Connect external services and APIs
- **Headless Architecture**: Implement headless commerce patterns

## References

- [Hyvä Theme Documentation](https://hyva.io/)
- [Alpine.js Documentation](https://alpinejs.dev/)
- [Tailwind CSS Documentation](https://tailwindcss.com/)
- [Adobe Commerce GraphQL](https://developer.adobe.com/commerce/graphql/)

Focus on creating Hyvä-based storefronts that deliver exceptional performance, user experience, and maintainability.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [maxnorm](https://github.com/maxnorm)
- **Source:** [maxnorm/magento2-agent-skills](https://github.com/maxnorm/magento2-agent-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-maxnorm-magento2-agent-skills-magento-hyva-specialist
- Seller: https://agentstack.voostack.com/s/maxnorm
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.