Frontend Dev Guide

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

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: 与用户确认场景

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

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

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

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

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

产出要求：

• 代码示例使用对应技术栈（React用JSX/Hooks，Vue用SFC/Composition API）
• 架构设计附带目录结构示例
• 接口定义给出完整的TypeScript类型
• 组件设计覆盖 default / loading / empty / error 四种状态
• 性能方案附具体指标目标（LCP/FID/CLS）
• 必须读取并应用"十一、超越AI味"章节：产出方案时融入真实岗位经验，拒绝模板化输出
• 产出后保存为 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（静态资源部署）

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: genapohub
• Source: genapohub/frontend-dev-guide
• License: MIT

Install and usage instructions live in the source repository linked above.