做外贸怎么推广,濮阳网站怎么做seo,我做夫人那些年网站登录,河北邢台wap网站建设这是「Claude Code 通关手册」系列的第 7 篇#xff0c;共 10 篇。Level 3#xff08;扩展篇#xff09;收官之作。这篇讲完#xff0c;你就拥有了一套完整的 Claude Code 自动化体系。Claude Code 通关手册#xff08;一#xff09;#xff1a;Cursor 用户转 Claude Co…这是「Claude Code 通关手册」系列的第 7 篇共 10 篇。Level 3扩展篇收官之作。这篇讲完你就拥有了一套完整的 Claude Code 自动化体系。Claude Code 通关手册一Cursor 用户转 Claude Code第一天我就后悔了——后悔没早点用Claude Code 通关手册二权限系统搞明白效率直接翻倍Claude Code 通关手册三99%的人不知道的效率秘诀CLAUDE.md 深度实战Claude Code 通关手册四3 个自定义命令让你的 Claude Code 快到飞起Claude Code 通关手册五子代理系统——给你的 AI 配一个专家团队Claude Code 通关手册六MCP 协议完全指南Claude Code 最被低估的能力到目前为止你已经有了一个相当强的 Claude Code 配置子代理第 5 篇 你的AI 专家团MCP第 6 篇 专家团的信息通道但有一个问题——所有操作都需要你主动触发。你说一句Claude 做一步。你忘了说跑一下 lint它就不跑。你忘了说查一下类型它就不查。今天要解决的就是这个问题。Hooks 流水线上的自动触发器。Claude 每次写完代码自动跑 Prettier每次执行危险命令前自动拦截每次会话结束自动记录日志——你设定好规则剩下的全自动。Skills 可复用的专业知识包。Claude 根据任务自动加载对应的技能——写组件时加载前端规范写 API 时加载后端规范不需要你手动指定。Plugins 一键分发的工具箱。把 Commands Agents Skills Hooks MCP 打包成一个可安装的插件团队里的每个人/plugin install一秒搞定。三个系统各解决一个问题组合起来就是一条全自动的 AI 开发流水线。一、Hooks 系统——在 Claude 的每一步插入自动化什么是 Hooks一句话Hooks 是你预先定义的脚本在 Claude 操作的特定时刻自动执行。打个比方工厂流水线上有很多质检工位——产品经过某个环节后自动进行质检不合格的自动拦下。Hooks 就是 Claude Code 流水线上的质检工位。关键词是确定性。你在 CLAUDE.md 里写每次修改文件后请跑 lint这是一个请求——Claude 可能执行也可能忘了。但 Hook 是保证执行——只要事件触发脚本一定跑没有例外。生命周期事件全景Claude Code 目前支持 14 个生命周期事件。日常最常用的是这几个┌──────────────────────────────────────────────────────────┐ │ Hooks 生命周期精选高频事件 │ ├──────────────────────────────────────────────────────────┤ │ │ │ SessionStart │ │ → 会话启动时触发 │ │ → 适合加载环境变量、注入开发上下文 │ │ ↓ │ │ UserPromptSubmit │ │ → 用户提交提示词时触发 │ │ → 适合校验输入、注入额外上下文 │ │ ↓ │ │ PreToolUse │ │ → Claude 准备执行操作前触发 │ │ → 适合拦截危险命令、修改操作参数 │ │ → matcher 过滤Bash / Edit / Write / Read 等 │ │ ↓ │ │ [Claude 执行操作] │ │ ↓ │ │ PostToolUse │ │ → 操作完成后触发 │ │ → 适合自动格式化、运行 lint、记录日志 │ │ → matcher 过滤同上 │ │ ↓ │ │ Stop │ │ → Claude 完成回答时触发 │ │ → 适合收尾操作、发送通知 │ │ │ │ 其他事件 │ │ PermissionRequest — 权限弹窗时触发可自动放行/拦截 │ │ SubagentStop — 子代理完成时触发 │ │ PostToolUseFailure — 工具执行失败时触发 │ │ Notification — 通知事件适合发桌面提醒 │ │ │ └──────────────────────────────────────────────────────────┘三种 Hook 类型┌──────────────────────────────────────────────────────────┐ │ 三种 Hook 处理器 │ ├──────────┬──────────────────┬────────────────────────────┤ │ 类型 │ 工作方式 │ 适合场景 │ ├──────────┼──────────────────┼────────────────────────────┤ │ command │ 执行 bash 命令 │ 确定性操作格式化、lint、 │ │ │ 最常用 │ 日志记录、文件校验 │ ├──────────┼──────────────────┼────────────────────────────┤ │ prompt │ 调用 LLM 评估 │ 需要智能判断代码质量评估、 │ │ │ │ 安全风险分析 │ ├──────────┼──────────────────┼────────────────────────────┤ │ agent │ 启动子代理处理 │ 复杂任务全面审查、 │ │ │ │ 多维度分析 │ └──────────┴──────────────────┴────────────────────────────┘日常开发 90% 的场景用command类型就够了——执行一个 bash 命令简单、快速、确定性强。配置位置Hooks 配置在 settings.json 中跟第 2 篇的权限配置是同一个文件体系~/.claude/settings.json——全局所有项目生效.claude/settings.json——项目级提交到 Git.claude/settings.local.json——个人本地不提交也可以在交互模式中用/hooks命令可视化编辑。实操3 个最实用的 HookHook 1代码修改后自动格式化这是使用频率最高的 Hook——Claude 每次写入或编辑文件后自动跑 Prettier 格式化。在.claude/settings.json中添加{ hooks: { PostToolUse: [ { matcher: Write|Edit|MultiEdit, hooks: [ { type: command, command: jq -r .tool_input.file_path | xargs npx prettier --write 2/dev/null; exit 0 } ] } ] } }解读一下这段配置事件PostToolUse——工具执行完成后matcherWrite|Edit|MultiEdit——只在文件写入或编辑操作后触发正则语法命令从 stdin 接收 JSON 输入提取文件路径然后对该文件跑 Prettierexit 0确保即使 Prettier 报错也不会阻塞 Claude 的流程效果从此 Claude 写的每一行代码都自动遵循你的 Prettier 配置不用你在 CLAUDE.md 里写请遵循代码格式也不用你手动跑prettier --write。如果你只想格式化特定类型的文件比如只格式化 TypeScript可以在命令中加个判断{ type: command, command: jq -r .tool_input.file_path | { read f; echo \$f\ | grep -qE \\.(ts|tsx)$ npx prettier --write \$f\; exit 0; } }Hook 2危险命令拦截这个 Hook 在 Claude 执行 bash 命令之前检查如果是危险命令就直接拦截{ hooks: { PreToolUse: [ { matcher: Bash, hooks: [ { type: command, command: python3 -c \import json,sys; djson.load(sys.stdin); cmdd.get(tool_input,{}).get(command,); blocked[rm -rf /,DROP TABLE,DROP DATABASE,:(){:|:};:]; sys.exit(2) if any(b in cmd for b in blocked) else sys.exit(0)\ } ] } ] } }关键知识点事件PreToolUse——工具执行之前可以拦截exit code 2表示拒绝执行Claude 会收到拒绝原因exit code 0表示放行这是你的最后一道安全防线——即使权限配置有遗漏这个 Hook 也能兜底拦住破坏性命令。Hook 3敏感文件保护防止 Claude 修改不该碰的文件{ hooks: { PreToolUse: [ { matcher: Edit|Write|MultiEdit, hooks: [ { type: command, command: python3 -c \import json,sys; djson.load(sys.stdin); pd.get(tool_input,{}).get(file_path,); sys.exit(2 if any(x in p for x in [.env,package-lock.json,.git/,prisma/migrations/]) else 0)\ } ] } ] } }这个 Hook 阻止 Claude 修改.env、package-lock.json、.git/目录和 Prisma 迁移文件。这些文件要么包含敏感信息要么由工具自动生成不应该被 AI 手动修改。DevPulse 完整 Hooks 配置把三个 Hook 组合起来这是 DevPulse 项目的完整配置{ permissions: { ...: 第2篇配置的权限此处省略 }, hooks: { PreToolUse: [ { matcher: Bash, hooks: [ { type: command, command: python3 -c \import json,sys; djson.load(sys.stdin); cmdd.get(tool_input,{}).get(command,); blocked[rm -rf /,DROP TABLE,DROP DATABASE]; sys.exit(2) if any(b in cmd for b in blocked) else sys.exit(0)\ } ] }, { matcher: Edit|Write|MultiEdit, hooks: [ { type: command, command: python3 -c \import json,sys; djson.load(sys.stdin); pd.get(tool_input,{}).get(file_path,); sys.exit(2 if any(x in p for x in [.env,package-lock.json,.git/]) else 0)\ } ] } ], PostToolUse: [ { matcher: Write|Edit|MultiEdit, hooks: [ { type: command, command: jq -r .tool_input.file_path | xargs npx prettier --write 2/dev/null; exit 0 } ] } ] } }三层防护操作前拦截危险命令 → 操作前保护敏感文件 → 操作后自动格式化。二、Skills 系统——Claude 的技能库跟 Slash 命令有什么区别第 4 篇讲了 Slash 命令.claude/commands/Skills 看起来也是 Markdown 文件也有 frontmatter——它们有什么区别┌──────────────────────────────────────────────────────────┐ │ Slash Commands vs Skills │ ├──────────────────┬───────────────────────────────────────┤ │ Slash Commands │ Skills │ ├──────────────────┼───────────────────────────────────────┤ │ 你主动调用 │ Claude 根据任务自动加载 │ │ /review file.ts │ 你说写个组件→ 自动加载前端规范 │ ├──────────────────┼───────────────────────────────────────┤ │ 简单的提示词模板 │ 可包含脚本、模板、参考文档 │ ├──────────────────┼───────────────────────────────────────┤ │ 单个 .md 文件 │ 一个目录SKILL.md 附属文件 │ ├──────────────────┼───────────────────────────────────────┤ │ 适合固定操作 │ 适合需要上下文感知的专业知识 │ │ 每次审查用这个 │ 写前端时自动知道我们的规范 │ ├──────────────────┼───────────────────────────────────────┤ │ 位置 │ 位置 │ │ .claude/commands/ │ .claude/skills/ │ │ ~/.claude/ │ ~/.claude/skills/ │ │ commands/ │ │ └──────────────────┴───────────────────────────────────────┘ 简单记忆 Commands 你说做这个 → Claude 执行主动触发 Skills Claude 看到任务 → 自动调取对应技能被动匹配Skills 使用渐进式披露策略加载——Claude 启动时只读取每个 Skill 的名称和描述约 30-50 Token发现当前任务匹配某个 Skill 时才加载完整内容。所以你可以安装很多 Skill 而不用担心上下文爆炸。创建一个 Skill前端代码规范mkdir -p .claude/skills/frontend-standards创建.claude/skills/frontend-standards/SKILL.md--- name: frontend-standards description: DevPulse 前端代码规范和最佳实践。在编写 React 组件、样式、状态管理和数据获取时自动加载。 --- # DevPulse 前端开发规范 ## 组件规范 - 使用 function 关键字声明组件不用箭头函数导出 - Props 接口命名ComponentNameProps - 默认是 Server Component需要交互时才加 use client - 组件超过 150 行必须拆分 ## 样式规范 - 使用 Tailwind CSS 工具类 - 超过 5 个类名用 cn() 函数合并 - 响应式优先mobile-first 设计 - 暗色模式使用 dark: 前缀 ## 数据获取 - Server Component 中直接 async/await 获取数据 - Client Component 中使用 SWR 或 React Query - API 调用统一走 /api/ 路由 ## 性能清单 - 图片必须使用 next/image - 列表必须有稳定 key不用 index - 大列表使用虚拟滚动 - 路由切换使用 next/link 预加载 ## 错误处理 - 每个页面必须有 error.tsx 边界 - 加载状态使用 loading.tsx 或 Suspense - API 错误统一格式{ error: string, code: string }现在当你让 Claude 写一个 ArticleCard 组件时它会自动匹配这个 Skill 的描述编写 React 组件加载完整规范然后按照你定义的标准来写代码。你什么都不用说它自动就知道用 function 声明、Props 命名为 ArticleCardProps、默认 Server Component。Skill 还能打包脚本Skills 比 Commands 强大的地方之一是可以附带脚本文件。比如一个代码可视化 Skill.claude/skills/codebase-visualizer/ ├── SKILL.md ← 指令和描述 ├── visualize.sh ← 生成可视化的脚本 └── template.html ← 输出模板Claude 执行 Skill 时可以调用目录中的脚本产出比纯文本更丰富的结果。三、Plugins 系统——团队级的标准化工具箱Plugin 是什么如果说 Commands、Agents、Skills、Hooks、MCP 是各种零散的零件那 Plugin 就是把这些零件打包成一个可安装的工具箱。一个 Plugin 的结构my-plugin/ ├── .claude-plugin/ │ └── plugin.json ← 插件元数据名称、版本、描述 ├── commands/ ← Slash 命令 ├── agents/ ← 子代理 ├── skills/ ← 技能包 ├── hooks.json ← Hooks 配置 ├── .mcp.json ← MCP Server 配置 └── README.md ← 文档使用场景你是团队的技术负责人你花了几天时间配好了一整套 Claude Code 工作流——审查命令、测试子代理、安全 Hook、前端规范 Skill。现在团队里来了个新人你让他搞一套同样的配置不用。把你的配置打包成 Plugin新人只需要/plugin install your-team-pluginyour-marketplace一条命令所有人的 Claude Code 环境就统一了。基本操作# 安装插件 /plugin install plugin-namemarketplace-name # 查看已安装的插件 /plugin list # 启用/禁用不删除只是开关 /plugin enable plugin-namemarketplace-name /plugin disable plugin-namemarketplace-name # 开发时加载本地插件调试用 claude --plugin-dir ./my-plugin实用的社区 Plugin社区已经有不少现成的 Plugin 可以直接用code-review自动化 PR 审查5 个并行子代理分别检查不同维度security-scannerPreToolUse Hook 监控 9 种安全模式python3-developmentPython 开发全套——15 命令、17 个子代理、TDD 工作流对于大多数个人开发者来说你可能暂时不需要创建自己的 Plugin。但了解它的存在很重要——当你的 Claude Code 配置足够成熟可以分享给团队或社区时Plugin 就是分发的最佳方式。四、综合实战四个系统协同工作现在让我们看看这些系统组合起来是什么效果。以 DevPulse 项目为例一个完整的自动化工作流┌──────────────────────────────────────────────────────────┐ │ DevPulse 全自动开发工作流 │ ├──────────────────────────────────────────────────────────┤ │ │ │ 你: 修复 GitHub 上那个暗色模式闪屏的 issue │ │ ↓ │ │ ① [MCP - GitHub] │ │ 自动搜索 issues → 找到 #49 │ │ 读取 issue 详情和评论中的复现步骤 │ │ ↓ │ │ ② [Skill - frontend-standards] │ │ Claude 准备修改组件 → 自动加载前端规范 │ │ 知道要用 function 声明、Tailwind 样式、 │ │ Server Component 优先 │ │ ↓ │ │ ③ [Claude 修改 ThemeProvider.tsx] │ │ ↓ │ │ ④ [Hook - PostToolUse] │ │ 文件修改完成 → 自动跑 Prettier 格式化 │ │ 你什么都不用说自动执行 │ │ ↓ │ │ ⑤ [子代理 - code-reviewer] │ │ 你说审查一下改动 → │ │ 独立上下文窗口中深度审查 │ │ ↓ │ │ ⑥ [MCP - GitHub] │ │ 创建 PR → 关联 #49 → 自动填写描述 │ │ │ │ 整个过程 │ │ MCP 提供外部信息 → Skill 提供专业规范 → │ │ Hook 保证代码质量 → 子代理提供深度审查 │ │ 四个系统各司其职无缝协作 │ │ │ └──────────────────────────────────────────────────────────┘这就是AI 自动化流水线的完整形态。你只说了一句话四个系统自动接力完成了整个工作流。五、扩展体系总览一张图看清所有积木整个 Level 3 讲了很多概念这里用一张图总结它们之间的关系┌──────────────────────────────────────────────────────────┐ │ Claude Code 扩展体系总览 │ ├──────────────────────────────────────────────────────────┤ │ │ │ ┌─────────┐ ┌──────────┐ ┌─────────┐ ┌──────────┐ │ │ │ Commands │ │ Agents │ │ Skills │ │ Hooks │ │ │ │ 快捷命令 │ │ 子代理 │ │ 技能包 │ │ 自动触发 │ │ │ │ 你主动调 │ │ 专家分工 │ │ 自动匹配│ │ 确定性 │ │ │ │ 用 │ │ 独立上下文│ │ 渐进加载│ │ 执行 │ │ │ └────┬─────┘ └────┬─────┘ └────┬────┘ └────┬─────┘ │ │ │ │ │ │ │ │ └──────┬──────┴──────┬──────┘ │ │ │ ↓ ↓ │ │ │ ┌──────────────────────────┐ │ │ │ │ MCP Servers │ │ │ │ │ 外部工具连接GitHub、 │ │ │ │ │ 数据库、文档查询等 │ │ │ │ └──────────────────────────┘ │ │ │ │ │ │ ┌──────────────────────────────────────────┘ │ │ ↓ │ │ ┌──────────────────────────────────────────────┐ │ │ │ Plugin打包分发 │ │ │ │ Commands Agents Skills Hooks MCP │ │ │ │ 一键安装团队统一 │ │ │ └──────────────────────────────────────────────┘ │ │ │ │ 选择指南 │ │ 我要重复执行某个操作 → Command │ │ 我要专业分工和并行 → Agent │ │ 我要自动加载知识 → Skill │ │ 我要在每一步自动执行 → Hook │ │ 我要连接外部工具 → MCP │ │ 我要打包分发给团队 → Plugin │ │ │ └──────────────────────────────────────────────────────────┘本篇小结三个核心收获第一Hooks 给你确定性控制——PostToolUse 自动格式化、PreToolUse 拦截危险操作、保护敏感文件。从请求 Claude 做变成保证每次都做。配置在 settings.json 的 hooks 字段中用 matcher 正则匹配目标工具。第二Skills 是可自动匹配的知识包——Claude 根据任务描述自动加载对应的 Skill不用你手动指定。渐进式加载机制让你可以安装很多 Skill 而不影响性能。跟 Commands 的核心区别是Commands 你主动调用Skills Claude 自动选用。第三Plugin 是终极打包方案——把 Commands Agents Skills Hooks MCP 打成一个可安装的包团队统一标准只需要一条/plugin install命令。Level 3 通关检查清单回顾 Level 3扩展篇三篇文章的完整检查清单[ ] 创建了至少 2 个子代理code-reviewer test-writer[ ] 安装了 GitHub MCP 和 Context7 MCP[ ] 配置了 PostToolUse Hook 自动格式化代码[ ] 配置了 PreToolUse Hook 拦截危险命令[ ] 创建了至少 1 个自定义 Skill[ ] 理解 Commands / Agents / Skills / Hooks / MCP / Plugins 各自的定位[ ] 知道 /hooks 和 /plugin 命令的用法全部打勾恭喜Level 3 通关。你的 Claude Code 已经从一个 AI 助手进化成了一套完整的 AI 自动化开发平台。下篇预告第 8 篇Claude Code 通关手册八—— Headless 模式 SDK用代码指挥 AI从下一篇开始进入 Level 4高级篇面向想要把 Claude Code 集成到自动化流程中的开发者。到目前为止你一直在终端里跟 Claude 对话。但如果你想把 Claude Code 嵌入到 CI/CD 流水线里呢比如每次有人提 PR自动触发 Claude 做代码审查或者批量处理 100 个文件的重构这就需要 Headless 模式无交互运行和 Agent SDK用代码调用 Claude Code。下一篇带你解锁这个能力。今日话题你最想自动化的开发操作是什么每次 commit 前自动跑测试每次写完代码自动格式化还是更有创意的用法评论区分享你的自动化愿望——说不定 Hooks 就能帮你实现。如果这篇文章帮你理清了 Claude Code 扩展体系的全貌欢迎点赞、在看、转发三连——Level 3 收官之作值得让更多人看到。关注「前端达人」Level 4 高级篇即将开启我们下篇见。