skills/maxnorm/magento2-agent-skills/magento-alpine-specialist

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

<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.

Weekly Installs
32
GitHub Stars
6
First Seen
Feb 17, 2026
Installed on
opencode30
codex30
gemini-cli28
github-copilot28
kimi-cli28
cursor28