claude-code-best-practice-zh: Skill for Claude Code

"从Vibe Coding到代理工程"框架

此技能教授演示文稿背后的概念模型。每张幻灯片和章节都讲述一个故事：开发者如何逐步从无结构的"vibe coding"（低级）迈向高级代理工程（高级）。

核心概念

**Vibe Coding（低级）**是指开发者使用Claude Code但没有任何结构——没有项目上下文、没有约定、没有可复用知识。每个提示都是抛硬币。Claude可能会创建随机端点、忽略现有模式、跳过测试，产生不一致的代码。代码库随着每次交互趋向熵增。

**Agentic Engineering（高级）**是指Claude Code作为完全配置的工程系统运行。它知道项目架构（CLAUDE.md）、遵循作用域约定（Rules）、按需加载领域专业知识（Skills）、委托给专业 worker（Agents）、编排多步骤工作流（Commands）、自动化生命周期事件（Hooks）、连接外部工具（MCP Servers）。每个提示都产生一致、经过测试的生产级代码。

这两个极端之间的旅程是渐进式和累积性的。每个最佳实践都建立在前一个之上，演示文稿按照开发者应该采用的顺序来教授。

4级旅程系统

演示文稿使用4级评分系统而非百分比条：

级别	顺序	颜色	旅程条高度	描述
Low	1	红色/橙色 (hsl(0, 70%, 45%))	25%	Vibe coding领地——无结构
Medium	2	黄色 (hsl(40, 70%, 45%))	50%	结构化工作流，部分自动化
High	3	浅绿色 (hsl(80, 70%, 45%))	75%	领域知识、技能、自定义代理
Pro	4	深绿色 (hsl(120, 70%, 45%))	100%	完整代理工程，多代理团队

旅程条在幻灯片1（标题幻灯片）隐藏，从幻灯片2开始显示。级别通过关键过渡幻灯片上的 data-level 属性设置，随后幻灯片继承该级别直到下一个级别变化。当级别变化时，.level-badge 由JS注入到幻灯片的 h1 中（不要在HTML中硬编码这些）。

运行示例：TodoApp Monorepo

每种技术都在一个现实的全栈项目中演示。演示文稿展示了从纯项目（vibe coding）到完整Claude Code配置（代理工程）的转变：

之前（Vibe Coding）：

todoapp/
├── backend/          # FastAPI (Python)
│   ├── main.py
│   ├── routes/
│   ├── models/
│   └── tests/
└── frontend/         # Next.js (TypeScript)
    ├── components/
    ├── pages/
    └── lib/

之后（Agentic Engineering）：

todoapp/
├── .claude/                  # Claude Code 配置
│   ├── agents/               # 自定义子代理
│   ├── skills/               # 领域知识
│   ├── commands/            # 斜杠命令
│   ├── hooks/                # 生命周期脚本
│   ├── rules/                # 模块化指令
│   ├── settings.json         # 团队设置
│   └── settings.local.json   # 个人设置
├── backend/
│   └── CLAUDE.md             # 后端指令
├── frontend/
│   └── CLAUDE.md             # 前端指令
├── .mcp.json                 # 管理的MCP服务器
└── CLAUDE.md                 # 项目指令

为什么选TodoApp？ 它足够小以适应幻灯片，但足够复杂以展示真实问题：一个后端有路由模式和测试约定，一个前端有组件层次结构和设计代币，以及一个需要跨领域关注点协调（如添加新功能）的monorepo结构。