Agent Skills
返回列表
高转化商城前端体检

高转化商城前端体检

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md 的安装指南，将 @user_8d36cde0/guoyiyi-v004-vercel-react-best-practices 安装到你的 AI 助手中。

技能介绍

要解决的问题

商城前端上线后，常见的隐性漏斗损耗往往不在产品逻辑，而在工程细节：首屏 LCP 超过 3 秒导致用户直接跳出、商品图片没有配置 loading="lazy" 拖慢整页渲染、路由级代码分割失效把整棵依赖树打进首包、表单交互缺少无障碍标注让移动端转化受阻。这些问题在开发阶段很少触发告警，却在真实流量下持续拉低下单转化。

技能如何工作

该技能面向 Vercel + React 技术栈 的电商前端项目，以静态审查 + 最佳实践清单的方式逐项排查可优化点，核心能力包括：

  • 渲染性能检查：识别首屏关键资源未预加载、图片与字体加载策略缺失、useEffect 中触发额外重渲染的反模式
  • 打包与路由分析：检查 next/dynamic、动态 import() 与 Server Components 边界是否合理切分，避免客户端 bundle 膨胀
  • 转化路径前端审计：检查加购、结算、支付组件的状态管理与错误兜底，确认下单链路每一步都有明确的用户反馈
  • 可访问性与移动端适配：核查表单标签、焦点管理、触控区域尺寸与响应式断点是否满足移动端转化要求

使用时只需将项目路径或代码上下文提供给技能，它会按清单逐项输出问题定位、风险说明与对应的修改建议，方便直接对照改代码。

适用边界

  • 仅覆盖前端层面的问题，后端接口性能、支付网关配置不在审查范围内
  • 需要项目至少使用 React 框架；纯原生或其他框架的技术栈适配有限
  • 审查结果依赖代码上下文完整度，动态运行时产生的数据问题需结合线上监控验证

使用场景

  • 线上商城 LCP 指标过高导致跳出率上升，需要定位首屏渲染阻塞点并给出优化方案。
  • Next.js 商城首包体积过大，需排查路由级代码分割与动态 import 失效导致的依赖树膨胀。
  • 结算页面表单交互缺少错误兜底，需审查支付组件状态管理并补全加购到下单的反馈链路。
  • 移动端商品详情页触控区域过小且缺少无障碍标注，需按规范完成响应式与表单适配改造。

适合人员

  • 使用 Next.js 和 Vercel 构建独立站的前端工程师，需要在版本上线前排查首屏加载与打包性能隐患。
  • 负责电商业务转化率的前端技术负责人，需要定位结算链路中的前端性能损耗并推动技术改造。
  • 维护老旧 React 商城项目的全栈开发者，需借助最佳实践清单梳理代码债务并修复移动端兼容性问题。
  • 专注 Web 性能优化的前端专家，需要在不改变业务逻辑的前提下通过代码分割与懒加载提升核心网页指标。