What is magento-css-specialist?

A specialist guide for styling Magento 2, an e-commerce platform, with CSS and LESS, a language that extends CSS with features such as variables and mixins.

Building and maintaining Magento themes and component styles, compiling LESS, creating responsive layouts, and integrating styles with Magento's build system.

It provides project-specific direction for responsive layouts, theme styling, reusable styles, browser compatibility, and stylesheet performance.

magento-css-specialist — Skill for Claude Code and Codex by maxnorm

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

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

Clone the repo

git clone --depth 1 https://github.com/maxnorm/magento2-agent-skills

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/maxnorm/magento2-agent-skills/magento-css-specialist/github.svg)](https://agentmods.dev/skills/maxnorm/magento2-agent-skills/magento-css-specialist)

Your own site

<a href="https://agentmods.dev/skills/maxnorm/magento2-agent-skills/magento-css-specialist"><img src="https://agentmods.dev/badge/skills/maxnorm/magento2-agent-skills/magento-css-specialist/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/maxnorm/magento2-agent-skills/magento-css-specialist"><img src="https://agentmods.dev/badge/skills/maxnorm/magento2-agent-skills/magento-css-specialist.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 53 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 457 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00053	$0.00457
Opus 5.5	$0.00021	$0.00183
Sonnet 5.5	$0.00011	$0.00091
Haiku 4.5	$0.00005	$0.00046

Measured 2mo ago against content hash 540fd8792b45, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

magento-css-specialist scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/magento-css-specialist/SKILL.md · 55 lines

What it actually says

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.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2mo ago First seen · 55 lines · 53 tokens per session scan A 540fd8792b45

Subscribe to this mod's changes

magento-css-specialist is a skill published in the GitHub repository maxnorm/magento2-agent-skills (31 stars, last pushed 9mo ago), licensed MIT. It adds 53 tokens to every session and 457 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

CSS and styling E-commerce Frontend agent-skills magento2

magento2-frontend-dev

This skill should be used when the user asks to "create a Knockout.js component", "add a UI Component", "modify layout XML", "customize a template", "write LESS CSS", "style with the Magento UI library", "add a RequireJS module", "extend JavaScript", "customize checkout", or "modify the cart page". Covers Magento 2…

ddtcorex/maestro-skills · 110 tokens

magento-hyva

Build Hyva theme templates, Alpine.js components, Tailwind CSS styles, and View Models for Magento 2. Use when developing frontend for Hyva-based Magento stores.

furan917/magento-ai-toolkit · 40 tokens

magento2-hyva-dev

This skill should be used when the user asks to "create a Hyvä theme", "set up a child theme", "build an Alpine.js component", "make this CSP-compliant", "add Tailwind CSS classes", "convert Luma to Hyvä", "migrate Knockout to Alpine", work on "Hyvä checkout" or "Hyvä React components", or handle "Tailwind…

ddtcorex/maestro-skills · 138 tokens

magento-css-specialist