magento-alpine-specialist
npx machina-cli add skill maxnorm/magento2-agent-skills/magento-alpine-specialist --openclawMagento 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
<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.
Source
git clone https://github.com/maxnorm/magento2-agent-skills/blob/main/skills/magento-alpine-specialist/SKILL.mdView on GitHub Overview
Magento 2 Alpine.js Specialist crafts modern, reactive UIs using Alpine.js's declarative approach. It emphasizes lightweight, modular components compatible with Hyvä themes, Magento REST/GraphQL APIs, and SEO-friendly interfaces. This role improves user experience by delivering fast, interactive frontend features with minimal JavaScript workload.
How This Skill Works
Technically, it builds modular Alpine.js components using x-data for state, and directives like x-show, x-bind, and @click for reactive behavior. Components are designed to be lightweight, cache-friendly, and integrated with Magento themes and the Hyvä framework, while connecting to REST/GraphQL APIs for dynamic data.
When to Use It
- Building Alpine.js components
- Working with Hyvä themes
- Creating reactive UI components
- Implementing lightweight JavaScript solutions
- Building interactive frontend features
Quick Start
- Step 1: Create a lightweight Alpine.js component with x-data and initial state
- Step 2: Add interactivity via directives like @click, x-show, and x-transition
- Step 3: Connect to Magento data via REST/GraphQL and ensure Hyvä theme compatibility and accessibility
Best Practices
- Keep components lightweight and performant
- Use reactive state management effectively
- Implement proper event handling
- Optimize for performance
- Ensure accessibility compliance
Example Use Cases
- Toggle panels with a lightweight Alpine.js component using x-data and x-show
- Hyvä-themed product quick view powered by Alpine.js for fast interactions
- Reactive cart updates with API data from Magento REST/GraphQL
- Accessible, lazy-loaded widgets that degrade gracefully for SEO
- Cache-friendly Alpine.js components that render server-side with Magento
