{"id":"9961a0f5-91c8-4be4-9a7a-e7a028a44da0","shortId":"y6xmFX","kind":"skill","title":"magento-ui-component-developer","tagline":"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.","description":"# Magento 2 UI Component Developer\n\nExpert specialist in creating sophisticated, data-driven interfaces using Magento's powerful UI Component framework for both admin and frontend applications.\n\n## When to Use\n\n- Creating admin grids and forms\n- Building data-driven interfaces\n- Developing custom UI components\n- Implementing complex forms with validation\n- Creating modal dialogs and popups\n- Building reporting and analytics interfaces\n\n## UI Component Architecture\n\n- **Component Hierarchy**: Master parent-child component relationships and inheritance\n- **XML Configuration**: Expert in component definition and configuration files\n- **Data Providers**: Implement efficient data sources and collection management\n- **KnockoutJS Integration**: Build reactive templates and data binding\n- **Component Communication**: Handle inter-component communication and events\n\n## Component Types\n\n### Listing Components (Grids)\n- **Data Grids**: Create advanced data grids with filtering and sorting\n- **Product Grids**: Product management interfaces\n- **Order Grids**: Order management systems\n- **Customer Grids**: Customer data management interfaces\n- **Custom Entity Grids**: Grids for custom data entities\n\n### Form Components\n- **Product Forms**: Complex product editing interfaces\n- **Configuration Forms**: System configuration interfaces\n- **Customer Forms**: Customer data entry forms\n- **Multi-step Forms**: Wizard-style form interfaces\n- **Dynamic Forms**: Forms with conditional field display\n\n### Modal Components\n- **Dynamic Modals**: Modal dialogs and popups\n- **Form Modals**: Forms within modal dialogs\n- **Confirmation Dialogs**: Confirmation and alert dialogs\n- **Custom Modals**: Specialized modal implementations\n\n## UI Component Development Process\n\n### 1. Component Planning & Design\n- **Requirements Analysis**: Define component functionality and user interactions\n- **Data Architecture**: Plan data structure and provider requirements\n- **UX Design**: Design user-friendly interfaces and workflows\n- **Performance Considerations**: Plan for scalability and optimization\n- **Integration Strategy**: Plan integration with existing systems\n\n### 2. Component Structure Setup\n- **XML Configuration**: Create component definition files\n- **Directory Structure**: Organize component files and dependencies\n- **Data Provider**: Implement data source and collection handling\n- **Template Files**: Create KnockoutJS templates for rendering\n- **JavaScript Modules**: Build component logic and interactions\n\n### 3. Data Management\n- **Collection Building**: Create efficient data collections\n- **Filtering & Sorting**: Implement advanced filtering and sorting capabilities\n- **Pagination**: Handle large datasets with pagination\n- **Search Functionality**: Implement search and filter mechanisms\n- **Data Validation**: Ensure data integrity and validation\n\n### 4. User Interface Development\n- **Responsive Design**: Create interfaces that work across devices\n- **Accessibility**: Implement WCAG compliance and keyboard navigation\n- **User Experience**: Optimize for intuitive user interactions\n- **Performance**: Ensure fast loading and smooth interactions\n- **Cross-browser**: Ensure compatibility across browsers\n\n## XML Configuration\n\n### Component Definition\n```xml\n<listing xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" \n         xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Ui:etc/ui_configuration.xsd\">\n    <argument name=\"data\" xsi:type=\"array\">\n        <item name=\"js_config\" xsi:type=\"array\">\n            <item name=\"provider\" xsi:type=\"string\">vendor_module.grid_data_source</item>\n        </item>\n    </argument>\n    <columns name=\"columns\">\n        <column name=\"id\">\n            <settings>\n                <filter>text</filter>\n                <label translate=\"true\">ID</label>\n            </settings>\n        </column>\n    </columns>\n</listing>\n```\n\n### Form Configuration\n```xml\n<form xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" \n      xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Ui:etc/ui_configuration.xsd\">\n    <fieldset name=\"general\">\n        <field name=\"name\">\n            <argument name=\"data\" xsi:type=\"array\">\n                <item name=\"config\" xsi:type=\"array\">\n                    <item name=\"label\" xsi:type=\"string\" translate=\"true\">Name</item>\n                    <item name=\"dataType\" xsi:type=\"string\">text</item>\n                    <item name=\"validation\" xsi:type=\"array\">\n                        <item name=\"required-entry\" xsi:type=\"boolean\">true</item>\n                    </item>\n                </item>\n            </argument>\n        </field>\n    </fieldset>\n</form>\n```\n\n## Data Providers\n\n### Collection Data Provider\n- Implement `\\Magento\\Framework\\View\\Element\\UiComponent\\DataProvider\\DataProviderInterface`\n- Create efficient data collections\n- Handle filtering, sorting, and pagination\n- Optimize database queries\n\n### Form Data Provider\n- Load and save form data\n- Handle form field dependencies\n- Implement data validation\n- Manage form state\n\n## KnockoutJS Templates\n\n### Template Development\n- Create KnockoutJS templates for component rendering\n- Implement data binding\n- Handle user interactions\n- Manage component state\n\n### Data Binding\n- Two-way data binding\n- Computed observables\n- Observable arrays\n- Custom bindings\n\n## Best Practices\n\n### Performance\n- **Efficient Collections**: Optimize data collection queries\n- **Lazy Loading**: Load data on demand\n- **Caching**: Cache frequently accessed data\n- **Pagination**: Implement proper pagination for large datasets\n\n### Code Organization\n- **Modular Structure**: Organize components in logical modules\n- **Reusable Components**: Create reusable component patterns\n- **Documentation**: Maintain clear component documentation\n- **Testing**: Write tests for component functionality\n\n### User Experience\n- **Responsive Design**: Ensure mobile-friendly interfaces\n- **Accessibility**: Implement WCAG compliance\n- **Error Handling**: Provide clear error messages\n- **Loading States**: Show appropriate loading indicators\n\n## References\n\n- [Adobe Commerce UI Components](https://developer.adobe.com/commerce/frontend-core/ui-components/)\n- [KnockoutJS Documentation](https://knockoutjs.com/)\n- [UI Component Guide](https://developer.adobe.com/commerce/frontend-core/guide/ui-components/)\n\nFocus on creating intuitive, performant UI components that enhance user experience and productivity.","tags":["magento","component","developer","magento2","agent","skills","maxnorm","agent-skills"],"capabilities":["skill","source-maxnorm","skill-magento-ui-component-developer","topic-agent-skills","topic-magento2"],"categories":["magento2-agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/maxnorm/magento2-agent-skills/magento-ui-component-developer","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add maxnorm/magento2-agent-skills","source_repo":"https://github.com/maxnorm/magento2-agent-skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 9 github stars · SKILL.md body (6,448 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:08:50.666Z","embedding":null,"createdAt":"2026-05-07T20:44:08.505Z","updatedAt":"2026-05-18T19:08:50.666Z","lastSeenAt":"2026-05-18T19:08:50.666Z","tsv":"'/)':592 '/commerce/frontend-core/guide/ui-components/)':598 '/commerce/frontend-core/ui-components/)':587 '1':252 '2':43,295 '3':334 '4':371 'access':383,520,564 'across':381,409 'admin':8,22,65,73 'adob':581 'advanc':157,346 'alert':241 'analysi':257 'analyt':99 'applic':68 'appropri':577 'architectur':103,265 'array':499 'best':502 'bind':139,482,490,495,501 'browser':406,410 'build':6,77,96,134,329,338 'cach':517,518 'capabl':350 'child':109 'clear':546,571 'code':529 'collect':130,318,337,342,429,443,506,509 'commerc':582 'communic':141,146 'compat':408 'complex':39,87,192 'complianc':386,567 'compon':4,12,17,45,61,85,102,104,110,118,140,145,149,152,189,224,249,253,259,296,302,308,330,413,478,487,534,539,542,547,553,584,594,605 'comput':496 'condit':220 'configur':33,115,121,196,199,300,412,422 'confirm':237,239 'consider':282 'creat':21,50,72,91,156,301,322,339,377,440,474,540,601 'cross':405 'cross-brows':404 'custom':83,174,176,180,185,201,203,243,500 'data':28,36,53,79,123,127,138,154,158,177,186,204,264,267,312,315,335,341,364,367,417,427,430,442,453,459,465,481,489,494,508,514,521 'data-driven':27,52,78 'databas':450 'dataprovid':438 'dataproviderinterfac':439 'dataset':354,528 'defin':258 'definit':119,303,414 'demand':516 'depend':311,463 'design':255,273,274,376,558 'develop':5,46,82,250,374,473 'developer.adobe.com':586,597 'developer.adobe.com/commerce/frontend-core/guide/ui-components/)':596 'developer.adobe.com/commerce/frontend-core/ui-components/)':585 'devic':382 'dialog':93,228,236,238,242 'directori':305 'display':222 'document':544,548,589 'driven':29,54,80 'dynam':216,225 'edit':194 'effici':126,340,441,505 'element':436 'enhanc':607 'ensur':366,398,407,559 'entiti':181,187 'entri':205 'error':568,572 'event':148 'exist':293 'experi':391,556,609 'expert':47,116 'fast':399 'field':221,462 'file':122,304,309,321 'filter':161,343,347,362,445 'focus':599 'form':24,76,88,188,191,197,202,206,210,214,217,218,231,233,421,452,458,461,468 'form/grid':40 'framework':18,62,434 'frequent':519 'friend':277,562 'frontend':11,67 'function':260,358,554 'grid':23,74,153,155,159,165,170,175,182,183 'guid':595 'handl':142,319,352,444,460,483,569 'hierarchi':105 'id':420 'implement':41,86,125,247,314,345,359,384,432,464,480,523,565 'indic':579 'inherit':113 'integr':133,288,291,368 'inter':144 'inter-compon':143 'interact':263,333,396,403,485 'interfac':9,30,55,81,100,168,179,195,200,215,278,373,378,563 'intuit':394,602 'javascript':327 'keyboard':388 'knockoutj':34,132,323,470,475,588 'knockoutjs.com':591 'knockoutjs.com/)':590 'larg':353,527 'lazi':511 'list':151 'load':400,455,512,513,574,578 'logic':331,536 'magento':2,14,42,57,433 'magento-ui-component-develop':1 'maintain':545 'manag':131,167,172,178,336,467,486 'master':31,106 'mechan':363 'messag':573 'mobil':561 'mobile-friend':560 'modal':25,92,223,226,227,232,235,244,246 'modul':328,537 'modular':531 'multi':208 'multi-step':207 'name':424 'navig':389 'observ':497,498 'optim':287,392,449,507 'order':169,171 'organ':307,530,533 'pagin':351,356,448,522,525 'parent':108 'parent-child':107 'pattern':543 'perform':281,397,504,603 'plan':254,266,283,290 'popup':95,230 'power':59 'practic':503 'process':251 'product':164,166,190,193,611 'proper':524 'provid':37,124,270,313,428,431,454,570 'queri':451,510 'reactiv':135 'refer':580 'relationship':111 'render':326,479 'report':97 'requir':256,271 'respons':375,557 'reusabl':538,541 'save':457 'scalabl':285 'search':357,360 'setup':298 'show':576 'skill' 'skill-magento-ui-component-developer' 'smooth':402 'sophist':7,51 'sort':163,344,349,446 'sourc':128,316,418 'source-maxnorm' 'special':245 'specialist':48 'state':469,488,575 'step':209 'strategi':289 'structur':268,297,306,532 'style':213 'system':173,198,294 'templat':35,136,320,324,471,472,476 'test':549,551 'text':419,425 'topic-agent-skills' 'topic-magento2' 'true':426 'two':492 'two-way':491 'type':150 'ui':3,16,44,60,84,101,248,583,593,604 'uicompon':437 'use':13,19,56,71 'user':262,276,372,390,395,484,555,608 'user-friend':275 'ux':272 'valid':90,365,370,466 'vendor_module.grid':416 'view':435 'way':493 'wcag':385,566 'within':234 'wizard':212 'wizard-styl':211 'work':380 'workflow':280 'write':550 'xml':32,114,299,411,415,423","prices":[{"id":"98ca44b4-46b8-4bcf-ae25-12ddeb1c5c02","listingId":"9961a0f5-91c8-4be4-9a7a-e7a028a44da0","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"maxnorm","category":"magento2-agent-skills","install_from":"skills.sh"},"createdAt":"2026-05-07T20:44:08.505Z"}],"sources":[{"listingId":"9961a0f5-91c8-4be4-9a7a-e7a028a44da0","source":"github","sourceId":"maxnorm/magento2-agent-skills/magento-ui-component-developer","sourceUrl":"https://github.com/maxnorm/magento2-agent-skills/tree/main/skills/magento-ui-component-developer","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:29.962Z","lastSeenAt":"2026-05-18T19:08:50.666Z"},{"listingId":"9961a0f5-91c8-4be4-9a7a-e7a028a44da0","source":"skills_sh","sourceId":"maxnorm/magento2-agent-skills/magento-ui-component-developer","sourceUrl":"https://skills.sh/maxnorm/magento2-agent-skills/magento-ui-component-developer","isPrimary":true,"firstSeenAt":"2026-05-07T20:44:08.505Z","lastSeenAt":"2026-05-07T22:42:36.667Z"}],"details":{"listingId":"9961a0f5-91c8-4be4-9a7a-e7a028a44da0","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"maxnorm","slug":"magento-ui-component-developer","github":{"repo":"maxnorm/magento2-agent-skills","stars":9,"topics":["agent-skills","magento2"],"license":"mit","html_url":"https://github.com/maxnorm/magento2-agent-skills","pushed_at":"2026-01-24T16:45:35Z","description":"A collection of specialized agent skills for Magento 2 development, designed to provide domain expertise across all aspects of Magento/Adobe Commerce development workflows. ","skill_md_sha":"9dcb06eba6c3ad844fc126208dd81ccf8944ca17","skill_md_path":"skills/magento-ui-component-developer/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/maxnorm/magento2-agent-skills/tree/main/skills/magento-ui-component-developer"},"layout":"multi","source":"github","category":"magento2-agent-skills","frontmatter":{"name":"magento-ui-component-developer","description":"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."},"skills_sh_url":"https://skills.sh/maxnorm/magento2-agent-skills/magento-ui-component-developer"},"updatedAt":"2026-05-18T19:08:50.666Z"}}