Frontend dev guide

前端高级开发工程师方案产出指南

Overview

本技能将前端开发领域的方法论转化为可执行的工作流。当用户提出任何前端开发需求时，先识别该需求属于 5 类场景中的哪一类，再按对应场景的产出清单生成完整的技术方案文档——从架构设计到 CI/CD 配置，覆盖前端工程的完整生命周期。

详细的方法论、各场景产出清单、组件设计规范、性能KPI、类型安全策略、浏览器兼容策略、AI工具建议、质量检查清单均存放在 references/前端开发方法论.md，在执行前必须读取对应章节。

触发条件

当出现以下任一情况时触发本技能：

• 用户需要搭建新前端项目，涉及技术选型
• 用户需要开发新功能模块，涉及多页面/多组件
• 用户需要修复 Bug 或做小范围优化
• 用户需要做框架升级/迁移（如 Vue2→Vue3、Webpack→Vite）
• 用户需要做技术预研、选型评估、PoC 验证
• 用户提到"前端架构""组件设计""状态管理""性能优化""前端方案"等关键词

执行流程

按以下 5 步顺序执行，不可跳步。

Step 1: 需求理解

• 解析用户输入的前端开发需求
• 提取关键信息：项目类型（Web/小程序/H5/SSR）、技术栈偏好（React/Vue/其他）、功能范围、现有技术基础、团队规模与经验
• 识别缺失的关键信息，主动向用户提问补全（一次最多 2-3 个最关键的问题）

Step 2: 场景识别

读取 references/前端开发方法论.md 的"一、场景识别"章节，用下表判断：

场景	名称	判断条件（满足任一）	产出量
场景一	0→1 新前端项目	全新项目、需从技术选型开始、涉及项目脚手架搭建	10-12类
场景二	中大型功能开发	新增模块、涉及3+页面/组件、新路由+状态+API	6-8类
场景三	小优化/Bug修复	单组件、单Bug、小范围重构	2-3类
场景四	大版本技术升级	框架迁移、构建工具升级、涉及全局变更	8-10类
场景五	技术预研/选型	新技术评估、PoC验证	3-4类

识别流程：是否全新项目？→ 场景一；是否框架迁移/大版本升级？→ 场景四；是否为技术评估？→ 场景五；是否涉及3+页面/新路由/新状态/新API？→ 场景二；否则 → 场景三。

Step 3: 与用户确认场景

输出场景判断结果，包含：

1. 场景判断：场景X
2. 判断依据
3. 建议产出清单
4. 预估周期

向用户确认后进入产出阶段。

Step 4: 按清单产出技术方案

读取 references/前端开发方法论.md 中对应场景的章节，按场景获取必备产出清单。

产出要求：

• 代码示例使用对应技术栈（React用JSX/Hooks，Vue用SFC/Composition API）
• 架构设计附带目录结构示例
• 接口定义给出完整的TypeScript类型
• 组件设计覆盖 default / loading / empty / error 四种状态
• 性能方案附具体指标目标（LCP/FID/CLS）
• 产出后保存为 Markdown 文件

Step 5: 质量检查

读取 references/前端开发方法论.md 的"九、产出质量检查清单"章节，对照检查：

代码质量： 组件职责单一、4种状态有处理、类型完整无any滥用、Lint通过 性能： 大列表虚拟滚动、图片懒加载、代码分割合理、无内存泄漏 安全： XSS防范、敏感信息不暴露、HTTPS强制 测试： 关键逻辑有单元测试、关键组件有测试、关键路径有E2E 可维护性： 目录清晰、命名有意义、文档齐全

识别遗漏内容并补充，最后输出交付清单。

资源说明

references/前端开发方法论.md

完整的方法论文档，包含：

• 5个场景的详细产出清单与技术要点
• 组件设计规范（单一职责/Props向下Events向上/组合优于继承）
• 性能KPI目标（LCP/FID/CLS/TTI/Bundle Size）
• CSS方案决策树
• TypeScript类型安全等级
• 浏览器兼容策略
• AI工具使用建议
• 产出质量检查清单

注意事项

• 不要跳过 Step 3 的用户确认
• 技术选型必须给出"为什么选A不选B"的理由和权衡，不是只列结论
• 4种状态（default/loading/empty/error）是每个组件的硬性要求
• 性能指标要具体到数字，不要只说"要优化"
• 安全是必选项，XSS/HTTPS/敏感信息三个检查点缺一不可
• 场景四（升级迁移）的回滚预案是硬性要求，不能省略