agentsclimarketplace
Sign in

Magento css specialist

Skill maxnorm/magento2-agent-skills/skills/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.From its SKILL.md

Install
npx -y skills add maxnorm/magento2-agent-skills --skill magento-css-specialist

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

2.2 KB, 383 tokens by cl100k_base, 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.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.