magento-magewire-specialist
Scannednpx machina-cli add skill maxnorm/magento2-agent-skills/magento-magewire-specialist --openclawFiles (1)
SKILL.md
2.3 KB
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.
Source
git clone https://github.com/maxnorm/magento2-agent-skills/blob/main/skills/magento-magewire-specialist/SKILL.mdView on GitHub Overview
Magento 2 Magewire Specialist builds dynamic, reactive interfaces using Magewire's Livewire-inspired component system. It enables real-time updates, server-side rendering, and clean two-way data binding with Magento APIs, reducing JavaScript complexity.
How This Skill Works
Developers design Magewire components with a PHP-based lifecycle, where server-side state drives the UI. The framework renders components server-side, hydrates on the client, and uses event handling and inter-component communication to push real-time updates.
When to Use It
- Building reactive components
- Creating real-time interfaces
- Implementing server-side rendering
- Building interactive UI without complex JavaScript
- Working with Magewire components
Quick Start
- Step 1: Install Magewire for Magento 2 and register Magewire components in your module
- Step 2: Create a Magewire component class with lifecycle methods (mount, update, render)
- Step 3: Bind frontend inputs to server-side state and enable server-side rendering for initial render
Best Practices
- Component Design: Create modular, reusable Magewire components.
- State Management: Centralize and persist server-side state.
- Performance: Optimize rendering and leverage SSR caching.
- Error Handling: Implement robust error boundaries and graceful fallbacks.
- Testing: Write unit and integration tests for Magewire components.
Example Use Cases
- Reactive product filters on category pages with real-time results
- Admin dashboard displaying live order statuses and inventory changes
- Live cart updates and checkout prompts without full page reloads
- SSR-enabled content blocks in Magento CMS powered by Magewire
- Theme-aware Magewire components that adapt to storefronts and Magento themes
Frequently Asked Questions
Add this skill to your agents
