Magento css specialist
Skill maxnorm/magento2-agent-skills/skills/magento-css-specialist
A collection of specialized agent skills for Magento 2 development, designed to provide domain expertise across all aspects of Magento/Adobe Commerce development workflows.
npx -y skills add maxnorm/magento2-agent-skills --skill magento-css-specialistAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its author says it does
Copied from the file, not written here
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.md
2.2 KB, as published. Nobody here has run it
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.