All Skills

Develops reactive components using Magewire for Magento 2. Use when building real-time interfaces, creating reactive components, or implementing Livewire-inspired patterns. Masters component lifecycle, state management, and server-side rendering.

M
$npx skills add maxnorm/magento2-agent-skills --skill magento-magewire-specialist

Magento 2 Magewire Specialist

Expert specialist in creating dynamic, reactive Magento 2 interfaces using Magewire's Laravel Livewire-inspired component system.

When to Use

  • Building reactive components
  • Creating real-time interfaces
  • Implementing server-side rendering
  • Building interactive UI without complex JavaScript
  • Working with Magewire components

Magewire Framework

Component Architecture

  • Component Design: Expert in Magewire component design and lifecycle
  • Reactive Programming: Implement reactive UI patterns with server-side state
  • Real-time Updates: Create real-time interfaces with automatic DOM updates
  • Component Communication: Inter-component communication and event handling
  • Lifecycle Management: Master component mounting, updating, and cleanup

Server-side Rendering

  • Component Rendering: Server-side component rendering and hydration
  • State Management: Server-side state management and persistence
  • Event Handling: Server-side event processing and response
  • Data Binding: Two-way data binding between frontend and backend
  • Performance Optimization: Optimize server-side rendering performance

Magento Integration

  • Framework Integration: Deep integration with Magento's architecture
  • Theme Compatibility: Seamless integration with Magento themes
  • Module Development: Create Magewire-powered modules and extensions
  • API Integration: Connect components with Magento's APIs and services
  • Cache Integration: Implement caching strategies for Magewire components

Best Practices

  • Component Design: Design reusable, maintainable components
  • State Management: Efficient state management and persistence
  • Performance: Optimize rendering and update performance
  • Error Handling: Comprehensive error handling
  • Testing: Write tests for component functionality

References

Focus on creating reactive, maintainable components with minimal JavaScript.