{"id":"0951a447-a48c-43c4-81ea-d95e4b362720","shortId":"xE343T","kind":"skill","title":"magento-css-specialist","tagline":"Develops CSS and LESS for Magento 2 with responsive design and performance optimization. Use when styling themes, working with LESS, implementing responsive design, or optimizing CSS performance. Masters modern CSS techniques, LESS preprocessing, and cross-browser compatibility.","description":"# Magento 2 CSS/LESS Specialist\n\nExpert specialist in creating sophisticated, maintainable stylesheets for Magento 2 applications.\n\n## When to Use\n\n- Styling Magento themes\n- Working with LESS preprocessing\n- Implementing responsive design\n- Optimizing CSS performance\n- Creating component styles\n\n## CSS Development\n\n### Modern CSS Features\n- **CSS Grid & Flexbox**: Modern layout techniques\n- **Custom Properties**: CSS variables for theming\n- **Responsive Design**: Mobile-first responsive design\n- **CSS Architecture**: BEM, SMACSS, or ITCSS methodologies\n- **Performance Optimization**: CSS optimization for fast loading\n\n### LESS Preprocessing\n- **LESS Mastery**: Advanced LESS features, mixins, functions, and variables\n- **Variable Systems**: Create flexible, themeable variable systems\n- **Mixin Libraries**: Develop reusable mixin libraries\n- **Build Integration**: Integrate LESS compilation with build workflows\n- **Source Maps**: Generate source maps for debugging\n\n### Magento Integration\n- **Theme Integration**: Deep integration with Magento's theming system\n- **LESS Framework**: Leverage Magento's LESS framework and variables\n- **Component Styling**: Style Magento UI components\n- **Responsive Breakpoints**: Implement Magento's responsive breakpoint system\n- **Theme Inheritance**: Utilize theme inheritance and fallback mechanisms\n\n## Best Practices\n\n- **Mobile-First**: Implement mobile-first responsive design\n- **Performance**: Optimize CSS for fast loading\n- **Maintainability**: Use consistent naming conventions (BEM)\n- **Modularity**: Create modular, reusable styles\n- **Cross-Browser**: Ensure cross-browser compatibility\n\n## References\n\n- [LESS Documentation](http://lesscss.org/)\n- [Adobe Commerce Frontend Development](https://developer.adobe.com/commerce/frontend-core/guide/)\n\nFocus on creating maintainable, performant stylesheets that enhance user experience.","tags":["magento","css","specialist","magento2","agent","skills","maxnorm","agent-skills"],"capabilities":["skill","source-maxnorm","skill-magento-css-specialist","topic-agent-skills","topic-magento2"],"categories":["magento2-agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/maxnorm/magento2-agent-skills/magento-css-specialist","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 (1,895 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:48.813Z","embedding":null,"createdAt":"2026-05-07T20:44:31.303Z","updatedAt":"2026-05-18T19:08:48.813Z","lastSeenAt":"2026-05-18T19:08:48.813Z","tsv":"'/)':237 '/commerce/frontend-core/guide/)':244 '2':11,44,56 'adob':238 'advanc':119 'applic':57 'architectur':102 'bem':103,218 'best':196 'breakpoint':181,186 'browser':41,226,230 'build':139,145 'commerc':239 'compat':42,231 'compil':143 'compon':75,174,179 'consist':215 'convent':217 'creat':50,74,128,220,247 'cross':40,225,229 'cross-brows':39,224,228 'css':3,6,30,34,72,77,80,82,90,101,110,209 'css/less':45 'custom':88 'debug':153 'deep':158 'design':14,27,70,95,100,206 'develop':5,78,135,241 'developer.adobe.com':243 'developer.adobe.com/commerce/frontend-core/guide/)':242 'document':234 'enhanc':252 'ensur':227 'experi':254 'expert':47 'fallback':194 'fast':113,211 'featur':81,121 'first':98,200,204 'flexbox':84 'flexibl':129 'focus':245 'framework':166,171 'frontend':240 'function':123 'generat':149 'grid':83 'implement':25,68,182,201 'inherit':189,192 'integr':140,141,155,157,159 'itcss':106 'layout':86 'less':8,24,36,66,115,117,120,142,165,170,233 'lesscss.org':236 'lesscss.org/)':235 'leverag':167 'librari':134,138 'load':114,212 'magento':2,10,43,55,62,154,161,168,177,183 'magento-css-specialist':1 'maintain':52,213,248 'map':148,151 'master':32 'masteri':118 'mechan':195 'methodolog':107 'mixin':122,133,137 'mobil':97,199,203 'mobile-first':96,198,202 'modern':33,79,85 'modular':219,221 'name':216 'optim':17,29,71,109,111,208 'perform':16,31,73,108,207,249 'practic':197 'preprocess':37,67,116 'properti':89 'refer':232 'respons':13,26,69,94,99,180,185,205 'reusabl':136,222 'skill' 'skill-magento-css-specialist' 'smacss':104 'sophist':51 'sourc':147,150 'source-maxnorm' 'specialist':4,46,48 'style':20,61,76,175,176,223 'stylesheet':53,250 'system':127,132,164,187 'techniqu':35,87 'theme':21,63,93,156,163,188,191 'themeabl':130 'topic-agent-skills' 'topic-magento2' 'ui':178 'use':18,60,214 'user':253 'util':190 'variabl':91,125,126,131,173 'work':22,64 'workflow':146","prices":[{"id":"75058870-2c76-4592-97cd-c4352cb2e80d","listingId":"0951a447-a48c-43c4-81ea-d95e4b362720","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:31.303Z"}],"sources":[{"listingId":"0951a447-a48c-43c4-81ea-d95e4b362720","source":"github","sourceId":"maxnorm/magento2-agent-skills/magento-css-specialist","sourceUrl":"https://github.com/maxnorm/magento2-agent-skills/tree/main/skills/magento-css-specialist","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:28.215Z","lastSeenAt":"2026-05-18T19:08:48.813Z"},{"listingId":"0951a447-a48c-43c4-81ea-d95e4b362720","source":"skills_sh","sourceId":"maxnorm/magento2-agent-skills/magento-css-specialist","sourceUrl":"https://skills.sh/maxnorm/magento2-agent-skills/magento-css-specialist","isPrimary":true,"firstSeenAt":"2026-05-07T20:44:31.303Z","lastSeenAt":"2026-05-07T22:42:50.702Z"}],"details":{"listingId":"0951a447-a48c-43c4-81ea-d95e4b362720","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"maxnorm","slug":"magento-css-specialist","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":"b9a3d4de2e43828fccf8230b463c0dcbb2981a1a","skill_md_path":"skills/magento-css-specialist/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/maxnorm/magento2-agent-skills/tree/main/skills/magento-css-specialist"},"layout":"multi","source":"github","category":"magento2-agent-skills","frontmatter":{"name":"magento-css-specialist","description":"Develops CSS and LESS for Magento 2 with responsive design and performance optimization. Use when styling themes, working with LESS, implementing responsive design, or optimizing CSS performance. Masters modern CSS techniques, LESS preprocessing, and cross-browser compatibility."},"skills_sh_url":"https://skills.sh/maxnorm/magento2-agent-skills/magento-css-specialist"},"updatedAt":"2026-05-18T19:08:48.813Z"}}