团队协作：Skill —— 把团队最佳实践编码为可复用的 AI 工作流
核心定位：实现从「个人提效」到「团队提效」的核心桥梁，核心理念是「3 个核心 Skill 就能改变一个团队的 AI 使用方式」，也是中高级工程师区别于初级的核心标志。
三级 Skill 体系架构
- Plugin Skills 插件级（可安装）
- frontend-design
- commit-commands
- feature-dev
- Project Skills 项目级（可继承）
.claude/skills/<name>/SKILL.md.claude/commands/<name>.md
- User Skills 用户级
~/.claude/commands/<name>.md
markdown
**中高级进阶落地实践：**
- **基于 Claude Code 搭建了三级 Skill 体系，覆盖全场景复用需求：**
| Plugin Skills (插件级) | |
| ------------------------------------------- | --- |
| 通过 `/plugin install` 安装的团队通用技能包 | |
| 位置: `~/.claude/plugins/` | |
| | |
| Project Skills (项目级) | |
| 团队共享的项目专属技能，随 Git 仓库同步 | |
| 位置: `.claude/skills/<name>/SKILL.md` | |
| | |
| User Skills (用户级) | |
| 个人全局通用高频操作技能 | |
| 位置: `~/.claude/commands/<name>.md` | |团队核心 Skill 落地实践
第一步：安装 Skill Creator 工具链
bash
# 在Claude Code中安装plugin-dev插件（Skill Creator核心依赖）
/plugin install plugin-dev@claude-code-marketplace安装后获得 7 个专业 Skill 开发能力： skill-development 、 command-development 、 agent-development 、 hook-development 、 mcp-integration 、 plugin-structure 、 plugin-settings 。
第二步：团队核心 SKILL 落地代码（以 CodeReview 为例）
markdown
## <!-- .claude/skills/code-review/SKILL.md -->
name: code-review
description: >
结构化代码审查工作流。根据团队规范检查代码质量、安全性和可维护性。
Use when the user asks to review code, check PR quality,
or perform a code review.
disable-model-invocation: true
allowed-tools: Read, Grep, Glob, Bash(git:\*)
model: sonnet
argument-hint: [file-or-branch]
context: fork
agent: code-reviewer
---
# 团队代码审查工作流
## 审查上下文
当前分支: `!git branch --show-current`
变更文件: `!git diff --name-only HEAD~1`
变更统计: `!git diff --stat HEAD~1`
## 审查执行步骤
### Step 1: 变更概览分析
分析本次代码变更的整体目标、影响范围、风险等级，明确审查重点。
### Step 2: 逐文件精细化审查
对每个变更文件执行以下全维度检查：
**代码质量检查：**
- 命名是否清晰，符合团队 PascalCase/camelCase 规范
- 是否存在重复代码，可提取公共方法/组件
- 函数/组件是否过长（超过 50 行需拆分）
- TypeScript 类型定义是否完整，禁止 any/unknown
**逻辑正确性检查：**
- 空值/边界条件是否完整处理（null/undefined/空数组）
- 异步操作是否有完整错误捕获，是否存在竞态条件风险
- React 组件状态管理是否合理，是否存在不必要的 re-render
- 接口请求是否有完整的加载态、错误态处理
**安全性检查：**
- 是否存在 XSS 风险（dangerouslySetInnerHTML 未做转义）
- 用户输入是否做了前后端双重校验
- 敏感信息是否泄露（console.log 遗留、硬编码密钥）
- 权限控制是否符合团队 RBAC 规范
**可维护性检查：**
- 核心逻辑是否有对应的单元测试用例
- 注释是否必要且准确，无冗余无效注释
- 代码变更是否向后兼容，是否有破坏性变更
- 是否遵循项目 CLAUDE.md 中的编码规范
### Step 3: 结构化审查报告输出
按以下固定格式输出最终审查报告：
**审查摘要：**
- 变更文件数: X
- 问题总数: X (严重 X / 建议 X)
- 整体评级: ✅ 可合并 / ⚠️ 需修改后合并 / ❌ 需重做
**问题明细列表：**
| 严重等级 | 文件路径 | 行号 | 问题描述 | 修复建议 |
|----------|----------|------|----------|----------|
| 🔴 严重 | ... | ... | ... | ... |
| 🟡 建议 | ... | ... | ... | ... |
**总体评价与改进方向：**
2-3 句话总结本次代码变更的整体情况，给出明确的改进方向。配套审查清单 checklist.md
markdown
## 团队代码审查必查清单
### 强制必查项
- [ ] 无 TypeScript any/unknown 类型
- [ ] 无 console.log/debugger 调试代码遗留
- [ ] 无硬编码敏感字符串，统一使用 i18n 国际化
- [ ] 所有 API 调用有完整错误处理
- [ ] 新增组件有完整 Props Interface 类型定义
### 建议优化项
- [ ] 复杂业务逻辑有清晰的注释说明
- [ ] 新增功能有对应的单元测试用例
- [ ] 样式使用 Tailwind 工具类，禁止内联样式
- [ ] 组件具备可复用性，无冗余业务耦合配套自定义 Agent 代码（code-reviewer）
markdown
## <!-- .claude/agents/code-reviewer.md -->
name: code-reviewer
description: >
Use this agent when the user asks to review code,
check PR quality, or analyze code changes.
<example>
Context: User has written code and wants a review.
user: "帮我审查一下这个 PR"
assistant: "I'll use the code-reviewer agent to analyze the changes."
<commentary>
Code review request triggers the code-reviewer agent.
</commentary>
</example>
## model: sonnet
你是团队资深前端代码审查专家，专注于前端代码质量与安全管控。
**核心职责：**
1. 分析代码变更的核心目的与影响范围
2. 对照团队编码规范，全维度检查代码质量、安全性、可维护性
3. 精准定位问题根因，给出可直接落地的修复方案
4. 生成结构化、可读性强的审查报告
**审查执行标准：**
- 严格遵循项目 CLAUDE.md 中定义的编码规范
- TypeScript 严格模式，零容忍 any 类型
- React 组件遵循 Hooks 最佳实践，规避闭包陷阱
- 所有异步操作必须有错误处理与 Loading 状态
- 严格排查 XSS、敏感信息泄露等安全风险
**输出规范：**
1. 先输出变更摘要，让审查人快速了解整体情况
2. 按严重等级分类输出问题明细，优先级从高到低
3. 每个问题必须给出具体的代码修改方案，而非空泛建议
4. 最后给出整体评价与明确的合并建议第三步：团队分发与复用
将 Skill 提交到 Git 仓库，团队成员拉取代码后即可直接使用，无需额外配置：
bash
git add .claude/skills/code-review/
git add .claude/agents/code-reviewer.md
git commit -m "feat: add team code-review skill and agent"
git push- 除了
/code-reviewSkill，还同步落地了另外两个核心 Skill: a./featSkill：完整功能开发工作流，自动读取 Spec→ 生成开发计划 → 拆分任务 → 编码实现 → 自检验收，覆盖从需求到代码的全流程； b./fixSkill：Bug 修复工作流，自动复现问题 → 定位根因 → 生成修复方案 → 验证修复效果 → 生成修复报告。
提效价值：团队研发流程标准化程度从 50% 提升至 100%，新成员上手成本降低 80%，团队整体研发效率提升 70%，实现了 "一个人沉淀，全团队受益"。
能力扩展：MCP —— 让 AI 连接一切的接口协议
核心定位：打破 AI 的能力边界，让 AI 从 "会说话的聊天机器人" 变成 "能干活的工程伙伴"，核心理念是「MCP 之于 AI，就像 USB 之于电脑」，每一个 MCP Server 都是给 AI 的一种超能力。
MCP 服务矩阵完整配置代码
json
{
"mcpServers": {
"postgres": {
"command": "npx",
"args": ["-y", "@anthropic/mcp-server-postgres"],
"env": {
"DATABASE_URL": "postgresql://user:pass@localhost:5432/saas_db"
}
},
"github": {
"command": "npx",
"args": ["-y", "@anthropic/mcp-server-github"],
"env": {
"GITHUB_TOKEN": "${GITHUB_TOKEN}"
}
},
"filesystem": {
"command": "npx",
"args": ["-y", "@anthropic/mcp-server-filesystem", "./docs"]
},
"figma": {
"command": "npx",
"args": ["-y", "@mcp/figma-server"],
"env": {
"FIGMA_ACCESS_TOKEN": "${FIGMA_ACCESS_TOKEN}"
}
},
"internal-api": {
"command": "npx",
"args": ["tsx", "./mcp-servers/internal-api-server.ts"]
}
}
}自定义 MCP Server 最小落地代码
typescript
// mcp-servers/internal-api-server.ts
import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js'
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js'
import { z } from 'zod'
import axios from 'axios'
// 初始化MCP服务
const server = new McpServer({
name: 'saas-internal-api',
version: '1.0.0',
})
// 注册工具1: 查询用户信息
server.tool(
'query_user_info',
'根据用户ID查询SaaS系统用户详细信息',
{
userId: z.string().describe('用户唯一ID'),
},
async ({ userId }) => {
const res = await axios.get(`https://internal-api.xxx.com/v1/users/${userId}`, {
headers: { Authorization: `Bearer ${process.env.INTERNAL_API_TOKEN}` },
})
return {
content: [{ type: 'text', text: JSON.stringify(res.data, null, 2) }],
}
},
)
// 注册工具2: 查询订单统计数据
server.tool(
'query_order_stats',
'查询指定时间范围内的订单统计数据, 支持按用户、地区筛选',
{
startTime: z.string().describe('开始时间, 格式YYYY-MM-DD'),
endTime: z.string().describe('结束时间, 格式YYYY-MM-DD'),
region: z.string().optional().describe('地区筛选, 可选值: cn/us/eu'),
},
async ({ startTime, endTime, region }) => {
const res = await axios.post(`https://internal-api.xxx.com/v1/orders/stats`, {
startTime,
endTime,
region,
})
return {
content: [{ type: 'text', text: JSON.stringify(res.data, null, 2) }],
}
},
)
// 启动MCP服务
const transport = new StdioServerTransport()
await server.connect(transport)
console.error('SaaS Internal API MCP Server 启动成功')5 大核心工程应用场景落地
a. 数据库 MCP：AI 直接查询业务数据库，生成数据报表、SQL 优化建议、数据校验逻辑； b. GitHub MCP：AI 直接管理 PR、Issue、分支，自动创建 PR、合并代码、处理 Code Review 意见； c. 内部 API MCP：打通公司内部业务系统，AI 直接调用接口实现业务需求全流程自动化； d. Figma MCP：AI 直接读取设计稿，提取设计令牌、生成 UI 代码、自动对齐设计规范； e. 文档知识库 MCP：对接团队内部 Wiki，AI 基于团队规范回答问题，避免生成不符合要求的内容。
提效价值：AI 的能力边界从 "编码" 扩展到了整个研发全链路，跨系统操作的工作量降低 90%，原本需要跨多个平台、多个步骤完成的工作，AI 可以一步完成。