skills/maxnorm/magento2-agent-skills/magento-css-specialist

magento-css-specialist

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.

Weekly Installs
26
GitHub Stars
6
First Seen
Feb 17, 2026
Installed on
opencode24
codex24
gemini-cli22
github-copilot22
kimi-cli22
cursor22