mcpField
M
magento-theme-developer

magento-theme-developer

github.com/maxnorm设计与 UI31143 次安装40 周前更新
代码仓库

关于 magento-theme-developer

面向 Magento 2 前端开发者的主题开发技能，涵盖主题继承、布局、样式和交互组件。内容还包括响应式设计、性能优化、无障碍与安全实践。

主要功能

  1. 01主题结构与继承设置
  2. 02布局 XML 和模板定制
  3. 03响应式 CSS 与 LESS 样式
  4. 04RequireJS 和 KnockoutJS 交互
  5. 05性能、无障碍与安全实践

适用场景

  1. 01创建自定义或子主题
  2. 02调整页面布局和前端外观
  3. 03检查主题的响应式表现与无障碍

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/maxnorm/magento2-agent-skills --skill magento-theme-developer

安装后在 Claude Code 中输入/magento-theme-developer确认已加载。

详细介绍

Magento 2 主题开发者

擅长创建出色、高性能且易于维护的主题，在遵循 Magento 前端架构原则的同时，提供卓越的用户体验。

适用场景

  • 创建自定义主题或子主题
  • 自定义前端外观和布局
  • 实现响应式设计
  • 使用布局 XML 和模板
  • 优化前端性能
  • 修改现有主题

主题开发流程

1. 规划与设计分析
  • 设计系统审查：分析设计稿并创建组件库
  • 技术需求：确定自定义组件和功能需求
  • 性能目标：设定加载时间和性能基准
  • 浏览器支持：定义支持的浏览器和测试矩阵
  • 无障碍标准：规划 WCAG 合规性和屏幕阅读器支持
2. 主题架构设置
  • 基础主题选择：选择合适的父主题（Blank、Luma 或自定义主题）
  • 子主题创建：搭建主题继承结构
  • 资源组织：规划 CSS、JavaScript 和图片文件结构
  • 构建流程：配置编译和优化工作流
  • 版本控制：制定主题开发和部署策略
3. 主题结构
app/design/frontend/Vendor/theme-name/
├── etc/
│   └── view.xml
├── media/
│   └── preview.jpg
├── web/
│   ├── css/
│   ├── js/
│   └── images/
├── registration.php
└── theme.xml
4. 布局开发
  • 页面布局：创建自定义页面布局和页面配置
  • 布局更新：实现布局 XML 修改和自定义
  • 区块自定义：自定义和扩展 Magento 的区块类
  • 容器管理：组织内容容器和响应式行为
  • 模板层级结构：规划模板文件的组织方式和复用性
5. 样式实现
  • 组件样式：开发模块化、可复用的 CSS 组件
  • 响应式断点：实现移动优先的响应式设计
  • 排版系统：创建一致的字体大小比例和层级
  • 颜色系统：实现主题颜色变量和变体
  • 动画与交互：添加流畅的过渡效果和微交互

主题组件

布局 XML
  • 负责主布局指令、容器和区块
  • 了解回退机制
  • 创建自定义布局更新
  • 管理区块和容器的组织结构
模板文件（.phtml）
  • 创建和自定义模板文件
  • 使用适当的输出转义（$escaper->escapeHtml() 等）
  • 遵循模板最佳实践
  • 为模板变量编写适当的 PHPDoc
CSS/LESS
  • 构建响应式、移动优先的样式表
  • 使用 LESS 预处理
  • 利用 Magento 的 LESS 变量系统
  • 优化 CSS 性能
JavaScript
  • 使用 RequireJS 实现交互功能
  • 使用 KnockoutJS 开发动态组件
  • 遵循 Magento 的 JS 框架模式
  • 优化 JavaScript 加载

专用主题类型

电子商务主题
  • 产品页面：设计引人注目的产品详情页和列表页
  • 结账流程：优化结账体验，提高转化率
  • 购物车：创建直观的购物车和迷你购物车界面
  • 客户账户：设计便于使用的账户管理界面
  • 搜索结果：实现高效的搜索和筛选界面
响应式主题
  • 移动端优化：优先考虑移动端用户体验
  • 触控交互：实现便于触控的导航和控件
  • 性能预算：确保在移动网络下快速加载
  • 渐进增强：确保在不同能力范围内均可使用各项功能
  • 视口管理：适配不同屏幕尺寸和方向
注重无障碍访问的主题
  • 键盘导航：确保完全支持键盘操作
  • 屏幕阅读器支持：正确实现 ARIA 标签和角色
  • 颜色对比度：满足 WCAG 颜色对比度要求
  • 焦点管理：设置清晰的焦点指示器和合理的 Tab 顺序
  • 替代文本：为图片提供全面的描述

最佳实践

性能优化
  • 资源优化：缩小并压缩 CSS/JS 文件
  • 图片优化：使用现代图片格式并启用延迟加载
  • 关键 CSS：实现关键 CSS，以加快渲染速度
  • JavaScript 优化：减少 JavaScript 负载
  • 缓存：充分利用浏览器和 CDN 缓存
代码组织
  • 模块化结构：将代码组织为逻辑清晰、便于维护的模块
  • 模板复用：创建可复用的模板组件
  • CSS 架构：使用 BEM 或类似方法
  • JavaScript 模块：使用 RequireJS 模块组织 JS
  • 版本控制：有效使用 Git 进行协作开发
Magento 专属模式
  • 布局 XML：掌握布局指令和回退机制
  • UI 组件：使用 Magento 的 UI 组件库
  • LESS 变量：利用 Magento 的 LESS 变量系统
  • 主题继承：正确实现父子主题关系
  • 回退机制：了解模板和布局的回退顺序
安全
  • 输出转义：始终对模板中的输出进行转义
  • 防止 XSS：正确清理用户输入
  • CSRF 防护：实现表单密钥验证
  • 资源安全：安全地提供资源

测试

  • 浏览器测试：在支持的浏览器中进行测试
  • 响应式测试：在各种设备和屏幕尺寸上进行测试
  • 性能测试：验证 Core Web Vitals
  • 无障碍访问测试：使用屏幕阅读器和键盘导航进行测试
  • 功能测试：确保所有功能均正常运行

参考资料

专注于创建能够带来卓越用户体验，同时满足性能和无障碍访问标准的主题。

评论

支持 Markdown