From magento2-commerce
Builds Magento 2 storefronts using layout XML, blocks, PHTML templates, ViewModels, themes, RequireJS/KnockoutJS, and LESS/CSS for frontend customization.
How this skill is triggered — by the user, by Claude, or both
Slash command
/magento2-commerce:magento-frontendThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Fetch live docs**:
Fetch live docs:
site:developer.adobe.com commerce frontend-core for frontend development guidehttps://developer.adobe.com/commerce/frontend-core/guide/css/preprocess for CSS/LESS docssite:developer.adobe.com commerce frontend-core guide layouts for layout XML referencesite:developer.adobe.com commerce frontend-core guide templates for template guideLayout files map to route handles and define the page structure:
<route>_<controller>_<action>.xml (e.g., catalog_product_view.xml)default.xml — applies to all pages<referenceContainer> — modify an existing container<referenceBlock> — modify an existing block<block> — add a new block with class, template, name<move> — relocate a block/container<referenceBlock name="block_name" remove="true"/> — remove a block (or use <referenceContainer> for containers). Note: there is no standalone <remove> element for blocks; the remove="true" attribute is set on <referenceBlock> or <referenceContainer>.<update> — include another layout handle<arguments> — pass data to blocksview/frontend/layout/ or view/adminhtml/layout/Magento_Module/layout/Magento\Framework\View\Element\Template$block->someMethod() in PHTML templatesview/frontend/templates/ or theme overrides.phtml extension$block, escape output: $escaper->escapeHtml()MVVM pattern — inject ViewModels into blocks via layout XML arguments:
Magento\Framework\View\Element\Block\ArgumentInterface$viewModel = $block->getData('view_model');requirejs-config.js — maps module aliases, mixins, shimsview/frontend/web/ or view/frontend/requirejs-config.jsko.bindingHandlersview/frontend/web/template/ (.html files)Extend existing JS modules without overriding:
requirejs-config.js under config.mixinsCustom widgets extend $.widget:
data-mage-init attribute or <script type="text/x-magento-init">app/design/frontend/VendorName/theme-name/
├── etc/view.xml # Image sizes, responsive breakpoints
├── registration.php # Theme registration
├── theme.xml # Theme name, parent
├── composer.json
├── Magento_Module/ # Module overrides
│ ├── layout/ # Layout XML overrides
│ └── templates/ # Template overrides
├── web/
│ ├── css/source/ # LESS source files
│ ├── images/
│ └── js/
└── media/preview.jpg
Themes declare a parent in theme.xml. Fallback chain: current theme → parent theme → module views → framework. Override files by placing them in the same relative path.
Open source since late 2025. Replaces KnockoutJS + RequireJS + jQuery with Alpine.js + Tailwind CSS. Dramatically faster: ~5 requests vs ~230, ~0.4MB vs ~3MB page weight.
@magento_import directive for theme fallback_variables.less, overridden per theme$escaper->escapeHtml(), escapeUrl(), escapeJs() for XSS preventionFetch the frontend development guide for exact layout XML schema, template escaping methods, and RequireJS configuration patterns before implementing.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin magento2-commerceGuides Shopify theme development: OS 2.0 JSON templates, sections/blocks, settings schema, Dawn reference, file structure, linting, assets, deployment.
Builds and debugs Shopify themes with Liquid, develops custom apps, and implements headless storefronts via Storefront API. Invoke for Shopify theme, app, or checkout customization.
Delivers expertise on Shopify Liquid templating for themes and dynamic storefront content, including components, blocks, sections, snippets, and schemas.