# Frontend Dev Guide

> 前端高级开发工程师方案产出指南。当用户提出前端开发需求、需要产出技术方案时触发。覆盖场景：前端项目搭建、功能模块开发、Bug修复、框架升级迁移、技术选型预研。先识别需求属于5类场景中的哪一类（0到1新前端项目/中大型功能开发/小优化Bug修复/大版本技术升级/技术预研选型），再按对应场景的产出清单生成完整的技术方案文档（架构设计/组件设计/状态管理/路由/性能方案/测试策略/CI-CD等）。触发词：前端开发、前端架构、前端项目、组件设计、状态管理、性能优化、框架升级、前端技术选型、Web开发、H5开发。

- Skill: `genapohub/frontend-dev-guide` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add genapohub/frontend-dev-guide`
- Raw SKILL.md: https://api.skillmd.com/api/skills/genapohub/frontend-dev-guide/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: genapohub (https://skillmd.com/u/genapohub)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/genapohub/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` 中对应场景的章节，按场景获取必备产出清单。

> **专家蒸馏增量（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（静态资源部署）