magento2-frontend-dev

# Magento 2 Frontend Developer This skill covers Luma/Blank theme development, Knockout.js, RequireJS, LESS CSS, and UI Components. ## Related Skills **REQUIRED BACKGROUND:** Load `magento2-dev-core` first — it defines the escaping (`escapeHtml`/`escapeHtmlAttr`/`escapeJs`) and backend patterns this skill's templates and view models rely on. This skill targets Luma/Blank-derived themes. If the project's `theme.xml` parent is `Hyva/default` or `Hyva/reset` (or `composer.json` requires `hyva-themes/*`), use `magento2-hyva-dev` instead — the two frontend stacks are mutually exclusive and share almost no code patterns. ## Theme Structure ``` app/design/frontend/Vendor/Theme/ ├── registration.php ├── theme.xml ├── composer.json ├── media/ │ └── preview.jpg ├── web/ │ ├── css/ │ │ └── source/ │ │ ├── _extend.less │ │ ├── _theme.less │ │ └── _variables.less │ ├── js/ │ │ └── namespace/ │ │ └── module.js │ └── images/ └── Magento_Theme/ ├── layout/ │ ├── default.xml │ └── default_head_blocks.xml └── templates/ └── header.phtml ``` ## RequireJS Modules ### Creating a Module ```javascript // web/js/namespace/module.js define([ 'jquery', 'ko', 'uiComponent', 'Magento_Customer/js/customer-data' ], function ($, ko, Component, customerData) { 'use strict'; return Component.extend({ defaults: { template: 'Namespace_Module/template-name', exports: { ...