SKILL.md
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
Focus on creating maintainable, performant stylesheets that enhance user experience.