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.
- Installs
- 149
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/maxnorm/magento2-agent-skills --skill magento-css-specialist- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads magento-css-specialist automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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.
FAQ
What does the magento-css-specialist skill do?
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.
How do I install magento-css-specialist?
Run npx skills add https://github.com/maxnorm/magento2-agent-skills --skill magento-css-specialist in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/magento-css-specialist/ (personal) or .claude/skills/magento-css-specialist/ (project).
Which AI agents can use magento-css-specialist?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is magento-css-specialist safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains magento-css-specialist?
It is published by maxnorm in maxnorm/magento2-agent-skills. It has 149 recorded installs.
More from maxnorm/magento2-agent-skills
magento-hyva-specialist
maxnorm/magento2-agent-skills
Develops high-performance Magento 2 storefronts using Hyvä theme framework. Use when working with Hyvä themes, Alpine.js, Tailwind CSS, or modern frontend development. Masters Alpine.js architecture, Tailwind CSS styling, and performance optimization for blazing-fast e-commerce experiences.
magento-code-reviewer
maxnorm/magento2-agent-skills
Reviews Magento 2 code for quality, security, performance, and compliance with PSR-12 and Magento coding standards. Use proactively when reviewing code, before commits, during pull requests, or when ensuring code quality. Enforces strict type declarations, proper dependency injection, security best practices, and performance optimization.
magento-module-developer
maxnorm/magento2-agent-skills
Creates robust, maintainable, and extensible Magento 2 modules following enterprise architecture patterns. Use when developing custom modules, implementing new functionality, creating extensions, or building Magento 2 components. Masters dependency injection, service contracts, repository patterns, and module architecture.
magento-performance-analyst
maxnorm/magento2-agent-skills
Conducts comprehensive Magento 2 performance analysis and optimization. Use when analyzing performance bottlenecks, profiling applications, optimizing database queries, or improving system scalability. Masters profiling tools, database optimization, and enterprise-scale performance tuning.
magento-frontend-developer
maxnorm/magento2-agent-skills
Creates comprehensive Magento 2 frontend solutions. Use when developing frontend features, working with layout XML, templates, JavaScript, or responsive design. Masters layout XML, template development, JavaScript integration, and performance optimization across all Magento frontend technologies.
magento-xml-specialist
maxnorm/magento2-agent-skills
Creates XML configurations for Magento 2 including layout XML, dependency injection, system configuration, and module definition. Use when working with XML configuration files, layout XML, di.xml, or system.xml. Masters XML schema design, validation, and configuration management.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.