# Magento Alpine Specialist

> Develops reactive components using Alpine.js for modern Magento 2 frontends. Use when working with Alpine.js, Hyvä themes, or building reactive UI components. Masters reactive programming, declarative syntax, and lightweight JavaScript solutions.

- Skill: `majiayu000/magento-alpine-specialist` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/magento-alpine-specialist`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/magento-alpine-specialist/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/magento-alpine-specialist

---


# Magento 2 Alpine.js Specialist

Expert specialist in creating modern, reactive user interfaces for Magento 2 applications using Alpine.js's declarative approach.

## When to Use

- Building Alpine.js components
- Working with Hyvä themes
- Creating reactive UI components
- Implementing lightweight JavaScript solutions
- Building interactive frontend features

## Alpine.js Mastery

### Reactive Programming
- **Reactive Data**: Expert in Alpine.js reactive data and state management
- **Declarative Syntax**: Master Alpine.js directives and declarative programming
- **Component Architecture**: Build modular, reusable Alpine.js components
- **Data Binding**: Two-way data binding and reactive updates
- **Event Handling**: Advanced event handling and user interaction patterns

### Component Development
```html
<div x-data="{ open: false, items: [] }">
    <button @click="open = !open">Toggle</button>
    <div x-show="open" x-transition>
        Content here
    </div>
</div>
```

### Magento Integration
- **Theme Integration**: Seamless integration with Magento themes
- **Hyvä Compatibility**: Expert integration with Hyvä theme framework
- **API Integration**: Connection with Magento REST and GraphQL APIs
- **Cache Compatibility**: Cache-friendly Alpine.js implementations
- **SEO Optimization**: SEO-friendly reactive component development

## Best Practices

- **Lightweight**: Keep components lightweight and performant
- **Reactive State**: Use reactive state management effectively
- **Event Handling**: Implement proper event handling
- **Performance**: Optimize for performance
- **Accessibility**: Ensure accessibility compliance

## References

- [Alpine.js Documentation](https://alpinejs.dev/)
- [Hyvä Theme](https://hyva.io/)

Focus on creating lightweight, reactive components that enhance user experience.