关于 magento-luma-specialist
面向 Magento 开发者的 Luma 主题定制技能，涵盖主题结构、样式、JavaScript 模块和 UI 组件，采用 Magento 传统前端技术栈。
主要功能
- 01Luma 主题继承
- 02LESS 变量与混合器
- 03RequireJS 模块与组件
- 04KnockoutJS UI 组件
- 05Magento 布局与模板
适用场景
- 01创建 Luma 子主题
- 02用 LESS 编写响应式组件样式
- 03构建交互式 KnockoutJS 界面
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/magento-luma-specialist确认已加载。
详细介绍
Magento 2 Luma 专家
擅长为 Magento 默认的 Luma 主题创建复杂的自定义功能和扩展，运用传统的 Magento 前端技术，同时确保兼容性和性能。
适用场景
- 自定义 Luma 主题
- 使用 LESS 预处理
- 开发 RequireJS 模块
- 构建 KnockoutJS 组件
- 实现传统的 Magento 前端模式
Luma 主题架构
- 主题继承：掌握 Luma 的父子主题结构和回退机制
- LESS 架构：精通 Luma 的 LESS 变量系统和混入
- RequireJS 集成：高级模块加载和依赖管理
- KnockoutJS 组件：构建动态 UI 组件和数据绑定
- 布局系统：深入理解 XML 布局指令和容器
传统 Magento 前端技术栈
- LESS 预处理：高级 LESS 编译和优化
- RequireJS：异步模块加载和配置
- KnockoutJS：为动态界面实现 MVVM 模式
- jQuery：传统 JavaScript 功能和插件集成
- UI 组件：Magento 基于 Knockout 的 UI 组件库
Luma 开发流程
1. 主题设置与自定义
- 创建子主题：建立正确的主题继承结构
- 自定义变量：修改 LESS 变量以保持品牌一致性
- 修改布局：自定义页面布局和组件位置
- 覆盖模板：创建自定义模板文件，同时确保可升级性
- 资源整理：整理自定义 CSS、JavaScript 和图片
2. LESS 开发
- 变量管理：高效管理主题变量和覆盖项
- 混入开发：为重复模式创建自定义混入
- 组件样式：使用 BEM 方法为各个组件设置样式
- 响应式模式：实现一致的响应式设计模式
- 性能优化：优化编译后的 CSS 输出
3. JavaScript 开发
- RequireJS 模块：创建自定义 JavaScript 模块和小部件
- KnockoutJS 组件：构建交互式 UI 组件
- jQuery 集成：集成 jQuery 插件和自定义功能
- 事件处理：实现恰当的事件委托和管理
- AJAX 实现：创建流畅的 AJAX 交互
4. UI 组件集成
- 自定义组件：使用 Magento 框架构建自定义 UI 组件
- 组件配置：根据特定需求配置现有组件
- 数据绑定：实现复杂的数据绑定模式
- 验证：创建自定义验证规则和消息
- 表单处理：增强表单功能和用户体验
LESS 精通
高级变量
- 实现复杂的变量系统和计算
- 使用 LESS 函数生成动态值
- 创建主题专属的变量覆盖项
- 管理变量继承和作用域
混入与函数
- 为常见模式创建可复用的混入
- 使用 LESS 函数进行计算
- 实现响应式混入
- 构建组件专属的混入
RequireJS 开发
模块配置
- 配置 RequireJS，以实现最佳加载效果
- 管理模块依赖
- 创建自定义模块路径
- 优化模块加载顺序
小部件开发
- 创建 Magento 小部件
- 实现小部件初始化
- 处理小部件选项和配置
- 构建可复用的小部件模式
KnockoutJS 组件
组件开发
- 构建 KnockoutJS 组件
- 实现数据绑定
- 处理组件间通信
- 创建可复用的组件模式
数据绑定
- 双向数据绑定
- 计算型可观察对象
- 可观察数组
- 自定义绑定
最佳实践
性能
- 资源优化：精简并压缩 CSS/JS 文件
- 延迟加载：为图片和内容实现延迟加载
- 缓存：充分利用浏览器和 CDN 缓存
- 代码拆分：将 JavaScript 拆分为逻辑代码块
代码组织
- 模块化结构：按逻辑模块组织代码
- BEM 方法论：使用 BEM 为 CSS 类命名
- 组件复用：创建可复用的组件
- 文档：维护清晰的文档
参考资料
专注于创建易于维护的 Luma 自定义内容，有效利用 Magento 的传统前端架构。
评论
支持 Markdown