genapohub 前端高级开发工程师方案产出指南
Overview
本技能将前端开发领域的方法论转化为可执行的工作流。当用户提出任何前端开发需求时，先识别该需求属于 5 类场景中的哪一类，再按对应场景的产出清单生成完整的技术方案文档——从架构设计到 CI/CD 配置，覆盖前端工程的完整生命周期。
详细的方法论、各场景产出清单、组件设计规范、性能KPI、类型安全策略、浏览器兼容策略、AI工具建议、质量检查清单均存放在 references/前端开发方法论.md，在执行前必须读取对应章节。
触发条件
当出现以下任一情况时触发本技能：
- 用户需要搭建新前端项目，涉及技术选型
- 用户需要开发新功能模块，涉及多页面/多组件
- 用户需要修复 Bug 或做小范围优化
- 用户需要做框架升级/迁移（如 Vue2→Vue3、Webpack→Vite）
- 用户需要做技术预研、选型评估、PoC 验证
- 用户提到"前端架构""组件设计""状态管理""性能优化""前端方案"等关键词
记忆系统
本技能的完整记忆管理规则（写日志/轮转归档/自清理）定义在 references/记忆规则.md，执行前必须读取。
- 执行前（必须）：读取
references/记忆规则.md中的 Step 0 加载规范 +.skills-memory/MEMORY.md本技能对应分段 +.skills-memory/YYYY-MM-DD.md（今日日志，如存在） - 执行后（硬性要求，不可跳过）：追加
[frontend-dev-guide] 场景描述 → 关键决策到.skills-memory/YYYY-MM-DD.md；如有可复用决策，去重后追加到 MEMORY.md 对应分段。记忆写入是交付物的一部分——如果因环境限制无法写入，必须在最终回复中明确告知用户「记忆未写入」及原因，不得静默跳过 - 轮转检查：
- 独立使用：按
references/记忆规则.md中的触发条件和完整轮转算法执行归档 - 被 team-orchestrator 调度时：跳过全部记忆操作（写入 + 轮转），由调度官 Step 6（写日志）/ Step 7（轮转归档）统一处理
- 独立使用：按
执行流程
按以下 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: 与用户确认场景
输出场景判断结果，包含：
- 场景判断：场景X
- 判断依据
- 建议产出清单
- 预估周期
向用户确认后进入产出阶段。
Step 4: 按清单产出技术方案
读取 references/前端开发方法论.md 中对应场景的章节，按场景获取必备产出清单。
专家蒸馏增量（2026-09-06 并入）：产出代码/实现 UI 时读取
references/expert-distill/mvp-frontend-蒸馏.md（CSS Pro Max 五条工艺规范——阴影光晕/150ms 过渡/纯色禁用+四层配比/四级圆角/字距分级 + SEO 实操 + P0 代码级三禁扫描命令），对照自查可显著去 AI 味。性能量化/大数据表格虚拟化/交付模板阶段，另读取references/expert-distill/frontend-developer-蒸馏.md（像素匠：CWV 基线 LCP<2.5s/CLS<0.1、虚拟滚动 + memo 三件套、UI/性能/无障碍三节交付模板、a11y 自动化进 CI）。项目含 App 端 → 读references/expert-distill/mobile-developer-蒸馏.md（掌中灵：原生 vs 跨平台选型 / 移动性能基线 启动<3s·内存<100MB·电量<5%/h / 离线优先 / 平台集成清单）；含微信小程序端 → 读references/expert-distill/wechat-miniprogram-蒸馏.md（小程达：平台硬约束 / setData 性能纪律 / 登录支付订阅集成模式 / 过审 checklist / 量化指标）。
产出要求：
- 代码示例使用对应技术栈（React用JSX/Hooks，Vue用SFC/Composition API）
- 架构设计附带目录结构示例
- 接口定义给出完整的TypeScript类型
- 组件设计覆盖 default / loading / empty / error 四种状态
- 性能方案附具体指标目标（LCP/FID/CLS）
- 必须读取并应用"十一、超越AI味"章节：产出方案时融入真实岗位经验，拒绝模板化输出
- 优先使用可填空模板：方法论通用规范章节末尾的「### XX模板（可填空）」，直接按占位符填充（无对应模板则按清单产出）
- 产出后保存为 Markdown 文件
Step 5: 质量检查
读取 references/前端开发方法论.md 的"十、产出质量检查清单"章节，对照检查：
代码质量： 组件职责单一、4种状态有处理、类型完整无any滥用、Lint通过 性能： 大列表虚拟滚动、图片懒加载、代码分割合理、无内存泄漏 安全： XSS防范、敏感信息不暴露、HTTPS强制 测试： 关键逻辑有单元测试、关键组件有测试、关键路径有E2E 可维护性： 目录清晰、命名有意义、文档齐全
记忆已写入（.skills-memory/YYYY-MM-DD.md 有本次会话条目，无则立即补写）
识别遗漏内容并补充。
- 去AI味：对照"十一、超越AI味"逐条自检，拒绝模板化产出
最后输出交付清单。
资源说明
references/前端开发方法论.md
完整的方法论文档，包含：
- 5个场景的详细产出清单与技术要点
- 组件设计规范（单一职责/Props向下Events向上/组合优于继承）
- 性能KPI目标（LCP/FID/CLS/TTI/Bundle Size）
- CSS方案决策树
- TypeScript类型安全等级
- 浏览器兼容策略
- AI工具使用建议
- 产出质量检查清单
- 超越AI味：真实岗位经验注入指南（拒绝模板化产出）
注意事项
- 不要跳过 Step 3 的用户确认
- 技术选型必须给出"为什么选A不选B"的理由和权衡，不是只列结论
- 4种状态（default/loading/empty/error）是每个组件的硬性要求
- 性能指标要具体到数字，不要只说"要优化"
- 安全是必选项，XSS/HTTPS/敏感信息三个检查点缺一不可
- 场景四（升级迁移）的回滚预案是硬性要求，不能省略
岗位职责与产出标准（业界锚点 · 2026-08 学习）
现实岗位职责：①页面/组件开发——设计稿还原、响应式布局、跨端适配；②交互实现——事件处理/动效/表单验证；③数据对接——REST/GraphQL API、状态管理、缓存；④性能优化——首屏加载/懒加载/Code Splitting/Core Web Vitals；⑤安全开发——XSS/CSRF 防护、敏感数据处理；⑥工程化建设——ESLint 规范、CI/CD、组件库沉淀。
业界产出标准：前端页面代码（ESLint 规范）、组件库+使用文档、单元测试代码、接口联调成果、性能优化报告。质量要求：还原设计稿≥95%、LCP 达标、浏览器兼容（Chrome/Firefox/Safari/Edge≥90%）、WCAG 2.1 AA 无障碍、无卡顿闪烁。
交付衔接：前端方案交付给后端开发（接口约定）+ QA（组件测试点）+ DevOps（静态资源部署）