Agent skill
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.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/magento-alpine-specialist
SKILL.md
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
Focus on creating lightweight, reactive components that enhance user experience.
Didn't find tool you were looking for?