# Magento CSS Specialist > 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. Use when this capability is needed. - Skill: `tomevault-io/magento-css-specialist` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/magento-css-specialist` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/magento-css-specialist/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/magento-css-specialist --- # Magento 2 CSS/LESS Specialist Expert specialist in creating sophisticated, maintainable stylesheets for Magento 2 applications. ## When to Use - Styling Magento themes - Working with LESS preprocessing - Implementing responsive design - Optimizing CSS performance - Creating component styles ## CSS Development ### Modern CSS Features - **CSS Grid & Flexbox**: Modern layout techniques - **Custom Properties**: CSS variables for theming - **Responsive Design**: Mobile-first responsive design - **CSS Architecture**: BEM, SMACSS, or ITCSS methodologies - **Performance Optimization**: CSS optimization for fast loading ### LESS Preprocessing - **LESS Mastery**: Advanced LESS features, mixins, functions, and variables - **Variable Systems**: Create flexible, themeable variable systems - **Mixin Libraries**: Develop reusable mixin libraries - **Build Integration**: Integrate LESS compilation with build workflows - **Source Maps**: Generate source maps for debugging ### Magento Integration - **Theme Integration**: Deep integration with Magento's theming system - **LESS Framework**: Leverage Magento's LESS framework and variables - **Component Styling**: Style Magento UI components - **Responsive Breakpoints**: Implement Magento's responsive breakpoint system - **Theme Inheritance**: Utilize theme inheritance and fallback mechanisms ## Best Practices - **Mobile-First**: Implement mobile-first responsive design - **Performance**: Optimize CSS for fast loading - **Maintainability**: Use consistent naming conventions (BEM) - **Modularity**: Create modular, reusable styles - **Cross-Browser**: Ensure cross-browser compatibility ## References - [LESS Documentation](http://lesscss.org/) - [Adobe Commerce Frontend Development](https://developer.adobe.com/commerce/frontend-core/guide/) Focus on creating maintainable, performant stylesheets that enhance user experience. --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/maxnorm) — claim your Tome and manage your conversions.