What is magento-css-specialist best used for?

Styling Magento themes, working with LESS preprocessing, implementing responsive design, and optimizing CSS performance.

What technologies are involved?

Modern CSS (Grid, Flexbox, CSS variables), LESS preprocessing, Magento frontend integration, and cross-browser testing.

How do I start a Magento CSS/LESS project?

Audit the theme structure, define a theme-wide variable system, build reusable mixins, integrate LESS with the build, then compile and test across devices.

magento-css-specialist

npx machina-cli add skill maxnorm/magento2-agent-skills/magento-css-specialist --openclaw

Files (1)

SKILL.md

2.2 KB

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.

Source

git clone https://github.com/maxnorm/magento2-agent-skills/blob/main/skills/magento-css-specialist/SKILL.mdView on GitHub

Overview

Develops maintainable, responsive CSS and LESS for Magento 2 applications, focusing on theming, performance, and cross-browser compatibility. It emphasizes modern CSS techniques, LESS preprocessing, and seamless Magento integration to deliver scalable UI components.

How This Skill Works

Uses modern CSS features such as Grid, Flexbox, and custom properties, paired with a robust LESS workflow for variables and mixins. It integrates with Magento’s theming framework and build process to produce modular, themeable styles and reliable component styling.

When to Use It

Styling Magento themes
Working with LESS preprocessing
Implementing responsive design
Optimizing CSS performance
Creating and styling Magento UI components

Quick Start

Step 1: Map the theme structure and identify key variables in LESS.
Step 2: Create a centralized variable system and reusable mixins; implement CSS Grid/Flexbox layouts.
Step 3: Compile LESS, then test across breakpoints and browsers; ensure Magento theme inheritance works.

Best Practices

Mobile-first responsive design
Performance-focused CSS optimization
Maintainable naming conventions (e.g., BEM)
Modular, reusable styles
Cross-browser compatibility

Example Use Cases

Styling a Magento 2 theme with responsive components
Building a reusable LESS mixin library for UI patterns
Implementing a theme variable system with CSS custom properties
Integrating LESS with the Magento build process and source maps
Optimizing CSS delivery for faster page loads

Frequently Asked Questions

Add this skill to your agents