mcpField
M
magento-css-specialist

magento-css-specialist

github.com/maxnormDesign & UI31149 installsUpdated 40w ago
Repository

About magento-css-specialist

A skill for developing maintainable Magento 2 stylesheets, aimed at theme developers. It covers LESS, responsive layouts, Magento theming, and CSS performance.

Key features

  1. 01Magento theme styling
  2. 02LESS variables and mixins
  3. 03Responsive layouts
  4. 04CSS architecture and performance

Use cases

  1. 01Build styles for Magento themes
  2. 02Create reusable LESS components
  3. 03Tune stylesheets for faster loading

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/maxnorm/magento2-agent-skills --skill magento-css-specialist

After installing, type/magento-css-specialistin Claude Code to confirm it loaded.

Details

From the project README

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.

Comments

Markdown supported