2025-11-28 【AI提示词】skills简述

一、开始体验 Skill

1. 环境准备

需要本地安装 Git

#如未安装，可以选择点击下方链接，选择操作系统进行安装
https://git-scm.com/install/

安装 Node

#如未安装，可通过下面指令安装 #如已经按照请忽略，未安装可进行安装
https://nodejs.org/en/download/

安装 CodeBuddy IDE 或 CodeBuddy Code

安装 CodeBuddy IDE，输 tencent 即可，内网版插件开发中
https://copilot.tencent.com/ide #也可以在本地终端安装或更新 CodeBuddy Code 最新版本，方便后续操作
npm install -g @tencent-ai/codebuddy-code & codebuddy update

2.配置第一个 Skill 示例

在 CodeBuddy 中配置 Skill 目录：以官方 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，将对应的 skills 目录配置即可。
.codebuddy/skills/（在项目中配置项目 skills）
~/.codebuddy/skills/（在本地配置用户级 skills） 3. 检测 Skill 是否生成
在 CodeBuddy 对话框中输入 list skills 进行检测是否生效

3. 检测 Skill 是否生成

在 CodeBuddy 对话框中输入 list skills 进行检测是否生效

4. 执行 Prompt

进行技能应用，在 CodeBuddy 对话框中直接使用输入以下 Prompt

使用 webapp-testing skill 帮我进行针对 https://codebuddy.ai 官网做下 web 应用测试

5. 效果检测

可以看到针对 CodeBuddy 官网帮助我们分析出来页面加载时间较长 (19.5 秒) （可能受网络环境影响）

二、自定义专属 Skill

1.第一步：了解 Skill 结构: 每个 Skill 包含以下结构：

my-skill/
├── SKILL.md (必需)
│   ├── YAML 前置元数据 (必需)
│   │   ├── name: (必需)
│   │   └── description: (必需)
│   └── Markdown 指令 (必需)
└── 捆绑资源 (可选)
    ├── scripts/          - 可执行代码 (Python/Bash等)
    ├── references/       - 参考文档
    └── assets/           - 输出文件 (模板、图标、字体等)

查看模板 Skill

1	`cat .codebuddy/skills/template-skill/SKILL.md`

2.第二步：创建您的第一个 Skill:

在 skills 目录下创建新的 skill

1
2
3

# 在 skills 目录下创建新的 skill
mkdir -p .codebuddy/skills/my-first-skill-code-review
cd .codebuddy/skills/my-first-skill-code-review

3.第三步：创建 SKILL.md 文件

---
name: code-reviewer
description: 这个 Skill 帮助进行代码审查，提供代码质量分析/在线报告预览、最佳实践建议和潜在问题识别。
---

# 代码审查专家 Skill，借助 CodeBuddy 生成的 Skill
你是一个经验丰富的代码审查者，遵循业界最佳实践，提供专业的代码评估和改进建议。

## 审查重点
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 是否生效
list code-review skills 是否生效
5.第五步：进行使用，检测
用户输入：

采用 code-review skills 帮我针对 mcp-builder 目录代码进行代码评审

生成预览效果

大模型

#AI提示词 #提示词工程

2025-11-28 【AI提示词】skills简述

https://zhangyingxuan.github.io/2025-11-28 【AI提示词】skills简述/

作者

blowsysun

许可协议

2025-11-17 【小程序】微信人脸核身上一篇

2025-11-28 【AI提示词】如何写好提示词与成为提示词工程师指南下一篇

2025-11-28 【AI提示词】skills简述

一、开始体验 Skill

1. 环境准备

2.配置第一个 Skill 示例

3. 检测 Skill 是否生成

4. 执行 Prompt

5. 效果检测

二、 自定义专属 Skill

二、自定义专属 Skill