1. 项目概述从单兵作战到团队协作的AI开发范式如果你还在把Claude Code当作一个单纯的代码补全工具那可能错过了它最核心的价值。最近几个月围绕Claude Code的讨论已经从“如何安装”和“基础使用”转向了更深层的架构话题比如CLAUDE.md、skills、hooks和subagents。这些概念共同指向一个目标将Claude Code从一个“聪明的代码助手”转变为一个可以自主协作、分工明确的“完整开发团队”。这个转变的核心就藏在你项目根目录下的五个关键文件夹里。它们不是随意创建的而是一套经过社区实践验证的、用于构建复杂AI代理Agent开发工作流的标准化目录结构。这套结构让Claude Code能够理解项目的全局上下文、调用特定工具、处理不同阶段的任务甚至让不同的“子代理”各司其职模拟出产品经理、架构师、开发工程师和测试工程师协同工作的场景。对于任何希望将AI深度集成到开发流程尤其是进行Agent化开发的团队或个人来说理解并运用这五个文件夹是解锁Claude Code全部潜力的关键一步。2. 核心架构解析五个文件夹的职责与协作关系这五个文件夹构成了Claude Code Agent开发套件Agent Development Kit的骨架。它们分别承载了配置、技能、数据、工作流和代理管理的职责共同确保Claude Code能够以结构化和可预测的方式运行。2.1.claude文件夹项目的“大脑”与“宪法”这是整个体系的控制中心包含了最高级别的配置和指令。其核心文件是CLAUDE.md你可以把它理解为项目的“宪法”或“总纲”。这个文件定义了Claude Code在这个项目中应该扮演的总体角色、遵守的核心原则、代码风格规范以及全局性的任务处理流程。一个典型的CLAUDE.md会包含以下部分角色定义明确告诉Claude Code它在这个项目中是“全栈开发专家”、“系统架构师”还是“代码审查助手”。项目上下文简要说明项目的技术栈如React Node.js PostgreSQL、核心业务逻辑和当前所处的开发阶段。开发规范代码风格遵循Airbnb还是Google规范、命名约定、文件组织方式、提交信息格式等。工作流指令例如“在修改任何文件前请先分析影响范围并给出计划”“所有生成的代码必须包含适当的错误处理和日志”“优先使用项目内已定义的工具函数和组件”。限制与边界明确哪些区域是禁区如不能修改某个核心配置文件或者哪些决策需要人工确认。.claude文件夹下可能还会有其他配置文件用于更细粒度的控制但CLAUDE.md是基石。它确保了Claude Code在任何时候都对齐项目的宏观目标。2.2skills文件夹团队的“技能工具箱”如果说.claude定义了“做什么”和“遵循什么原则”那么skills文件夹就提供了“怎么做”的具体能力。这里存放着各种可复用的“技能”Skills。一个技能本质上是一段自包含的、用于完成特定任务的指令或代码模板。技能可以分为几类代码生成技能例如“生成一个符合项目规范的React函数组件”或“创建一个Express.js的CRUD路由模板”。代码转换技能例如“将JavaScript类组件转换为函数组件并集成Hooks”。代码分析技能例如“静态分析当前文件的圈复杂度并提出重构建议”。工具调用技能封装了对第三方API、命令行工具或数据库的操作。例如“调用GitHub API获取仓库信息”“运行特定的数据库迁移脚本”。工作流技能组合多个简单步骤完成一个复杂流程。例如“代码审查并自动修复”技能可能包含了代码分析、问题定位、生成修复建议等多个子步骤。通过将能力模块化为技能你可以像搭积木一样让Claude Code组合使用它们来解决复杂问题。社区有大量的skills可以下载和共享这也是“superpower skills”和“skills推荐”等热词的来源。管理好skills文件夹就是为你的AI团队装备了一个强大的武器库。2.3hooks文件夹自动化的工作流“触发器”hooks是实现自动化和上下文感知的关键。它们类似于Git Hooks是在特定事件触发器发生时自动执行的一系列动作。Claude Code的Hooks允许你在开发过程的特定节点注入自定义逻辑。常见的Hook触发器包括文件保存后(onSave): 自动运行代码格式化、lint检查或运行相关的单元测试。代码生成前/后(beforeGenerate/afterGenerate): 对即将生成或已生成的代码进行预处理或后处理比如自动添加版权头注释、进行安全性扫描。对话上下文变化时(onContextChange): 当用户切换讨论焦点如从前端转到后端时自动加载相关的技能或上下文文档。Hook的核心实现原理是事件监听和函数调用。你需要在一个Hook文件如onSave.js中编写具体的逻辑。例如一个简单的保存后格式化Hook可能包含调用prettier --write命令的代码。合理使用Hooks可以将重复性工作完全自动化让Claude Code以及开发者本人更专注于创造性任务。2.4data文件夹团队的“共享记忆库”AI代理需要上下文才能做出明智决策。data文件夹就是用来存储和管理这些上下文信息的专用空间。它避免了将项目相关的知识零散地存放在对话历史或注释中提供了结构化的存储方式。这里可能存放项目知识库产品需求文档PRD的精简版、系统架构图描述、API接口文档、领域术语表。开发上下文当前迭代的任务清单、尚未解决的Bug列表、与第三方服务集成的配置说明。会话记忆跨对话的重要决策记录、已尝试过的解决方案及其结果避免重复踩坑。向量数据库索引如果你集成了本地向量数据库如ChromaDB这里可能存放着代码库文档的嵌入向量索引用于实现基于语义的代码搜索和问答。通过让Claude Code在需要时读取data文件夹下的特定文件你可以确保它始终拥有完成任务所需的最新、最相关的背景信息实现“持久化记忆”而不是每次对话都从头开始。2.5agents文件夹分工明确的“子团队”这是实现“完整开发团队”模拟最核心的一环。agents文件夹下可以定义多个“子代理”Subagents每个子代理都是一个专门化的Claude Code实例拥有自己独立的角色定义一个专属的AGENT_NAME.md文件和可能专属的技能集。“Fan out subagents”模式就是指将一个复杂任务分解后分发给不同的子代理并行处理。例如architect_agent负责高层设计、技术选型和模块划分。它的ARCHITECT.md里强调系统思维、可扩展性和性能。frontend_agent专门处理UI组件、状态管理和前端逻辑。它的技能库里装满了React、Vue、CSS-in-JS相关的技能。backend_agent专注于API设计、数据库建模和业务逻辑。它的上下文里充满了服务器框架和数据库的知识。review_agent专职代码审查关注代码质量、安全漏洞和规范符合度。你作为“项目经理”可以通过主Claude Code或一个orchestrator_agent来协调这些子代理的工作。例如接到“开发一个用户登录功能”的需求后主代理可以依次调用架构师代理出设计图前端代理做页面后端代理写API最后让审查代理检查代码。这种分工协作的模式极大地提升了处理复杂、多面性任务的效率和专业性。3. 实战搭建从零构建你的五个文件夹理解了理论我们来动手搭建。假设我们要为一个名为“TaskFlow”的React Node.js全栈项目管理工具配置Claude Code团队。3.1 初始化项目结构与基础配置首先在你的taskflow项目根目录下创建这五个文件夹。mkdir -p .claude skills hooks data agents接下来创建最重要的.claude/CLAUDE.md文件# TaskFlow 项目 - Claude Code 主代理角色定义 ## 角色 你是TaskFlow项目的首席技术官兼高级全栈开发工程师。你深度理解本项目基于React 18前端、Express.js后端和PostgreSQL数据库的技术栈并致力于交付高质量、可维护且符合业务需求的代码。 ## 核心原则 1. **安全第一**任何代码生成或修改必须考虑安全性避免SQL注入、XSS等常见漏洞。 2. **一致性优先**严格遵循本项目既定的代码风格和架构模式。不引入不必要的变体。 3. **渐进式增强**在添加新功能或重构时优先考虑对现有系统的影响确保平滑过渡。 4. **文档即代码**重要的逻辑和决策需在代码中以清晰的注释或更新的README形式体现。 ## 项目上下文 - **目标**构建一个轻量级、团队协作的项目管理与任务跟踪工具。 - **当前阶段**核心身份认证与用户管理模块已基本完成正在开发项目管理与任务CRUD模块。 - **代码规范**前端使用ESLintAirbnb配置和Prettier后端使用ESLintStandard配置。提交信息遵循Conventional Commits格式。 - **关键目录** - /client - React前端应用 - /server - Express.js后端API - /packages - 共享的TypeScript类型定义和工具函数 ## 工作流指令 1. 在实施任何重大更改前请先简要描述你的计划并评估其对其他模块的影响。 2. 生成代码时优先复用/packages下的共享类型和工具。 3. 所有API响应必须遵循统一的格式{ success: boolean, data: any, message?: string }。 4. 前端组件请使用函数组件和React Hooks状态管理优先使用Context API仅在复杂场景考虑引入Zustand。 ## 限制 - 未经明确指令不得修改/server/config/database.js中的核心数据库连接配置。 - 不得降级项目中的关键依赖包版本。这个文件为Claude Code建立了全局的行为准则。3.2 开发与集成核心技能进入skills文件夹我们创建几个基础技能。首先是一个创建React组件的技能skills/create-react-component.md# 技能创建标准React函数组件 ## 描述 根据提供的Props接口定义生成一个符合TaskFlow项目规范的React函数组件文件。 ## 输入 - componentName: 组件名称PascalCase - propsInterface: TypeScript Props接口定义字符串 - hasState: 是否需要内部状态默认false - hasSideEffect: 是否需要副作用如useEffect默认false ## 输出 一个完整的.tsx文件包含 1. 导入React和必要的Hooks。 2. 定义的Props接口。 3. 一个使用React.FC声明的函数组件。 4. 基础的样式导入来自./ComponentName.module.css。 5. 导出语句。 ## 指令 1. 组件必须为默认导出。 2. 如果hasState为真使用useState Hook并给出合理的初始状态示例。 3. 如果hasSideEffect为真添加一个useEffect Hook并包含清理函数。 4. 在组件顶部添加JSDoc注释简要说明组件用途。 5. 代码风格严格遵循项目ESLintAirbnb配置。 ## 示例调用 “使用‘创建标准React函数组件’技能组件名UserProfileProps接口为interface UserProfileProps { userId: string; editable: boolean; }需要状态和副作用。”再创建一个后端API技能skills/create-express-route.md用于生成标准的CRUD路由处理器。通过将这些技能文件化你可以在任何需要的时候通过自然语言指令精确调用它们保证了输出的一致性。3.3 配置自动化Hooks提升效率在hooks文件夹下创建onSave.js来实现保存时自动格式化。// hooks/onSave.js const { exec } require(child_process); const path require(path); /** * onSave Hook - 在文件保存后自动执行代码格式化 * param {string} filePath - 被保存文件的绝对路径 */ module.exports async function onSave(filePath) { const projectRoot process.cwd(); const relativePath path.relative(projectRoot, filePath); console.log([Hook] 文件已保存: ${relativePath}); // 根据文件类型和位置决定格式化命令 let command null; if (relativePath.startsWith(client/) (relativePath.endsWith(.js) || relativePath.endsWith(.jsx) || relativePath.endsWith(.ts) || relativePath.endsWith(.tsx))) { command npx prettier --write ${filePath} cd client npx eslint ${relativePath.replace(client/, )} --fix; } else if (relativePath.startsWith(server/) (relativePath.endsWith(.js) || relativePath.endsWith(.ts))) { command npx prettier --write ${filePath} cd server npx eslint ${relativePath.replace(server/, )} --fix; } if (command) { exec(command, (error, stdout, stderr) { if (error) { console.error([Hook] 执行格式化时出错: ${error.message}); return; } if (stdout) console.log([Hook] 输出: ${stdout}); if (stderr) console.warn([Hook] 警告: ${stderr}); console.log([Hook] 已完成对 ${relativePath} 的格式化与Lint检查。); }); } };这个Hook会在开发者保存文件后自动触发根据文件路径判断是前端还是后端代码并执行对应的Prettier格式化和ESLint自动修复确保代码风格统一。3.4 构建数据上下文与专属子代理在data文件夹下创建project_context.md存放项目特有的知识。# TaskFlow 项目核心上下文 ## 业务实体定义 1. **User**: 用户属性包括 id, email唯一, hashedPassword, displayName, avatarUrl, role‘admin‘ ‘member‘。 2. **Project**: 项目属性包括 id, name, description, ownerId外键指向User, status‘active‘ ‘archived‘。 3. **Task**: 任务属性包括 id, title, description, projectId, assigneeId可空外键指向User, status‘todo‘ ‘in_progress‘ ‘review‘ ‘done‘, priority‘low‘ ‘medium‘ ‘high‘。 ## API端点约定v1 - 前缀/api/v1 - 认证除登录/注册外所有请求需在Header中携带 Authorization: Bearer jwt_token - 用户相关POST /auth/login, POST /auth/register, GET /users/me - 项目相关GET /projects, POST /projects, GET /projects/:id, PUT /projects/:id, DELETE /projects/:id - 任务相关GET /projects/:projectId/tasks, POST /tasks, PUT /tasks/:id, DELETE /tasks/:id ## 近期技术决策 - 2024-05-20: 决定在前端使用react-query管理服务器状态替代部分Redux逻辑。 - 2024-05-18: 数据库迁移工具确定为node-pg-migrate。最后创建专属的子代理。在agents文件夹下创建agents/ui_specialist_agent/UI_SPECIALIST.md# UI Specialist Agent 角色定义 ## 专属角色 你是TaskFlow项目的前端UI专家精通React、TypeScript、现代CSSFlexbox/Grid和组件库本项目使用Ant Design。你对用户体验和界面细节有极高的要求。 ## 核心职责 1. 根据需求或设计稿实现高保真、响应式的React组件。 2. 确保所有组件均可访问支持键盘导航ARIA标签完善。 3. 优化前端性能如使用React.memo、useCallback避免不必要的重渲染。 4. 与backend_agent协作定义和消费API的数据结构。 ## 技能偏好 - 优先使用项目内已定义的create-react-component技能。 - 对于复杂交互如拖拽排序建议先引入dnd-kit库并评估。 - 所有样式必须使用CSS Modules进行局部作用域隔离。 ## 沟通风格 在提供代码时简要解释关键的UI状态逻辑和交互设计考量。如果发现后端API设计不利于前端展示请主动提出改进建议。现在当你需要处理一个复杂的仪表盘页面时你可以明确指示主Claude Code“请将‘创建用户统计图表组件’这个任务交给ui_specialist_agent处理并参考data/project_context.md中的业务实体定义。” Claude Code就会调用相应的子代理并为其注入正确的上下文从而获得更专业、更专注的输出。4. 高级技巧与深度集成方案基础结构搭建完成后我们可以探索一些高级用法让这个“团队”更智能、更强大。4.1 实现技能的动态发现与加载手动管理技能文件固然可以但随着技能增多一个更好的方法是实现技能的动态发现。你可以在.claude目录下创建一个skills_registry.json文件作为技能索引。// .claude/skills_registry.json { skills: [ { name: 创建标准React函数组件, description: 生成符合规范的React TSX组件文件。, filePath: skills/create-react-component.md, tags: [frontend, react, component], triggerKeywords: [创建组件, 生成React组件, 新建TSX文件] }, { name: 创建Express.js CRUD路由, description: 根据模型生成完整的Express.js路由、控制器和基础校验。, filePath: skills/create-express-route.md, tags: [backend, express, api, crud], triggerKeywords: [创建API, 生成路由, CRUD端点] }, { name: 数据库迁移脚本生成, description: 根据Schema变更描述生成node-pg-migrate格式的SQL迁移脚本。, filePath: skills/generate-db-migration.md, tags: [backend, database, migration], triggerKeywords: [数据库迁移, 修改表结构, 生成迁移文件] } ] }然后修改你的CLAUDE.md在开头添加一条指令“在响应请求前请先读取.claude/skills_registry.json文件了解当前可用的技能。当用户请求与某个技能的triggerKeywords匹配时优先尝试使用该技能。” 这样Claude Code就能自动关联用户请求与可用技能实现更智能的调度。4.2 设计子代理间的协同工作流真正的团队协作需要沟通。你可以设计一个简单的基于“工作请求”的协同模式。在data文件夹下创建一个agent_work_queue.json或使用一个更简单的共享状态文件。 当一个代理如architect_agent完成高层设计后它可以将下一步的“开发任务说明书”写入这个队列文件。frontend_agent和backend_agent可以定期或在被触发时检查这个队列领取属于自己的任务。例如架构师代理生成的设计概要{ taskId: design-001, title: 用户个人中心页面, assignedTo: [ui_specialist_agent, backend_agent], spec: { frontend: 需要包含用户信息展示、头像上传、个人项目列表三个主要模块。交互设计图见/docs/wireframes/profile.png。, backend: 需要新增GET /users/:id/profile端点聚合用户基本信息和其拥有的项目列表新增POST /users/avatar用于头像上传。 }, status: ready, createdAt: 2024-05-27T10:00:00Z }前端和后端子代理可以分别读取这个文件获取自己需要完成的部分并在完成后更新任务状态。虽然这只是一个模拟的、基于文件的简单协作但它清晰地展示了多代理系统的工作逻辑。对于更复杂的场景可以考虑使用消息队列或专门的Agent编排框架。4.3 利用Hooks实现上下文感知与主动辅助除了被动的onSaveHooks还可以用于更主动的智能辅助。例如创建一个onFileOpen.js的Hook当开发者打开一个文件时自动分析该文件并向Claude Code的会话上下文注入相关的信息。// hooks/onFileOpen.js const fs require(fs).promises; const path require(path); module.exports async function onFileOpen(filePath) { const relativePath path.relative(process.cwd(), filePath); // 如果是打开一个React组件自动注入该组件的Props类型和相关的父组件信息 if (relativePath.includes(/client/components/) relativePath.endsWith(.tsx)) { try { const fileContent await fs.readFile(filePath, utf-8); // 简单解析寻找Props类型定义这是一个简化示例 const propsInterfaceMatch fileContent.match(/interface\s(\w)Props\s*{([^}])}/); if (propsInterfaceMatch) { const interfaceName propsInterfaceMatch[1]; const interfaceBody propsInterfaceMatch[2]; console.log([Hook] 已识别组件Props接口: ${interfaceName}Props); // 这里可以将解析出的信息通过某种方式如写入一个临时上下文文件 // 注入到Claude Code的当前会话中使其在后续对话中知晓这个组件的结构。 const contextInfo 当前聚焦文件${relativePath}\n该组件定义了Props接口${interfaceName}Props包含属性${interfaceBody.trim()}; await fs.writeFile(path.join(__dirname, ../data/current_context.tmp), contextInfo); } } catch (error) { console.error([Hook] 解析文件上下文失败:, error); } } };这样当开发者向Claude Code提问“如何修改这个组件的XXX行为”时Claude Code已经提前知道了组件的详细结构回答会更加精准。5. 常见问题、排查与效能优化在实际使用这套体系时你可能会遇到一些典型问题。以下是一些排查思路和优化建议。5.1 配置与加载问题排查问题现象可能原因排查步骤与解决方案Claude Code完全忽略CLAUDE.md或技能。1. 文件夹或文件路径不正确。2. 文件格式错误如非UTF-8编码。3. Claude Code版本或配置未启用高级功能。1. 确认文件夹位于项目根目录且名称正确.claude是隐藏文件夹。2. 用纯文本编辑器检查文件确保无特殊字符。尝试一个极简的CLAUDE.md测试。3. 检查IDE中Claude Code插件的设置确保“Enable Advanced Features”或类似选项已打开。Hooks脚本没有执行。1. Hook文件没有导出正确的函数。2. Hook触发器未被正确配置或不被支持。3. 脚本存在语法错误导致执行失败。1. 确认Hook文件如onSave.js使用module.exports导出一个异步函数。2. 查阅Claude Code官方文档确认支持的Hook事件类型。3. 在Hook函数开头添加console.log进行调试或尝试在Node环境下直接运行该脚本看是否报错。子代理Subagent没有被调用或角色混乱。1.agents文件夹下的AGENT_NAME.md文件命名或路径错误。2. 在主指令中调用子代理的名称不正确。3. 多个代理的指令定义存在冲突。1. 确保子代理文件夹结构为agents/your_agent/YOUR_AGENT.md且文件名大写。2. 在主对话中使用明确的指令如“请切换到ui_specialist_agent角色来处理...”。3. 为每个子代理定义清晰、互斥的职责范围避免指令重叠。5.2 性能与响应优化策略随着技能、数据和代理的增多可能会影响Claude Code的响应速度或上下文窗口的利用率。技能的精简与合并定期审查skills文件夹。将很少使用或功能重叠的技能进行合并或删除。确保每个技能描述都简洁、目标明确避免冗长的背景介绍占用宝贵的Token。上下文的动态加载不要在CLAUDE.md或每个子代理的角色定义中一次性写入所有项目文档。利用data文件夹和Hooks实现动态上下文加载。例如在Hook中检测到用户正在编辑/server/routes/user.js文件时才将data/project_context.md中关于“User”实体的部分和相关的API约定注入会话。对话历史的摘要对于非常长的开发会话Claude Code可能会因为上下文长度限制而丢失较早的重要信息。可以尝试定期如在完成一个功能模块后要求Claude Code自己对之前的对话关键决策做一个简要总结并将这个总结保存到data文件夹下的一个session_summary.md文件中。在开始新阶段时让Claude Code先阅读这个摘要从而延续“记忆”。离线模型集成如果网络延迟或API调用次数是瓶颈可以考虑将部分高度标准化、确定性的任务交给本地运行的、更轻量级的开源模型如通过MCP - Model Context Protocol集成。让Claude Code作为“经理”负责复杂的逻辑规划和创意部分而让本地模型作为“执行者”负责根据清晰指令生成模板代码或执行格式化等任务。5.3 维护与迭代最佳实践这套体系本身也是一个需要维护的“项目”。版本化你的AI配置将.claude、skills、hooks、agents文件夹纳入你的Git版本控制。这样团队所有成员都能共享同一套高效的AI助手配置并且可以追溯配置的变更历史。建立技能开发规范为skills文件夹建立贡献指南。规定新技能的描述格式、输入输出规范、测试用例要求。这能保证技能库的质量和一致性。定期进行“团队复盘”每隔一段时间回顾一下Claude Code和它的子代理们产出的代码和解决方案。哪些技能最常用哪些Hook真正提升了效率哪个子代理的角色定义需要调整根据复盘结果迭代优化你的五个文件夹。安全与隐私考量永远不要在data文件夹或任何技能、配置文件中硬编码真实的API密钥、数据库密码或任何敏感信息。使用环境变量或安全的配置管理方式。在Hook中执行Shell命令时要警惕命令注入风险对输入进行严格的校验或避免使用用户输入拼接命令。这套五个文件夹的方法论其力量不在于某个文件夹本身而在于它们共同构成的一个可理解、可预测、可扩展的交互框架。它将你与Claude Code之间模糊的自然语言对话转变为了一个结构化的、具备记忆和分工的软件工程协作流程。开始可能觉得设置繁琐但一旦这套系统运转起来它会显著降低沟通成本提升代码一致性并将你的创造力从重复性劳动中解放出来专注于真正需要人类智慧的设计与决策。
1. 项目概述从单兵作战到团队协作的AI开发范式如果你还在把Claude Code当作一个单纯的代码补全工具那可能错过了它最核心的价值。最近几个月围绕Claude Code的讨论已经从“如何安装”和“基础使用”转向了更深层的架构话题比如CLAUDE.md、skills、hooks和subagents。这些概念共同指向一个目标将Claude Code从一个“聪明的代码助手”转变为一个可以自主协作、分工明确的“完整开发团队”。这个转变的核心就藏在你项目根目录下的五个关键文件夹里。它们不是随意创建的而是一套经过社区实践验证的、用于构建复杂AI代理Agent开发工作流的标准化目录结构。这套结构让Claude Code能够理解项目的全局上下文、调用特定工具、处理不同阶段的任务甚至让不同的“子代理”各司其职模拟出产品经理、架构师、开发工程师和测试工程师协同工作的场景。对于任何希望将AI深度集成到开发流程尤其是进行Agent化开发的团队或个人来说理解并运用这五个文件夹是解锁Claude Code全部潜力的关键一步。2. 核心架构解析五个文件夹的职责与协作关系这五个文件夹构成了Claude Code Agent开发套件Agent Development Kit的骨架。它们分别承载了配置、技能、数据、工作流和代理管理的职责共同确保Claude Code能够以结构化和可预测的方式运行。2.1.claude文件夹项目的“大脑”与“宪法”这是整个体系的控制中心包含了最高级别的配置和指令。其核心文件是CLAUDE.md你可以把它理解为项目的“宪法”或“总纲”。这个文件定义了Claude Code在这个项目中应该扮演的总体角色、遵守的核心原则、代码风格规范以及全局性的任务处理流程。一个典型的CLAUDE.md会包含以下部分角色定义明确告诉Claude Code它在这个项目中是“全栈开发专家”、“系统架构师”还是“代码审查助手”。项目上下文简要说明项目的技术栈如React Node.js PostgreSQL、核心业务逻辑和当前所处的开发阶段。开发规范代码风格遵循Airbnb还是Google规范、命名约定、文件组织方式、提交信息格式等。工作流指令例如“在修改任何文件前请先分析影响范围并给出计划”“所有生成的代码必须包含适当的错误处理和日志”“优先使用项目内已定义的工具函数和组件”。限制与边界明确哪些区域是禁区如不能修改某个核心配置文件或者哪些决策需要人工确认。.claude文件夹下可能还会有其他配置文件用于更细粒度的控制但CLAUDE.md是基石。它确保了Claude Code在任何时候都对齐项目的宏观目标。2.2skills文件夹团队的“技能工具箱”如果说.claude定义了“做什么”和“遵循什么原则”那么skills文件夹就提供了“怎么做”的具体能力。这里存放着各种可复用的“技能”Skills。一个技能本质上是一段自包含的、用于完成特定任务的指令或代码模板。技能可以分为几类代码生成技能例如“生成一个符合项目规范的React函数组件”或“创建一个Express.js的CRUD路由模板”。代码转换技能例如“将JavaScript类组件转换为函数组件并集成Hooks”。代码分析技能例如“静态分析当前文件的圈复杂度并提出重构建议”。工具调用技能封装了对第三方API、命令行工具或数据库的操作。例如“调用GitHub API获取仓库信息”“运行特定的数据库迁移脚本”。工作流技能组合多个简单步骤完成一个复杂流程。例如“代码审查并自动修复”技能可能包含了代码分析、问题定位、生成修复建议等多个子步骤。通过将能力模块化为技能你可以像搭积木一样让Claude Code组合使用它们来解决复杂问题。社区有大量的skills可以下载和共享这也是“superpower skills”和“skills推荐”等热词的来源。管理好skills文件夹就是为你的AI团队装备了一个强大的武器库。2.3hooks文件夹自动化的工作流“触发器”hooks是实现自动化和上下文感知的关键。它们类似于Git Hooks是在特定事件触发器发生时自动执行的一系列动作。Claude Code的Hooks允许你在开发过程的特定节点注入自定义逻辑。常见的Hook触发器包括文件保存后(onSave): 自动运行代码格式化、lint检查或运行相关的单元测试。代码生成前/后(beforeGenerate/afterGenerate): 对即将生成或已生成的代码进行预处理或后处理比如自动添加版权头注释、进行安全性扫描。对话上下文变化时(onContextChange): 当用户切换讨论焦点如从前端转到后端时自动加载相关的技能或上下文文档。Hook的核心实现原理是事件监听和函数调用。你需要在一个Hook文件如onSave.js中编写具体的逻辑。例如一个简单的保存后格式化Hook可能包含调用prettier --write命令的代码。合理使用Hooks可以将重复性工作完全自动化让Claude Code以及开发者本人更专注于创造性任务。2.4data文件夹团队的“共享记忆库”AI代理需要上下文才能做出明智决策。data文件夹就是用来存储和管理这些上下文信息的专用空间。它避免了将项目相关的知识零散地存放在对话历史或注释中提供了结构化的存储方式。这里可能存放项目知识库产品需求文档PRD的精简版、系统架构图描述、API接口文档、领域术语表。开发上下文当前迭代的任务清单、尚未解决的Bug列表、与第三方服务集成的配置说明。会话记忆跨对话的重要决策记录、已尝试过的解决方案及其结果避免重复踩坑。向量数据库索引如果你集成了本地向量数据库如ChromaDB这里可能存放着代码库文档的嵌入向量索引用于实现基于语义的代码搜索和问答。通过让Claude Code在需要时读取data文件夹下的特定文件你可以确保它始终拥有完成任务所需的最新、最相关的背景信息实现“持久化记忆”而不是每次对话都从头开始。2.5agents文件夹分工明确的“子团队”这是实现“完整开发团队”模拟最核心的一环。agents文件夹下可以定义多个“子代理”Subagents每个子代理都是一个专门化的Claude Code实例拥有自己独立的角色定义一个专属的AGENT_NAME.md文件和可能专属的技能集。“Fan out subagents”模式就是指将一个复杂任务分解后分发给不同的子代理并行处理。例如architect_agent负责高层设计、技术选型和模块划分。它的ARCHITECT.md里强调系统思维、可扩展性和性能。frontend_agent专门处理UI组件、状态管理和前端逻辑。它的技能库里装满了React、Vue、CSS-in-JS相关的技能。backend_agent专注于API设计、数据库建模和业务逻辑。它的上下文里充满了服务器框架和数据库的知识。review_agent专职代码审查关注代码质量、安全漏洞和规范符合度。你作为“项目经理”可以通过主Claude Code或一个orchestrator_agent来协调这些子代理的工作。例如接到“开发一个用户登录功能”的需求后主代理可以依次调用架构师代理出设计图前端代理做页面后端代理写API最后让审查代理检查代码。这种分工协作的模式极大地提升了处理复杂、多面性任务的效率和专业性。3. 实战搭建从零构建你的五个文件夹理解了理论我们来动手搭建。假设我们要为一个名为“TaskFlow”的React Node.js全栈项目管理工具配置Claude Code团队。3.1 初始化项目结构与基础配置首先在你的taskflow项目根目录下创建这五个文件夹。mkdir -p .claude skills hooks data agents接下来创建最重要的.claude/CLAUDE.md文件# TaskFlow 项目 - Claude Code 主代理角色定义 ## 角色 你是TaskFlow项目的首席技术官兼高级全栈开发工程师。你深度理解本项目基于React 18前端、Express.js后端和PostgreSQL数据库的技术栈并致力于交付高质量、可维护且符合业务需求的代码。 ## 核心原则 1. **安全第一**任何代码生成或修改必须考虑安全性避免SQL注入、XSS等常见漏洞。 2. **一致性优先**严格遵循本项目既定的代码风格和架构模式。不引入不必要的变体。 3. **渐进式增强**在添加新功能或重构时优先考虑对现有系统的影响确保平滑过渡。 4. **文档即代码**重要的逻辑和决策需在代码中以清晰的注释或更新的README形式体现。 ## 项目上下文 - **目标**构建一个轻量级、团队协作的项目管理与任务跟踪工具。 - **当前阶段**核心身份认证与用户管理模块已基本完成正在开发项目管理与任务CRUD模块。 - **代码规范**前端使用ESLintAirbnb配置和Prettier后端使用ESLintStandard配置。提交信息遵循Conventional Commits格式。 - **关键目录** - /client - React前端应用 - /server - Express.js后端API - /packages - 共享的TypeScript类型定义和工具函数 ## 工作流指令 1. 在实施任何重大更改前请先简要描述你的计划并评估其对其他模块的影响。 2. 生成代码时优先复用/packages下的共享类型和工具。 3. 所有API响应必须遵循统一的格式{ success: boolean, data: any, message?: string }。 4. 前端组件请使用函数组件和React Hooks状态管理优先使用Context API仅在复杂场景考虑引入Zustand。 ## 限制 - 未经明确指令不得修改/server/config/database.js中的核心数据库连接配置。 - 不得降级项目中的关键依赖包版本。这个文件为Claude Code建立了全局的行为准则。3.2 开发与集成核心技能进入skills文件夹我们创建几个基础技能。首先是一个创建React组件的技能skills/create-react-component.md# 技能创建标准React函数组件 ## 描述 根据提供的Props接口定义生成一个符合TaskFlow项目规范的React函数组件文件。 ## 输入 - componentName: 组件名称PascalCase - propsInterface: TypeScript Props接口定义字符串 - hasState: 是否需要内部状态默认false - hasSideEffect: 是否需要副作用如useEffect默认false ## 输出 一个完整的.tsx文件包含 1. 导入React和必要的Hooks。 2. 定义的Props接口。 3. 一个使用React.FC声明的函数组件。 4. 基础的样式导入来自./ComponentName.module.css。 5. 导出语句。 ## 指令 1. 组件必须为默认导出。 2. 如果hasState为真使用useState Hook并给出合理的初始状态示例。 3. 如果hasSideEffect为真添加一个useEffect Hook并包含清理函数。 4. 在组件顶部添加JSDoc注释简要说明组件用途。 5. 代码风格严格遵循项目ESLintAirbnb配置。 ## 示例调用 “使用‘创建标准React函数组件’技能组件名UserProfileProps接口为interface UserProfileProps { userId: string; editable: boolean; }需要状态和副作用。”再创建一个后端API技能skills/create-express-route.md用于生成标准的CRUD路由处理器。通过将这些技能文件化你可以在任何需要的时候通过自然语言指令精确调用它们保证了输出的一致性。3.3 配置自动化Hooks提升效率在hooks文件夹下创建onSave.js来实现保存时自动格式化。// hooks/onSave.js const { exec } require(child_process); const path require(path); /** * onSave Hook - 在文件保存后自动执行代码格式化 * param {string} filePath - 被保存文件的绝对路径 */ module.exports async function onSave(filePath) { const projectRoot process.cwd(); const relativePath path.relative(projectRoot, filePath); console.log([Hook] 文件已保存: ${relativePath}); // 根据文件类型和位置决定格式化命令 let command null; if (relativePath.startsWith(client/) (relativePath.endsWith(.js) || relativePath.endsWith(.jsx) || relativePath.endsWith(.ts) || relativePath.endsWith(.tsx))) { command npx prettier --write ${filePath} cd client npx eslint ${relativePath.replace(client/, )} --fix; } else if (relativePath.startsWith(server/) (relativePath.endsWith(.js) || relativePath.endsWith(.ts))) { command npx prettier --write ${filePath} cd server npx eslint ${relativePath.replace(server/, )} --fix; } if (command) { exec(command, (error, stdout, stderr) { if (error) { console.error([Hook] 执行格式化时出错: ${error.message}); return; } if (stdout) console.log([Hook] 输出: ${stdout}); if (stderr) console.warn([Hook] 警告: ${stderr}); console.log([Hook] 已完成对 ${relativePath} 的格式化与Lint检查。); }); } };这个Hook会在开发者保存文件后自动触发根据文件路径判断是前端还是后端代码并执行对应的Prettier格式化和ESLint自动修复确保代码风格统一。3.4 构建数据上下文与专属子代理在data文件夹下创建project_context.md存放项目特有的知识。# TaskFlow 项目核心上下文 ## 业务实体定义 1. **User**: 用户属性包括 id, email唯一, hashedPassword, displayName, avatarUrl, role‘admin‘ ‘member‘。 2. **Project**: 项目属性包括 id, name, description, ownerId外键指向User, status‘active‘ ‘archived‘。 3. **Task**: 任务属性包括 id, title, description, projectId, assigneeId可空外键指向User, status‘todo‘ ‘in_progress‘ ‘review‘ ‘done‘, priority‘low‘ ‘medium‘ ‘high‘。 ## API端点约定v1 - 前缀/api/v1 - 认证除登录/注册外所有请求需在Header中携带 Authorization: Bearer jwt_token - 用户相关POST /auth/login, POST /auth/register, GET /users/me - 项目相关GET /projects, POST /projects, GET /projects/:id, PUT /projects/:id, DELETE /projects/:id - 任务相关GET /projects/:projectId/tasks, POST /tasks, PUT /tasks/:id, DELETE /tasks/:id ## 近期技术决策 - 2024-05-20: 决定在前端使用react-query管理服务器状态替代部分Redux逻辑。 - 2024-05-18: 数据库迁移工具确定为node-pg-migrate。最后创建专属的子代理。在agents文件夹下创建agents/ui_specialist_agent/UI_SPECIALIST.md# UI Specialist Agent 角色定义 ## 专属角色 你是TaskFlow项目的前端UI专家精通React、TypeScript、现代CSSFlexbox/Grid和组件库本项目使用Ant Design。你对用户体验和界面细节有极高的要求。 ## 核心职责 1. 根据需求或设计稿实现高保真、响应式的React组件。 2. 确保所有组件均可访问支持键盘导航ARIA标签完善。 3. 优化前端性能如使用React.memo、useCallback避免不必要的重渲染。 4. 与backend_agent协作定义和消费API的数据结构。 ## 技能偏好 - 优先使用项目内已定义的create-react-component技能。 - 对于复杂交互如拖拽排序建议先引入dnd-kit库并评估。 - 所有样式必须使用CSS Modules进行局部作用域隔离。 ## 沟通风格 在提供代码时简要解释关键的UI状态逻辑和交互设计考量。如果发现后端API设计不利于前端展示请主动提出改进建议。现在当你需要处理一个复杂的仪表盘页面时你可以明确指示主Claude Code“请将‘创建用户统计图表组件’这个任务交给ui_specialist_agent处理并参考data/project_context.md中的业务实体定义。” Claude Code就会调用相应的子代理并为其注入正确的上下文从而获得更专业、更专注的输出。4. 高级技巧与深度集成方案基础结构搭建完成后我们可以探索一些高级用法让这个“团队”更智能、更强大。4.1 实现技能的动态发现与加载手动管理技能文件固然可以但随着技能增多一个更好的方法是实现技能的动态发现。你可以在.claude目录下创建一个skills_registry.json文件作为技能索引。// .claude/skills_registry.json { skills: [ { name: 创建标准React函数组件, description: 生成符合规范的React TSX组件文件。, filePath: skills/create-react-component.md, tags: [frontend, react, component], triggerKeywords: [创建组件, 生成React组件, 新建TSX文件] }, { name: 创建Express.js CRUD路由, description: 根据模型生成完整的Express.js路由、控制器和基础校验。, filePath: skills/create-express-route.md, tags: [backend, express, api, crud], triggerKeywords: [创建API, 生成路由, CRUD端点] }, { name: 数据库迁移脚本生成, description: 根据Schema变更描述生成node-pg-migrate格式的SQL迁移脚本。, filePath: skills/generate-db-migration.md, tags: [backend, database, migration], triggerKeywords: [数据库迁移, 修改表结构, 生成迁移文件] } ] }然后修改你的CLAUDE.md在开头添加一条指令“在响应请求前请先读取.claude/skills_registry.json文件了解当前可用的技能。当用户请求与某个技能的triggerKeywords匹配时优先尝试使用该技能。” 这样Claude Code就能自动关联用户请求与可用技能实现更智能的调度。4.2 设计子代理间的协同工作流真正的团队协作需要沟通。你可以设计一个简单的基于“工作请求”的协同模式。在data文件夹下创建一个agent_work_queue.json或使用一个更简单的共享状态文件。 当一个代理如architect_agent完成高层设计后它可以将下一步的“开发任务说明书”写入这个队列文件。frontend_agent和backend_agent可以定期或在被触发时检查这个队列领取属于自己的任务。例如架构师代理生成的设计概要{ taskId: design-001, title: 用户个人中心页面, assignedTo: [ui_specialist_agent, backend_agent], spec: { frontend: 需要包含用户信息展示、头像上传、个人项目列表三个主要模块。交互设计图见/docs/wireframes/profile.png。, backend: 需要新增GET /users/:id/profile端点聚合用户基本信息和其拥有的项目列表新增POST /users/avatar用于头像上传。 }, status: ready, createdAt: 2024-05-27T10:00:00Z }前端和后端子代理可以分别读取这个文件获取自己需要完成的部分并在完成后更新任务状态。虽然这只是一个模拟的、基于文件的简单协作但它清晰地展示了多代理系统的工作逻辑。对于更复杂的场景可以考虑使用消息队列或专门的Agent编排框架。4.3 利用Hooks实现上下文感知与主动辅助除了被动的onSaveHooks还可以用于更主动的智能辅助。例如创建一个onFileOpen.js的Hook当开发者打开一个文件时自动分析该文件并向Claude Code的会话上下文注入相关的信息。// hooks/onFileOpen.js const fs require(fs).promises; const path require(path); module.exports async function onFileOpen(filePath) { const relativePath path.relative(process.cwd(), filePath); // 如果是打开一个React组件自动注入该组件的Props类型和相关的父组件信息 if (relativePath.includes(/client/components/) relativePath.endsWith(.tsx)) { try { const fileContent await fs.readFile(filePath, utf-8); // 简单解析寻找Props类型定义这是一个简化示例 const propsInterfaceMatch fileContent.match(/interface\s(\w)Props\s*{([^}])}/); if (propsInterfaceMatch) { const interfaceName propsInterfaceMatch[1]; const interfaceBody propsInterfaceMatch[2]; console.log([Hook] 已识别组件Props接口: ${interfaceName}Props); // 这里可以将解析出的信息通过某种方式如写入一个临时上下文文件 // 注入到Claude Code的当前会话中使其在后续对话中知晓这个组件的结构。 const contextInfo 当前聚焦文件${relativePath}\n该组件定义了Props接口${interfaceName}Props包含属性${interfaceBody.trim()}; await fs.writeFile(path.join(__dirname, ../data/current_context.tmp), contextInfo); } } catch (error) { console.error([Hook] 解析文件上下文失败:, error); } } };这样当开发者向Claude Code提问“如何修改这个组件的XXX行为”时Claude Code已经提前知道了组件的详细结构回答会更加精准。5. 常见问题、排查与效能优化在实际使用这套体系时你可能会遇到一些典型问题。以下是一些排查思路和优化建议。5.1 配置与加载问题排查问题现象可能原因排查步骤与解决方案Claude Code完全忽略CLAUDE.md或技能。1. 文件夹或文件路径不正确。2. 文件格式错误如非UTF-8编码。3. Claude Code版本或配置未启用高级功能。1. 确认文件夹位于项目根目录且名称正确.claude是隐藏文件夹。2. 用纯文本编辑器检查文件确保无特殊字符。尝试一个极简的CLAUDE.md测试。3. 检查IDE中Claude Code插件的设置确保“Enable Advanced Features”或类似选项已打开。Hooks脚本没有执行。1. Hook文件没有导出正确的函数。2. Hook触发器未被正确配置或不被支持。3. 脚本存在语法错误导致执行失败。1. 确认Hook文件如onSave.js使用module.exports导出一个异步函数。2. 查阅Claude Code官方文档确认支持的Hook事件类型。3. 在Hook函数开头添加console.log进行调试或尝试在Node环境下直接运行该脚本看是否报错。子代理Subagent没有被调用或角色混乱。1.agents文件夹下的AGENT_NAME.md文件命名或路径错误。2. 在主指令中调用子代理的名称不正确。3. 多个代理的指令定义存在冲突。1. 确保子代理文件夹结构为agents/your_agent/YOUR_AGENT.md且文件名大写。2. 在主对话中使用明确的指令如“请切换到ui_specialist_agent角色来处理...”。3. 为每个子代理定义清晰、互斥的职责范围避免指令重叠。5.2 性能与响应优化策略随着技能、数据和代理的增多可能会影响Claude Code的响应速度或上下文窗口的利用率。技能的精简与合并定期审查skills文件夹。将很少使用或功能重叠的技能进行合并或删除。确保每个技能描述都简洁、目标明确避免冗长的背景介绍占用宝贵的Token。上下文的动态加载不要在CLAUDE.md或每个子代理的角色定义中一次性写入所有项目文档。利用data文件夹和Hooks实现动态上下文加载。例如在Hook中检测到用户正在编辑/server/routes/user.js文件时才将data/project_context.md中关于“User”实体的部分和相关的API约定注入会话。对话历史的摘要对于非常长的开发会话Claude Code可能会因为上下文长度限制而丢失较早的重要信息。可以尝试定期如在完成一个功能模块后要求Claude Code自己对之前的对话关键决策做一个简要总结并将这个总结保存到data文件夹下的一个session_summary.md文件中。在开始新阶段时让Claude Code先阅读这个摘要从而延续“记忆”。离线模型集成如果网络延迟或API调用次数是瓶颈可以考虑将部分高度标准化、确定性的任务交给本地运行的、更轻量级的开源模型如通过MCP - Model Context Protocol集成。让Claude Code作为“经理”负责复杂的逻辑规划和创意部分而让本地模型作为“执行者”负责根据清晰指令生成模板代码或执行格式化等任务。5.3 维护与迭代最佳实践这套体系本身也是一个需要维护的“项目”。版本化你的AI配置将.claude、skills、hooks、agents文件夹纳入你的Git版本控制。这样团队所有成员都能共享同一套高效的AI助手配置并且可以追溯配置的变更历史。建立技能开发规范为skills文件夹建立贡献指南。规定新技能的描述格式、输入输出规范、测试用例要求。这能保证技能库的质量和一致性。定期进行“团队复盘”每隔一段时间回顾一下Claude Code和它的子代理们产出的代码和解决方案。哪些技能最常用哪些Hook真正提升了效率哪个子代理的角色定义需要调整根据复盘结果迭代优化你的五个文件夹。安全与隐私考量永远不要在data文件夹或任何技能、配置文件中硬编码真实的API密钥、数据库密码或任何敏感信息。使用环境变量或安全的配置管理方式。在Hook中执行Shell命令时要警惕命令注入风险对输入进行严格的校验或避免使用用户输入拼接命令。这套五个文件夹的方法论其力量不在于某个文件夹本身而在于它们共同构成的一个可理解、可预测、可扩展的交互框架。它将你与Claude Code之间模糊的自然语言对话转变为了一个结构化的、具备记忆和分工的软件工程协作流程。开始可能觉得设置繁琐但一旦这套系统运转起来它会显著降低沟通成本提升代码一致性并将你的创造力从重复性劳动中解放出来专注于真正需要人类智慧的设计与决策。
