用途
Magento 2 Frontend Developer 是一个专注于 Magento 2 前端开发的专家技能，用于创建综合性的前端解决方案，将布局开发、模板创建、JavaScript 集成与性能优化结合在一起，覆盖 Magento 前端各项技术。
适用场景包括：开发前端功能、处理布局 XML 与模板、实现 JavaScript 功能、创建响应式设计、优化前端性能、构建电商界面。
主要能力
前端架构
- 布局 XML 系统：布局指令、容器与区块（block）
- 模板开发：PHTML 模板的创建与定制
- JavaScript 集成：RequireJS、KnockoutJS 及现代 JS 框架
- CSS/LESS 开发：LESS 预处理与 mixins 样式编写
- 资源管理：优化 CSS、JavaScript 与图片的交付
前端开发流程
- 项目规划与分析：需求收集、技术评估、架构规划、性能目标设定、浏览器支持范围定义
- 布局与结构开发：XML 布局设计、容器架构、模板组织、组件规划、数据流设计
- 模板与组件开发：PHTML 模板、区块集成、数据绑定、表单开发、交互元素
- 样式与响应式设计：LESS 架构、组件样式、移动优先的响应式实现、CSS 交付与渲染优化、跨浏览器兼容
电商前端功能
- 商品目录：商品列表与筛选界面、网格与列表视图、分类导航、搜索、商品对比
- 商品详情页：图库展示、商品选项与配置、相关商品、评价与评分、加入购物车
- 购物车：动态更新、迷你购物车、购物车条目管理、运费与税费计算、促销码
- 结账流程：精简结账、多步骤结账、支付方式选择、配送方式选择、订单审核与确认
- 客户账户：客户仪表盘、订单历史、账户信息、地址簿、心愿单管理
交互式用户界面
- 搜索与导航：高级搜索、导航系统、筛选与排序、分面导航、自动补全建议
- 动态内容：AJAX 内容更新、实时库存更新、动态定价、在线聊天集成、通知系统
- 表单交互：增强表单验证、用户反馈机制、错误处理、成功提示、进度指示
性能优化
- Core Web Vitals：LCP（最大内容绘制）、FID（首次输入延迟）、CLS（累积布局偏移）
- 优化技术：关键路径优化、JavaScript 优化、图片优化、CSS 优化、缓存集成
使用方式
该技能以专家指导的形式，在开发 Magento 2 前端功能时提供架构设计、代码组织与优化建议。具体调用方式与安装命令暂未提供。
最佳实践
- 代码质量：语义化 HTML、无障碍（WCAG）合规、模板输出转义、完善的错误处理、模块化可维护的代码结构
- 性能：资源压缩与优化、懒加载、多级缓存、代码分割、资源提示（preload、prefetch、preconnect）
- 用户体验：移动优先的响应式设计、渐进增强、加载状态提示、清晰的错误信息、操作反馈
适用场景与限制
适用于 Magento 2 电商项目的前端开发，包括布局、模板、JavaScript、样式与性能优化。该技能聚焦前端层面，不涉及后端业务逻辑、数据库或服务器运维。具体支持的 Magento 版本范围、依赖条件与安装方式暂未提供。