{"id":"5620497e-541d-429c-a15e-251c9ac0a2a4","shortId":"qyLSUU","kind":"skill","title":"magento-theme-developer","tagline":"Creates custom Magento 2 themes, child themes, and theme modifications. Use when developing themes, customizing frontend, implementing responsive design, or working with Luma/Blank themes. Masters frontend architecture, layout XML, templates, and performance optimization.","description":"# Magento 2 Theme Developer\n\nExpert specialist in creating stunning, performant, and maintainable themes that deliver exceptional user experiences while adhering to Magento's frontend architecture principles.\n\n## When to Use\n\n- Creating custom themes or child themes\n- Customizing frontend appearance and layout\n- Implementing responsive design\n- Working with layout XML and templates\n- Optimizing frontend performance\n- Modifying existing themes\n\n## Theme Development Process\n\n### 1. Planning & Design Analysis\n- **Design System Review**: Analyze design mockups and create component libraries\n- **Technical Requirements**: Identify custom components and functionality needs\n- **Performance Goals**: Set loading time and performance benchmarks\n- **Browser Support**: Define supported browsers and testing matrix\n- **Accessibility Standards**: Plan for WCAG compliance and screen reader support\n\n### 2. Theme Architecture Setup\n- **Base Theme Selection**: Choose appropriate parent theme (Blank, Luma, or custom)\n- **Child Theme Creation**: Set up theme inheritance structure\n- **Asset Organization**: Plan CSS, JavaScript, and image file structure\n- **Build Process**: Configure compilation and optimization workflows\n- **Version Control**: Establish theme development and deployment strategies\n\n### 3. Theme Structure\n```\napp/design/frontend/Vendor/theme-name/\n├── etc/\n│   └── view.xml\n├── media/\n│   └── preview.jpg\n├── web/\n│   ├── css/\n│   ├── js/\n│   └── images/\n├── registration.php\n└── theme.xml\n```\n\n### 4. Layout Development\n- **Page Layouts**: Create custom page layouts and page configurations\n- **Layout Updates**: Implement layout XML modifications and customizations\n- **Block Customization**: Customize and extend Magento's block classes\n- **Container Management**: Organize content containers and responsive behavior\n- **Template Hierarchy**: Plan template file organization and reusability\n\n### 5. Styling Implementation\n- **Component Styling**: Develop modular, reusable CSS components\n- **Responsive Breakpoints**: Implement mobile-first responsive design\n- **Typography System**: Create consistent typography scales and hierarchies\n- **Color Systems**: Implement theme color variables and variations\n- **Animation & Interactions**: Add smooth transitions and micro-interactions\n\n## Theme Components\n\n### Layout XML\n- Master layout instructions, containers, and blocks\n- Understand fallback mechanism\n- Create custom layout updates\n- Manage block and container organization\n\n### Template Files (.phtml)\n- Create and customize template files\n- Use proper output escaping (`$escaper->escapeHtml()`, etc.)\n- Follow template best practices\n- Implement proper PHPDoc for template variables\n\n### CSS/LESS\n- Build responsive, mobile-first stylesheets\n- Use LESS preprocessing\n- Utilize Magento's LESS variable system\n- Optimize CSS for performance\n\n### JavaScript\n- Implement interactive functionality using RequireJS\n- Work with KnockoutJS for dynamic components\n- Follow Magento's JS framework patterns\n- Optimize JavaScript loading\n\n## Specialized Theme Types\n\n### E-commerce Themes\n- **Product Pages**: Design compelling product detail and listing pages\n- **Checkout Flow**: Optimize checkout experience for conversion\n- **Shopping Cart**: Create intuitive cart and mini-cart interfaces\n- **Customer Account**: Design user-friendly account management interfaces\n- **Search Results**: Implement effective search and filtering interfaces\n\n### Responsive Themes\n- **Mobile Optimization**: Prioritize mobile user experience\n- **Touch Interactions**: Implement touch-friendly navigation and controls\n- **Performance Budget**: Maintain fast loading on mobile networks\n- **Progressive Enhancement**: Ensure functionality across capability ranges\n- **Viewport Management**: Handle various screen sizes and orientations\n\n### Accessibility-Focused Themes\n- **Keyboard Navigation**: Ensure full keyboard accessibility\n- **Screen Reader Support**: Implement proper ARIA labels and roles\n- **Color Contrast**: Meet WCAG color contrast requirements\n- **Focus Management**: Create clear focus indicators and logical tab order\n- **Alternative Text**: Provide comprehensive image descriptions\n\n## Best Practices\n\n### Performance Optimization\n- **Asset Optimization**: Minimize and compress CSS/JS files\n- **Image Optimization**: Use modern image formats and lazy loading\n- **Critical CSS**: Implement critical CSS for faster rendering\n- **JavaScript Optimization**: Minimize JavaScript payload\n- **Caching**: Leverage browser and CDN caching\n\n### Code Organization\n- **Modular Structure**: Organize code in logical, maintainable modules\n- **Template Reusability**: Create reusable template components\n- **CSS Architecture**: Use BEM or similar methodology\n- **JavaScript Modules**: Organize JS in RequireJS modules\n- **Version Control**: Use Git effectively for collaborative development\n\n### Magento-Specific Patterns\n- **Layout XML**: Master layout instructions and fallback\n- **UI Components**: Work with Magento's UI component library\n- **LESS Variables**: Utilize Magento's LESS variable system\n- **Theme Inheritance**: Properly implement parent-child theme relationships\n- **Fallback Mechanism**: Understand template and layout fallback sequences\n\n### Security\n- **Output Escaping**: Always escape output in templates\n- **XSS Prevention**: Proper sanitization of user input\n- **CSRF Protection**: Implement form key validation\n- **Secure Assets**: Serve assets securely\n\n## Testing\n\n- **Browser Testing**: Test across supported browsers\n- **Responsive Testing**: Test on various devices and screen sizes\n- **Performance Testing**: Validate Core Web Vitals\n- **Accessibility Testing**: Test with screen readers and keyboard navigation\n- **Functional Testing**: Ensure all functionality works correctly\n\n## References\n\n- [Adobe Commerce Frontend Development](https://developer.adobe.com/commerce/frontend-core/guide/)\n- [Theme Development](https://developer.adobe.com/commerce/frontend-core/guide/themes/)\n- [Layout XML](https://developer.adobe.com/commerce/frontend-core/guide/layouts/)\n\nFocus on creating themes that deliver exceptional user experiences while maintaining performance and accessibility standards.","tags":["magento","theme","developer","magento2","agent","skills","maxnorm","agent-skills"],"capabilities":["skill","source-maxnorm","skill-magento-theme-developer","topic-agent-skills","topic-magento2"],"categories":["magento2-agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/maxnorm/magento2-agent-skills/magento-theme-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,218 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.561Z","embedding":null,"createdAt":"2026-05-07T20:44:42.807Z","updatedAt":"2026-05-18T19:08:50.561Z","lastSeenAt":"2026-05-18T19:08:50.561Z","tsv":"'/commerce/frontend-core/guide/)':706 '/commerce/frontend-core/guide/layouts/)':716 '/commerce/frontend-core/guide/themes/)':711 '1':96 '2':8,39,144 '3':191 '4':205 '5':250 'access':134,472,480,683,730 'accessibility-focus':471 'account':415,420 'across':460,665 'add':286 'adher':57 'adob':700 'altern':507 'alway':638 'analysi':99 'analyz':103 'anim':284 'app/design/frontend/vendor/theme-name':194 'appear':75 'appropri':152 'architectur':31,62,146,569 'aria':486 'asset':167,517,657,659 'base':148 'behavior':241 'bem':571 'benchmark':125 'best':332,513 'blank':155 'block':225,232,302,311 'breakpoint':261 'browser':126,130,548,662,667 'budget':449 'build':176,341 'cach':546,551 'capabl':461 'cart':405,408,412 'cdn':550 'checkout':397,400 'child':10,71,159,624 'choos':151 'class':233 'clear':500 'code':552,557 'collabor':588 'color':276,280,490,494 'commerc':386,701 'compel':391 'compil':179 'complianc':139 'compon':108,114,253,259,294,371,567,602,608 'comprehens':510 'compress':521 'configur':178,216 'consist':271 'contain':234,238,300,313 'content':237 'contrast':491,495 'control':184,447,583 'convers':403 'core':680 'correct':698 'creat':5,45,67,107,210,270,306,318,406,499,564,719 'creation':161 'critic':533,536 'csrf':650 'css':170,200,258,357,534,537,568 'css/js':522 'css/less':340 'custom':6,19,68,73,113,158,211,224,226,227,307,320,414 'defin':128 'deliv':52,722 'deploy':189 'descript':512 'design':23,80,98,100,104,267,390,416 'detail':393 'develop':4,17,41,94,187,207,255,589,703,708 'developer.adobe.com':705,710,715 'developer.adobe.com/commerce/frontend-core/guide/)':704 'developer.adobe.com/commerce/frontend-core/guide/layouts/)':714 'developer.adobe.com/commerce/frontend-core/guide/themes/)':709 'devic':673 'dynam':370 'e':385 'e-commerc':384 'effect':426,586 'enhanc':457 'ensur':458,477,694 'escap':326,327,637,639 'escapehtml':328 'establish':185 'etc':195,329 'except':53,723 'exist':91 'experi':55,401,438,725 'expert':42 'extend':229 'fallback':304,600,627,633 'fast':451 'faster':539 'file':174,246,316,322,523 'filter':429 'first':265,345 'flow':398 'focus':473,497,501,717 'follow':330,372 'form':653 'format':529 'framework':376 'friend':419,444 'frontend':20,30,61,74,88,702 'full':478 'function':116,363,459,692,696 'git':585 'goal':119 'handl':465 'hierarchi':243,275 'identifi':112 'imag':173,202,511,524,528 'implement':21,78,219,252,262,278,334,361,425,441,484,535,621,652 'indic':502 'inherit':165,619 'input':649 'instruct':299,598 'interact':285,292,362,440 'interfac':413,422,430 'intuit':407 'javascript':171,360,379,541,544,575 'js':201,375,578 'key':654 'keyboard':475,479,690 'knockoutj':368 'label':487 'layout':32,77,83,206,209,213,217,220,295,298,308,594,597,632,712 'lazi':531 'less':348,353,610,615 'leverag':547 'librari':109,609 'list':395 'load':121,380,452,532 'logic':504,559 'luma':156 'luma/blank':27 'magento':2,7,38,59,230,351,373,591,605,613 'magento-specif':590 'magento-theme-develop':1 'maintain':49,450,560,727 'manag':235,310,421,464,498 'master':29,297,596 'matrix':133 'mechan':305,628 'media':197 'meet':492 'methodolog':574 'micro':291 'micro-interact':290 'mini':411 'mini-cart':410 'minim':519,543 'mobil':264,344,433,436,454 'mobile-first':263,343 'mockup':105 'modern':527 'modif':14,222 'modifi':90 'modul':561,576,581 'modular':256,554 'navig':445,476,691 'need':117 'network':455 'optim':37,87,181,356,378,399,434,516,518,525,542 'order':506 'organ':168,236,247,314,553,556,577 'orient':470 'output':325,636,640 'page':208,212,215,389,396 'parent':153,623 'parent-child':622 'pattern':377,593 'payload':545 'perform':36,47,89,118,124,359,448,515,677,728 'phpdoc':336 'phtml':317 'plan':97,136,169,244 'practic':333,514 'preprocess':349 'prevent':644 'preview.jpg':198 'principl':63 'priorit':435 'process':95,177 'product':388,392 'progress':456 'proper':324,335,485,620,645 'protect':651 'provid':509 'rang':462 'reader':142,482,688 'refer':699 'registration.php':203 'relationship':626 'render':540 'requir':111,496 'requirej':365,580 'respons':22,79,240,260,266,342,431,668 'result':424 'reusabl':249,257,563,565 'review':102 'role':489 'sanit':646 'scale':273 'screen':141,467,481,675,687 'search':423,427 'secur':635,656,660 'select':150 'sequenc':634 'serv':658 'set':120,162 'setup':147 'shop':404 'similar':573 'size':468,676 'skill' 'skill-magento-theme-developer' 'smooth':287 'source-maxnorm' 'special':381 'specialist':43 'specif':592 'standard':135,731 'strategi':190 'structur':166,175,193,555 'stun':46 'style':251,254 'stylesheet':346 'support':127,129,143,483,666 'system':101,269,277,355,617 'tab':505 'technic':110 'templat':34,86,242,245,315,321,331,338,562,566,630,642 'test':132,661,663,664,669,670,678,684,685,693 'text':508 'theme':3,9,11,13,18,28,40,50,69,72,92,93,145,149,154,160,164,186,192,279,293,382,387,432,474,618,625,707,720 'theme.xml':204 'time':122 'topic-agent-skills' 'topic-magento2' 'touch':439,443 'touch-friend':442 'transit':288 'type':383 'typographi':268,272 'ui':601,607 'understand':303,629 'updat':218,309 'use':15,66,323,347,364,526,570,584 'user':54,418,437,648,724 'user-friend':417 'util':350,612 'valid':655,679 'variabl':281,339,354,611,616 'variat':283 'various':466,672 'version':183,582 'view.xml':196 'viewport':463 'vital':682 'wcag':138,493 'web':199,681 'work':25,81,366,603,697 'workflow':182 'xml':33,84,221,296,595,713 'xss':643","prices":[{"id":"e0428800-9165-4314-b393-16f076747611","listingId":"5620497e-541d-429c-a15e-251c9ac0a2a4","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:42.807Z"}],"sources":[{"listingId":"5620497e-541d-429c-a15e-251c9ac0a2a4","source":"github","sourceId":"maxnorm/magento2-agent-skills/magento-theme-developer","sourceUrl":"https://github.com/maxnorm/magento2-agent-skills/tree/main/skills/magento-theme-developer","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:29.875Z","lastSeenAt":"2026-05-18T19:08:50.561Z"},{"listingId":"5620497e-541d-429c-a15e-251c9ac0a2a4","source":"skills_sh","sourceId":"maxnorm/magento2-agent-skills/magento-theme-developer","sourceUrl":"https://skills.sh/maxnorm/magento2-agent-skills/magento-theme-developer","isPrimary":true,"firstSeenAt":"2026-05-07T20:44:42.807Z","lastSeenAt":"2026-05-07T22:42:58.071Z"}],"details":{"listingId":"5620497e-541d-429c-a15e-251c9ac0a2a4","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"maxnorm","slug":"magento-theme-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":"032970149a6c0c4d45ee8c1d90ba832f26b51857","skill_md_path":"skills/magento-theme-developer/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/maxnorm/magento2-agent-skills/tree/main/skills/magento-theme-developer"},"layout":"multi","source":"github","category":"magento2-agent-skills","frontmatter":{"name":"magento-theme-developer","description":"Creates custom Magento 2 themes, child themes, and theme modifications. Use when developing themes, customizing frontend, implementing responsive design, or working with Luma/Blank themes. Masters frontend architecture, layout XML, templates, and performance optimization."},"skills_sh_url":"https://skills.sh/maxnorm/magento2-agent-skills/magento-theme-developer"},"updatedAt":"2026-05-18T19:08:50.561Z"}}