Magento alpine specialist

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

A collection of specialized agent skills for Magento 2 development, designed to provide domain expertise across all aspects of Magento/Adobe Commerce development workflows.

Install

npx -y skills add maxnorm/magento2-agent-skills --skill magento-alpine-specialist

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

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

2.1 KB, as published. Nobody here has run it

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.