Agent skill
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.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/magento-css-specialist-maxnorm-magento2-agent-skill
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?