# 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.

- Skill: `majiayu000/magento-css-specialist` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/magento-css-specialist`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/magento-css-specialist/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/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.