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

"从 Vibe Coding 到 Agentic Engineering"框架

本技能教授演示文稿背后的概念模型。每张幻灯片和每个章节都在讲述一个故事：开发者如何从无结构的"vibe coding"（低级）逐步进阶到高级的 agentic engineering（高级）。

核心概念

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

Agentic Engineering（高级） 是指 Claude Code 作为一个完全配置的工程系统运行。它了解项目架构（CLAUDE.md）、遵循作用域约定（Rules）、按需加载领域专业知识（Skills）、委派给专业工作者（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%	领域知识、Skills、自定义 Agents
Pro	4	深绿色 (hsl(120, 70%, 45%))	100%	完全的 agentic engineering，多代理团队

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

贯穿示例：TodoApp Monorepo

每项技术都在一个真实的全栈项目上进行演示。演示文稿展示了从普通项目（vibe coding）到具有完整 Claude Code 配置（agentic engineering）的项目的转变：

改造前（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/               # 自定义 Subagents
│   ├── skills/               # 领域知识
│   ├── commands/             # Slash Commands
│   ├── hooks/                # 生命周期脚本
│   ├── rules/                # 模块化指令
│   ├── settings.json         # 团队设置
│   └── settings.local.json   # 个人设置
├── backend/
│   └── CLAUDE.md             # 后端指令
├── frontend/
│   └── CLAUDE.md             # 前端指令
├── .mcp.json                 # 托管的 MCP 服务器
└── CLAUDE.md                 # 项目指令