magento-knockout-specialist
npx machina-cli add skill maxnorm/magento2-agent-skills/magento-knockout-specialist --openclawMagento 2 KnockoutJS Specialist
Expert specialist in creating sophisticated, reactive user interfaces using Magento's KnockoutJS framework.
When to Use
- Building UI components
- Implementing MVVM patterns
- Creating interactive frontend features
- Working with Magento UI components
- Building dynamic data binding
KnockoutJS Mastery
MVVM Pattern
- Model-View-ViewModel: Expert implementation of MVVM architecture
- Observable Patterns: Advanced usage of observables, computed observables, and observable arrays
- Data Binding: Two-way data binding and declarative binding syntax
- Custom Bindings: Development of custom binding handlers
- Component Architecture: Reusable component development
Magento Integration
- UI Components: Integration with Magento's UI component framework
- RequireJS Integration: Module loading and dependency management
- Template System: KnockoutJS template integration
- Data Providers: Integration with Magento's data provider architecture
- Event System: Event handling and inter-component communication
Best Practices
- Memory Management: Efficient observable management and cleanup
- Rendering Optimization: Optimize template rendering and DOM updates
- Subscription Management: Efficient subscription handling and disposal
- Performance: Optimize for performance
- Accessibility: Ensure accessibility compliance
References
Focus on creating reactive, maintainable UI components.
Source
git clone https://github.com/maxnorm/magento2-agent-skills/blob/main/skills/magento-knockout-specialist/SKILL.mdView on GitHub Overview
Masters the development of reactive UI components for Magento 2 using KnockoutJS. This skill centers on MVVM patterns, observable data flows, two-way binding, and custom bindings to build reusable Magento UI components. It enables dynamic, accessible frontend features with clean component architecture.
How This Skill Works
The approach uses MVVM: Model≈data, View≈template, ViewModel≈bindings. Developers declare observables, computed observables, and observable arrays to drive UI; bind them with declarative data-bind syntax and create custom binding handlers for project-specific behavior. In Magento 2, this is wired into the UI Component framework, RequireJS module loading, and the template system to render data-driven components.
When to Use It
- Building UI components within Magento UI framework
- Implementing MVVM patterns for frontend features
- Creating interactive frontend experiences with dynamic data binding
- Working with Magento UI Components data providers and events
- Developing reusable, responsive KnockoutJS templates
Quick Start
- Step 1: Set up KnockoutJS in your Magento 2 UI component with RequireJS and a bound template
- Step 2: Define a ViewModel with observables, computed values, and an array; bind via data-bind
- Step 3: Create custom bindings as needed and connect to Magento data providers and events
Best Practices
- Memory management: clean up observables and subscriptions to prevent leaks
- Rendering optimization: minimize DOM updates and track by bindings
- Subscription management: dispose subscriptions when components are destroyed
- Performance: keep view models lean and leverage computed observables
- Accessibility: ensure keyboard navigation and ARIA attributes in components
Example Use Cases
- Create a product filtering panel with two-way bindings between filters and results
- Build a dynamic price calculator using computed observables and currency formatting bindings
- Implement a custom binding to format and display localized date
- Develop a reusable UI component template integrated with Magento's data providers
- Coordinate inter-component events to refresh a component when data changes
