围绕 agent 协作的前端工程师中文精编手册。
🌐 Live: https://frontend-engineer-handbook.vercel.app/
一本面向不同经验前端工程师的中文精编手册,主题是AI 时代前端工程师的 必要学习路线与核心知识点。
它不打算覆盖"前端的一切"。它做三件事:
- 告诉你 2026 年必须知道的事 —— 以及什么不再需要学(浮动布局、jQuery、ES5 polyfill、手写 Promise……)
- 给出 AI 可委托清单 —— 哪些任务现在可以放心让 AI 写、哪些不行、判断依据是什么
- 提供动手实践 —— 通过构建 mini bundler / mini framework / mini agent app 理解原理
| 读者 | 路径 |
|---|---|
| 新入行 / 转行 | 按章节顺序读 |
| 1–3 年经验 | 搜索或按需查阅 |
| 资深工程师 | 速查 + AI 可委托清单 |
施工中,本着 build in public 的精神先发布、再迭代:
- ✅ 第 0 章 如何使用本手册
- ✅ 第 1 章 AI 时代前端工程师的能力地图
- 🚧 第 2 章 Web 平台基石
- ⏳ 第 3–10 章
- ⏳ 附录 A/B/C/D
完整目录见 specs/0003-table-of-contents/spec.md。
- 完全免费 — 手册内容免费,必要学习路径不依赖任何付费资源
- 一手来源 — 引用 W3C / WHATWG / TC39 / MDN / web.dev / 框架官方文档;不引用付费课程或社区博客
- 判断驱动 — 每个知识点附"为什么 AI 时代仍要学"的判断
详见 specs/ 下的决策记录。
技术栈与手册第 5–9 章教学完全一致:
- Next.js 16 + React 19.2 + React Compiler(stable)
- Cache Components + PPR(Partial Prerender)
- Tailwind CSS 4(CSS-first 配置)
- OXC 工具链(oxlint + oxfmt)
- Turbopack(默认)
- next-devtools-mcp(agent 集成)
- Vercel 部署 + Speed Insights + Web Analytics
第 10 章动手实践会直接参照本项目源码做对照分析。
pnpm install
pnpm dev # localhost:3000,启用 Turbopack完整命令清单见 AGENTS.md 顶部的 Commands 表。
单作者维护。Issue 欢迎,PR 请先开 Issue 讨论。
约定见 AGENTS.md:
- Conventional Commits 原子提交
- 强制 CI:type-check / oxlint / oxfmt / vitest / build / playwright (CI only)
- 引用必走 SPEC-0002 内容来源准入
MIT — 内容与代码均开源。详见 LICENSE。