Claude-skill-registry-data 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.
install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry-data
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry-data "$T" && mkdir -p ~/.claude/skills && cp -r "$T/data/magento-alpine-specialist" ~/.claude/skills/majiayu000-claude-skill-registry-data-magento-alpine-specialist && rm -rf "$T"
manifest:
data/magento-alpine-specialist/SKILL.mdsource content
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
<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.