15分钟
三、快速上手:从个人使用到团队协作
3.1 开始体验 Skills
1. 环境准备
- 需要本地安装 Git
#如未安装，可以选择点击下方链接，选择操作系统进行安装
https://git-scm.com/install/- 安装 Node
#如未安装，可通过下面指令安装
#如已经按照请忽略，未安装可进行安装
https://nodejs.org/en/download/ - 安装 CodeBuddy IDE 或 CodeBuddy Code
# 安装 CodeBuddy IDE，通过 iOA 登录，如无权限或未识别 iOA，腾讯用户选择 sso，输 tencent 即可，内网版插件开发中
https://copilot.tencent.com/ide
#也可以在本地终端安装或更新 CodeBuddy Code 进行后续操作
npm install -g @tencent-ai/codebuddy-code & codebuddy update2. 配置第一个 Skill 示例
- 在 CodeBuddy 中配置 Skills 目录：以官方 Anthropics 官方 Skills 开源仓库 https://github.com/anthropics/skills 为例，分别在 CodeBuddy IDE 和 CodeBuddy Code 中配置第一个 Skill 示例
#在CodeBuddy IDE 中进行配置 Skill 目录， 克隆 Skills 仓库，打开项目目录
mkdir - p ~/.codebuddy & cd ~/.codebuddy
git clone https://github.com/anthropics/skills.git
#如你在使用 CodeBuddy Code ，也可以进行配置 skill，将对应的skill 目录配置即可。
.codebuddy/skills/（在项目中配置项目skills）
~/.codebuddy/skills/（在本地配置用户级skills）3. 检测 Skill 是否生成
在 CodeBuddy 对话框中输入list skills 进行检测是否生效
4. 执行 Prompt
- 进行技能应用，在CodeBuddy 对话框中直接使用输入以下 Prompt
使用 webapp-testing skill 帮我进行针对 https://codebuddy.ai 官网做下 web 应用测试5. 效果检测
可以看到针对 codebuddy 官网帮助我们分析出来页面加载时间较长 (19.5秒) （可能受网络环境影响）
3.2 自定义专属 Skills
1.第一步：了解 Skills 结构: 每个 Skills 包含以下结构：
my-skill/
├── SKILL.md (必需)
│ ├── YAML 前置元数据 (必需)
│ │ ├── name: (必需)
│ │ └── description: (必需)
│ └── Markdown 指令 (必需)
└── 捆绑资源 (可选)
├── scripts/ - 可执行代码 (Python/Bash等)
├── references/ - 参考文档
└── assets/ - 输出文件 (模板、图标、字体等)- 查看模板 Skills
cat .codebuddy/skills/template-skill/SKILL.md2.第二步：创建您的第一个 Skills:
在 skills 目录下创建新的 skills
# 在 skills 目录下创建新的 skill
mkdir -p .codebuddy/skills/my-first-skill-code-review
cd .codebuddy/skills/my-first-skill-code-review3.第三步：创建 SKILL.md 文件
使用 CodeBuddy 创建一个代码审查 Skills 示例
---
name: code-reviewer
description: 这个 Skills 帮助进行代码审查，提供代码质量分析/在线报告预览、最佳实践建议和潜在问题识别。
---
# 代码审查专家 Skills
你是一个经验丰富的代码审查者，遵循业界最佳实践，提供专业的代码评估和改进建议。
## 审查重点
1. **代码质量**
- 命名规范
- 代码复杂度
- 重复代码
2. **安全性**
- SQL 注入风险
- XSS 漏洞
- 认证授权问题
3. **性能**
- 算法效率
- 资源使用
- 缓存策略
4. **可维护性**
- 代码注释
- 模块化设计
- 测试覆盖
## 审查流程
1. 理解代码变更的目的
2. 检查代码风格和规范
3. 分析潜在的 Bug 和性能问题
4. 验证安全性
5. 提供建设性的改进建议
## 输出格式
### 文本报告格式
- ✅ **优点**：列出做得好的地方
- ⚠️ **问题**：指出需要改进的地方（按严重程度分类）
- ? 严重：需要立即修复的问题
- ? 中等：建议修复的问题
- ? 轻微：可选的改进建议
- ? **建议**：提供具体的改进方案和示例代码
- ? **总体评分**：1-10 分
### HTML 报告生成和在线预览（必选）
当用户要求审查代码时，**自动生成 HTML 报告并在 IDE 中预览**：
#### 报告生成步骤
1. **创建 HTML 报告文件**，包含以下内容：
- 页面标题和审查时间
- 审查摘要和总体评分（大号显示，带进度条）
- 四个维度的评分卡片：
* 代码质量（Code Quality）
* 安全性（Security）
* 性能（Performance）
* 可维护性（Maintainability）
- 问题列表（按严重程度分类）：
* ? 严重问题（Critical）- 红色标识
* ? 中等问题（Medium）- 黄色标识
* ? 轻微问题（Minor）- 绿色标识
- 改进建议和代码示例（带语法高亮）
- 优点列表
2. **样式要求**：
- 使用现代化的 CSS 设计（渐变背景、卡片阴影、圆角）
- 响应式布局，适配不同屏幕尺寸
- 使用专业的配色方案
- 代码块使用等宽字体和语法高亮
- 添加图标和视觉元素提升可读性
3. **保存和预览**：
- 文件名格式：`code-review-report-{timestamp}.html`
- 保存到工作区根目录
- **使用 `preview_url` 工具自动在 IDE 中打开预览**
- 预览 URL 格式：`file:///绝对路径/code-review-report-{timestamp}.html`
#### HTML 模板结构
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代码审查报告</title>
<style>
/* 现代化样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.header {
text-align: center;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 3px solid #667eea;
}
.score-circle {
width: 150px;
height: 150px;
border-radius: 50%;
background: conic-gradient(#667eea 0% var(--score), #e0e0e0 var(--score) 100%);
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
position: relative;
}
.score-inner {
width: 120px;
height: 120px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
font-weight: bold;
color: #667eea;
}
.metrics {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin: 30px 0;
}
.metric-card {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.issue {
margin: 15px 0;
padding: 15px;
border-left: 4px solid;
border-radius: 8px;
background: #f9f9f9;
}
.critical { border-color: #e74c3c; background: #fee; }
.medium { border-color: #f39c12; background: #ffeaa7; }
.minor { border-color: #27ae60; background: #d5f4e6; }
pre {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
margin: 10px 0;
}
code {
font-family: 'Courier New', monospace;
}
</style>
</head>
<body>
<!-- 报告内容 -->
</body>
</html>
```
## 工具使用说明
### 必须使用的工具
1. **write_to_file** - 生成 HTML 报告文件
2. **preview_url** - 在 IDE 中预览报告
### 预览流程
```
1. 完成代码审查分析
2. 使用 write_to_file 创建 HTML 报告
3. 立即使用 preview_url 打开预览
- URL 格式：file:///绝对路径/code-review-report-{timestamp}.html
- 示例：file:///Users/username/project/code-review-report-20250103120000.html
```
## 审查示例
### 命名规范检查
```python
# ❌ 不好的命名
def f(x, y):
return x + y
# ✅ 好的命名
def calculate_total_price(base_price: float, tax_rate: float) -> float:
return base_price * (1 + tax_rate)
```
### 安全性检查
```python
# ❌ SQL 注入风险
query = f"SELECT * FROM users WHERE id = {user_id}"
# ✅ 使用参数化查询
query = "SELECT * FROM users WHERE id = ?"
cursor.execute(query, (user_id,))
```
### 性能优化检查
```javascript
// ❌ 低效的循环
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr.length; j++) {
// O(n²) 复杂度
}
}
// ✅ 使用 Map 优化
const map = new Map();
arr.forEach(item => map.set(item.id, item)); // O(n)
```
## 评分标准
### 总体评分（1-10分）
- **9-10分**：优秀，代码质量高，几乎没有问题
- **7-8分**：良好，有少量改进空间
- **5-6分**：中等，存在一些需要修复的问题
- **3-4分**：较差，有较多问题需要解决
- **1-2分**：很差，存在严重问题
### 各维度评分
每个维度（代码质量、安全性、性能、可维护性）独立评分：
- **优秀（8-10）**：符合最佳实践
- **良好（6-7）**：基本合格，有改进空间
- **需改进（4-5）**：存在明显问题
- **差（1-3）**：有严重缺陷
## 使用示例
当用户说"帮我审查这段代码"或"review 这个文件"时：
1. 仔细分析代码
2. 识别问题和优点
3. 生成详细的 HTML 报告
4. **自动在 IDE 中打开预览**
5. 告知用户报告已生成并可以查看4.第四步：检查自定义 Skills 是否生效
5.第五步：进行使用，检测
用户输入：
采用 code-review skills 帮我针对 mcp-builder 目录代码进行代码评审生成预览效果
学员评价