# Magento Ui Component Developer

> Builds sophisticated admin interfaces and frontend components using Magento's UI Component framework. Use when creating admin grids, forms, modals, or data-driven interfaces. Masters XML configuration, KnockoutJS templates, data providers, and complex form/grid implementations.

- **Type:** Skill
- **Install:** `agentstack add skill-maxnorm-magento2-agent-skills-magento-ui-component-developer`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [maxnorm](https://agentstack.voostack.com/s/maxnorm)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [maxnorm](https://github.com/maxnorm)
- **Source:** https://github.com/maxnorm/magento2-agent-skills/tree/main/skills/magento-ui-component-developer

## Install

```sh
agentstack add skill-maxnorm-magento2-agent-skills-magento-ui-component-developer
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Magento 2 UI Component Developer

Expert specialist in creating sophisticated, data-driven interfaces using Magento's powerful UI Component framework for both admin and frontend applications.

## When to Use

- Creating admin grids and forms
- Building data-driven interfaces
- Developing custom UI components
- Implementing complex forms with validation
- Creating modal dialogs and popups
- Building reporting and analytics interfaces

## UI Component Architecture

- **Component Hierarchy**: Master parent-child component relationships and inheritance
- **XML Configuration**: Expert in component definition and configuration files
- **Data Providers**: Implement efficient data sources and collection management
- **KnockoutJS Integration**: Build reactive templates and data binding
- **Component Communication**: Handle inter-component communication and events

## Component Types

### Listing Components (Grids)
- **Data Grids**: Create advanced data grids with filtering and sorting
- **Product Grids**: Product management interfaces
- **Order Grids**: Order management systems
- **Customer Grids**: Customer data management interfaces
- **Custom Entity Grids**: Grids for custom data entities

### Form Components
- **Product Forms**: Complex product editing interfaces
- **Configuration Forms**: System configuration interfaces
- **Customer Forms**: Customer data entry forms
- **Multi-step Forms**: Wizard-style form interfaces
- **Dynamic Forms**: Forms with conditional field display

### Modal Components
- **Dynamic Modals**: Modal dialogs and popups
- **Form Modals**: Forms within modal dialogs
- **Confirmation Dialogs**: Confirmation and alert dialogs
- **Custom Modals**: Specialized modal implementations

## UI Component Development Process

### 1. Component Planning & Design
- **Requirements Analysis**: Define component functionality and user interactions
- **Data Architecture**: Plan data structure and provider requirements
- **UX Design**: Design user-friendly interfaces and workflows
- **Performance Considerations**: Plan for scalability and optimization
- **Integration Strategy**: Plan integration with existing systems

### 2. Component Structure Setup
- **XML Configuration**: Create component definition files
- **Directory Structure**: Organize component files and dependencies
- **Data Provider**: Implement data source and collection handling
- **Template Files**: Create KnockoutJS templates for rendering
- **JavaScript Modules**: Build component logic and interactions

### 3. Data Management
- **Collection Building**: Create efficient data collections
- **Filtering & Sorting**: Implement advanced filtering and sorting capabilities
- **Pagination**: Handle large datasets with pagination
- **Search Functionality**: Implement search and filter mechanisms
- **Data Validation**: Ensure data integrity and validation

### 4. User Interface Development
- **Responsive Design**: Create interfaces that work across devices
- **Accessibility**: Implement WCAG compliance and keyboard navigation
- **User Experience**: Optimize for intuitive user interactions
- **Performance**: Ensure fast loading and smooth interactions
- **Cross-browser**: Ensure compatibility across browsers

## XML Configuration

### Component Definition
```xml

    
        
            vendor_module.grid_data_source
        
    
    
        
            
                text
                ID
            
        
    

```

### Form Configuration
```xml

    
        
            
                
                    Name
                    text
                    
                        true
                    
                
            
        
    

```

## Data Providers

### Collection Data Provider
- Implement `\Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface`
- Create efficient data collections
- Handle filtering, sorting, and pagination
- Optimize database queries

### Form Data Provider
- Load and save form data
- Handle form field dependencies
- Implement data validation
- Manage form state

## KnockoutJS Templates

### Template Development
- Create KnockoutJS templates for component rendering
- Implement data binding
- Handle user interactions
- Manage component state

### Data Binding
- Two-way data binding
- Computed observables
- Observable arrays
- Custom bindings

## Best Practices

### Performance
- **Efficient Collections**: Optimize data collection queries
- **Lazy Loading**: Load data on demand
- **Caching**: Cache frequently accessed data
- **Pagination**: Implement proper pagination for large datasets

### Code Organization
- **Modular Structure**: Organize components in logical modules
- **Reusable Components**: Create reusable component patterns
- **Documentation**: Maintain clear component documentation
- **Testing**: Write tests for component functionality

### User Experience
- **Responsive Design**: Ensure mobile-friendly interfaces
- **Accessibility**: Implement WCAG compliance
- **Error Handling**: Provide clear error messages
- **Loading States**: Show appropriate loading indicators

## References

- [Adobe Commerce UI Components](https://developer.adobe.com/commerce/frontend-core/ui-components/)
- [KnockoutJS Documentation](https://knockoutjs.com/)
- [UI Component Guide](https://developer.adobe.com/commerce/frontend-core/guide/ui-components/)

Focus on creating intuitive, performant UI components that enhance user experience and productivity.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [maxnorm](https://github.com/maxnorm)
- **Source:** [maxnorm/magento2-agent-skills](https://github.com/maxnorm/magento2-agent-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-maxnorm-magento2-agent-skills-magento-ui-component-developer
- Seller: https://agentstack.voostack.com/s/maxnorm
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.