Prompt Skill：AI 时代的核心技能

什么是 Prompt Skill

Prompt Skill（提示词技能）是指与 AI 模型进行有效沟通的能力。它是一种通过精心设计的文本指令，引导 AI 模型生成期望输出的技术。

简单来说，Prompt 就是你给 AI 的"指令"或"问题"，而 Prompt Skill 就是如何更好地提出这些指令的能力。

核心概念

Prompt（提示词）：输入给 AI 模型的文本指令
Context（上下文）：提供给 AI 的背景信息
Output（输出）：AI 根据 Prompt 生成的响应
Iteration（迭代）：通过不断优化 Prompt 来改进输出质量

为什么 Prompt Skill 重要

在 AI 时代，Prompt Skill 已经成为一项基础技能，其重要性体现在：

提高效率：好的 Prompt 能让 AI 一次性给出满意的答案，避免反复沟通
精准控制：通过精确的指令控制 AI 的输出格式、风格和内容
释放潜力：充分发挥 AI 模型的能力，获得更有价值的结果
降低成本：减少 token 消耗，提高工作效率

Prompt 的基本结构

一个有效的 Prompt 通常包含以下几个部分：

1. 角色设定（Role）

明确告诉 AI 它应该扮演什么角色。

你是一位资深的前端工程师，擅长 Vue.js 和 React 开发。

2. 任务描述（Task）

清晰地说明你希望 AI 完成什么任务。

请帮我分析这段代码的性能问题，并提供优化建议。

3. 上下文信息（Context）

提供必要的背景信息和约束条件。

这是一个电商网站的商品列表页面，目前有 10000+ 商品数据需要渲染。

4. 输出格式（Format）

指定期望的输出格式。

请以 Markdown 格式输出，包含问题分析、优化方案和代码示例三个部分。

Prompt Skill 的应用场景

1. 代码开发

场景：生成组件代码

作为一名 Vue 3 开发者，我需要创建一个可复用的表格组件。

要求：
- 使用 TypeScript 和 Composition API
- 支持分页、排序、筛选功能
- 支持自定义列配置
- 包含完整的类型定义

请提供完整的组件代码和使用示例。

2. 代码审查

场景：代码优化建议

请以资深架构师的角度审查以下代码：

[代码片段]

关注点：
1. 性能优化空间
2. 代码可维护性
3. 潜在的 bug 风险
4. 最佳实践建议

请给出具体的改进方案和重构代码。

3. 问题调试

场景：错误排查

我遇到了一个 React 组件的渲染问题：

错误信息：[错误堆栈]
相关代码：[代码片段]
环境信息：React 18, TypeScript 4.9

请帮我：
1. 分析错误原因
2. 提供解决方案
3. 给出预防类似问题的建议

4. 学习新技术

场景：技术学习

我是一名有 3 年 Vue 经验的前端开发者，想学习 React。

请为我制定一个 2 周的学习计划：
- 每天学习时间 2 小时
- 从基础到进阶循序渐进
- 包含实战项目练习
- 标注每个阶段的学习重点和参考资料

5. 文档编写

场景：API 文档生成

请根据以下函数代码生成完整的 API 文档：

[函数代码]

文档要求：
- 包含函数描述、参数说明、返回值、使用示例
- 使用 JSDoc 格式
- 添加类型注解
- 包含边界情况说明

Prompt 优化技巧

1. 明确具体

❌ 不好的 Prompt

帮我写一个函数

✅ 好的 Prompt

请用 TypeScript 编写一个防抖函数，要求：
- 支持立即执行选项
- 支持取消功能
- 包含完整的类型定义
- 添加详细的注释

2. 提供示例

使用 Few-shot Learning（少样本学习）技术：

请按照以下格式转换数据：

输入示例：
{ name: "张三", age: 25 }

输出示例：
{ userName: "张三", userAge: 25 }

现在请转换以下数据：
[你的数据]

3. 分步骤引导

对于复杂任务，将其分解为多个步骤：

请帮我完成一个用户认证系统的设计，按以下步骤进行：

步骤 1：分析需求，列出核心功能点
步骤 2：设计数据库表结构
步骤 3：设计 API 接口
步骤 4：提供前端实现方案
步骤 5：考虑安全性问题

请逐步完成每个步骤。

4. 使用约束条件

通过约束条件控制输出质量：

请优化以下 SQL 查询语句：

[SQL 语句]

约束条件：
- 不能改变查询结果
- 优先考虑查询性能
- 必须保持代码可读性
- 说明每个优化点的原因

5. 迭代优化

根据输出结果不断调整 Prompt：

第一次：请解释 Vue 3 的响应式原理

[得到基础解释后]

第二次：请深入讲解 Proxy 和 Reflect 在 Vue 3 响应式系统中的具体应用，
包含源码分析和实现细节

高级 Prompt 技巧

1. Chain of Thought（思维链）

引导 AI 展示推理过程：

请一步步分析这个算法的时间复杂度：

[算法代码]

要求：
1. 先识别关键操作
2. 分析每个操作的执行次数
3. 推导出总的时间复杂度
4. 给出优化建议

请展示完整的分析过程。

2. Role Playing（角色扮演）

让 AI 扮演特定角色：

假设你是 Vue.js 的核心开发者尤雨溪，有人问你：
"为什么 Vue 3 选择使用 Proxy 而不是继续使用 Object.defineProperty？"

请从技术架构和设计理念的角度详细回答这个问题。

3. Self-Consistency（自我一致性）

要求 AI 从多个角度验证答案：

请从以下三个角度分析这段代码是否存在内存泄漏：

1. 事件监听器管理
2. 闭包使用
3. DOM 引用

最后综合三个角度的分析给出结论。

常见误区

1. 过于简短

问题太简单，AI 无法理解真实需求。

2. 信息过载

一次性提供太多信息，导致 AI 抓不住重点。

3. 缺乏上下文

没有提供必要的背景信息，AI 只能给出通用答案。

4. 期望不明确

没有说明期望的输出格式和详细程度。

5. 不进行迭代

第一次结果不满意就放弃，而不是优化 Prompt 重试。

实战练习

练习 1：代码生成

尝试编写 Prompt，让 AI 生成一个完整的 Todo List 应用，包含：

添加、删除、编辑功能
本地存储
响应式设计
完整的类型定义

练习 2：代码重构

提供一段"坏代码"，编写 Prompt 让 AI：

识别代码问题
提供重构方案
解释重构理由
给出最佳实践建议

练习 3：技术方案设计

编写 Prompt，让 AI 帮你设计一个前端监控系统的技术方案。

在编辑器中配置 Agent Skill

现代编辑器（如 VS Code、Cursor、Windsurf 等）都支持 AI Agent 功能，我们可以通过配置自定义 Skill 来提升开发效率。

什么是 Agent Skill

Agent Skill 是预定义的 AI 能力模板，它包含：

系统提示词：定义 Agent 的角色和行为规范
工具集：Agent 可以使用的功能（如读写文件、执行命令等）
工作流程：完成特定任务的步骤和逻辑

主流编辑器的 Skill 配置

1. VS Code + GitHub Copilot

配置方式：

在项目根目录创建 .github/copilot-instructions.md：

markdown

# 项目开发规范

## 代码风格
- 使用 TypeScript 严格模式
- 组件使用函数式组件 + Hooks
- 使用 ESLint 和 Prettier 格式化代码

## 命名规范
- 组件文件使用 PascalCase：`UserProfile.tsx`
- 工具函数使用 camelCase：`formatDate.ts`
- 常量使用 UPPER_SNAKE_CASE：`API_BASE_URL`

## 注释要求
- 所有导出的函数必须包含 JSDoc 注释
- 复杂逻辑必须添加行内注释说明

## 测试要求
- 每个组件必须有对应的测试文件
- 测试覆盖率不低于 80%

使用场景： Copilot 会根据这个文件的规范来生成代码，确保代码风格一致。

2. Cursor

配置方式：

在项目根目录创建 .cursorrules 文件：

你是一个专业的前端开发助手，专注于 React 和 TypeScript 开发。

# 技术栈
- React 18
- TypeScript 5.0+
- Vite
- TailwindCSS
- React Query

# 代码规范
1. 所有组件使用 TypeScript，必须定义 Props 类型
2. 使用函数式组件和 Hooks
3. 状态管理优先使用 React Query，复杂状态使用 Zustand
4. 样式使用 TailwindCSS，避免内联样式
5. 异步操作必须有错误处理和 loading 状态

# 文件结构
src/
  components/     # 可复用组件
  pages/         # 页面组件
  hooks/         # 自定义 Hooks
  utils/         # 工具函数
  types/         # 类型定义
  api/           # API 请求

# 代码生成要求
- 生成组件时自动创建对应的 .test.tsx 文件
- 包含完整的类型定义
- 添加必要的注释
- 考虑可访问性（a11y）

# 重构建议
- 识别重复代码并提取为可复用组件
- 优化性能（useMemo、useCallback）
- 改进类型安全性

高级配置：

创建 .cursor/prompts/ 目录，添加自定义 Prompt：

.cursor/
  prompts/
    component.md      # 组件生成模板
    api.md           # API 接口生成模板
    test.md          # 测试用例生成模板

component.md 示例：

markdown

# React 组件生成模板

请根据以下要求生成 React 组件：

## 组件结构
- 使用 TypeScript
- 函数式组件 + Hooks
- Props 类型定义
- 默认导出

## 必须包含
- Props 接口定义
- 组件注释（功能说明）
- 错误边界处理
- 可访问性属性

## 代码示例
\`\`\`tsx
interface ButtonProps {
  /** 按钮文本 */
  label: string;
  /** 点击事件 */
  onClick: () => void;
  /** 按钮类型 */
  variant?: 'primary' | 'secondary';
  /** 是否禁用 */
  disabled?: boolean;
}

/**
 * 通用按钮组件
 */
export default function Button({ 
  label, 
  onClick, 
  variant = 'primary',
  disabled = false 
}: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${variant}`}
      aria-label={label}
    >
      {label}
    </button>
  );
}
\`\`\`

3. Windsurf

配置方式：

创建 .windsurfrules 文件：

yaml

# Windsurf AI 配置

role: |
  你是一个资深的全栈开发工程师，擅长 Vue 3、React 和 Node.js 开发。
  你的代码风格简洁、高效，注重性能和可维护性。

rules:
  - 使用 TypeScript 进行类型安全开发
  - 遵循 SOLID 原则
  - 优先使用组合而非继承
  - 编写自文档化的代码
  - 关注性能优化和用户体验

code_style:
  indent: 2
  quotes: single
  semicolons: true
  trailing_comma: es5
  
frameworks:
  vue:
    version: 3
    composition_api: true
    script_setup: true
  react:
    version: 18
    hooks: true
    
testing:
  framework: vitest
  coverage: 80
  
git:
  commit_format: "type(scope): message"
  commit_types:
    - feat: 新功能
    - fix: 修复
    - docs: 文档
    - style: 格式
    - refactor: 重构
    - test: 测试
    - chore: 构建

4. VS Code + Continue

配置方式：

创建 .continue/config.json：

json

{
  "models": [
    {
      "title": "GPT-4",
      "provider": "openai",
      "model": "gpt-4",
      "apiKey": "your-api-key"
    }
  ],
  "systemMessage": "你是一个专业的前端开发助手。遵循项目的代码规范，生成高质量、可维护的代码。",
  "slashCommands": [
    {
      "name": "component",
      "description": "生成 React 组件",
      "prompt": "请生成一个 React 组件，要求：\n1. 使用 TypeScript\n2. 包含完整的类型定义\n3. 添加 JSDoc 注释\n4. 考虑可访问性\n\n组件名称：{input}"
    },
    {
      "name": "test",
      "description": "生成测试用例",
      "prompt": "为以下代码生成完整的测试用例：\n1. 使用 Vitest\n2. 覆盖主要功能\n3. 包含边界情况\n4. 添加测试说明\n\n{input}"
    },
    {
      "name": "refactor",
      "description": "代码重构建议",
      "prompt": "请分析以下代码并提供重构建议：\n1. 性能优化\n2. 代码可读性\n3. 类型安全\n4. 最佳实践\n\n{input}"
    }
  ],
  "contextProviders": [
    {
      "name": "code",
      "params": {}
    },
    {
      "name": "docs",
      "params": {
        "sites": [
          "https://react.dev",
          "https://vuejs.org",
          "https://www.typescriptlang.org"
        ]
      }
    }
  ]
}

5. Kiro

Kiro 通过 Steering（引导规则） 来配置 AI 行为，这是一种更灵活的 Skill 配置方式。

配置方式：

在项目根目录创建 .kiro/steering/ 目录，添加 Markdown 格式的规则文件。

基础配置示例：

创建 .kiro/steering/project-standards.md：

markdown

---
# 默认情况下，steering 文件会自动包含在所有对话中
# 也可以配置为条件包含或手动包含
---

# 项目开发规范

## 技术栈
- React 18 + TypeScript
- Vite 构建工具
- TailwindCSS 样式方案
- React Query 数据管理
- Vitest 测试框架

## 代码规范

### 组件开发
- 使用函数式组件 + Hooks
- 组件文件使用 PascalCase 命名：`UserProfile.tsx`
- 每个组件必须有 TypeScript 类型定义
- Props 接口命名：`组件名 + Props`，如 `UserProfileProps`

### 文件组织
\`\`\`
src/
  components/     # 可复用组件
    Button/
      Button.tsx
      Button.test.tsx
      index.ts
  pages/         # 页面组件
  hooks/         # 自定义 Hooks
  utils/         # 工具函数
  types/         # 类型定义
  api/           # API 请求
\`\`\`

### 命名规范
- 组件：PascalCase（`UserCard.tsx`）
- 函数/变量：camelCase（`getUserInfo`）
- 常量：UPPER_SNAKE_CASE（`API_BASE_URL`）
- 类型/接口：PascalCase（`UserInfo`）
- CSS 类：kebab-case（`user-card`）

### 代码质量要求
- 所有导出函数必须有 JSDoc 注释
- 复杂逻辑必须添加注释说明
- 避免使用 any 类型
- 使用 ESLint 和 Prettier 格式化代码

## 开发流程
1. 创建功能分支：`feature/功能名称`
2. 编写代码和测试
3. 提交前运行 `npm run lint` 和 `npm test`
4. 提交信息格式：`type(scope): message`

条件包含配置：

创建 .kiro/steering/react-components.md，仅在读取 React 组件文件时生效：

markdown

---
inclusion: fileMatch
fileMatchPattern: '**/*.tsx'
---

# React 组件开发指南

## 组件模板

每个组件应该包含：

\`\`\`tsx
import { FC } from 'react';

interface ComponentNameProps {
  /** Props 说明 */
  propName: string;
}

/**
 * 组件功能描述
 * 
 * @example
 * <ComponentName propName="value" />
 */
export const ComponentName: FC<ComponentNameProps> = ({ propName }) => {
  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
};
\`\`\`

## 性能优化
- 使用 `React.memo` 避免不必要的重渲染
- 使用 `useMemo` 缓存计算结果
- 使用 `useCallback` 缓存函数引用
- 合理使用 `lazy` 和 `Suspense` 进行代码分割

## 可访问性
- 使用语义化 HTML 标签
- 添加 `aria-label` 属性
- 确保键盘可访问
- 提供合适的 `role` 属性

手动包含配置：

创建 .kiro/steering/code-review.md，需要手动通过 # 引用：

markdown

---
inclusion: manual
---

# 代码审查标准

当进行代码审查时，请按照以下维度评估：

## 1. 代码质量 ⭐⭐⭐⭐⭐
- 命名是否清晰易懂
- 逻辑是否简洁明了
- 是否有重复代码
- 是否遵循 DRY 原则

## 2. 类型安全 ⭐⭐⭐⭐⭐
- 是否避免使用 any
- 类型定义是否完整
- 是否有类型断言滥用
- 泛型使用是否合理

## 3. 性能考虑 ⭐⭐⭐⭐⭐
- 是否有不必要的重渲染
- 是否合理使用缓存
- 算法复杂度是否合理
- 是否有内存泄漏风险

## 4. 安全性 ⭐⭐⭐⭐⭐
- 用户输入是否经过验证
- 是否有 XSS 风险
- 敏感信息是否加密
- API 调用是否安全

## 5. 可维护性 ⭐⭐⭐⭐⭐
- 函数长度是否合理（< 50 行）
- 注释是否充分
- 是否易于测试
- 是否符合 SOLID 原则

## 输出格式

\`\`\`markdown
### 审查结果

#### ⚠️ 问题
1. [严重] 问题描述
   - 位置：文件名:行号
   - 建议：修复方案

#### ✅ 优点
- 做得好的地方

#### 💡 改进建议
1. 具体建议
2. 重构方案

#### 📝 示例代码
\`\`\`typescript
// 改进后的代码
\`\`\`
\`\`\`

引用外部文件：

Steering 文件支持引用其他文件，如 API 规范：

markdown

---
inclusion: manual
---

# API 开发规范

## OpenAPI 规范
项目的 API 遵循以下规范：

#[[file:docs/api-spec.yaml]]

## 实现要求
- 所有 API 必须符合 OpenAPI 规范
- 使用 Axios 进行请求
- 统一的错误处理
- 请求/响应拦截器

使用方式：

自动生效：默认情况下，.kiro/steering/ 中的文件会自动包含在对话中
条件生效：配置 fileMatchPattern 后，只在匹配的文件被读取时生效

手动引用：在聊天中使用 # 符号引用：

请按照 #code-review 的标准审查这段代码

查看和管理 Steering：

Steering 文件位于 .kiro/steering/ 目录
可以随时编辑和更新
建议纳入版本控制，团队共享

实战示例：

创建 .kiro/steering/testing.md：

markdown

---
inclusion: fileMatch
fileMatchPattern: '**/*.test.{ts,tsx}'
---

# 测试规范

## 测试框架
- Vitest + React Testing Library

## 测试结构
\`\`\`typescript
describe('ComponentName', () => {
  it('should render correctly', () => {
    // 测试渲染
  });

  it('should handle user interaction', () => {
    // 测试交互
  });

  it('should handle edge cases', () => {
    // 测试边界情况
  });
});
\`\`\`

## 测试要点
- 测试用户行为，而非实现细节
- 覆盖主要功能路径
- 包含边界情况和错误处理
- 使用有意义的测试描述
- 保持测试独立性

## 覆盖率要求
- 语句覆盖率 > 80%
- 分支覆盖率 > 75%
- 函数覆盖率 > 80%

Kiro Steering 的优势：

灵活的包含策略：支持自动、条件、手动三种方式
文件引用：可以引用项目中的其他文档（如 OpenAPI 规范）
Markdown 格式：易于编写和维护
团队协作：通过版本控制共享规范
上下文感知：根据当前文件自动加载相关规则

6. Antigravity (Google)

Google 的 Antigravity 是一款 AI 原生的代码编辑器，通过 Agent Rules 来配置 AI 行为。

配置方式：

在项目根目录创建 .antigravity/rules/ 目录，添加规则文件。

基础配置示例：

创建 .antigravity/rules/project.yaml：

yaml

# Antigravity Agent Rules

name: "项目开发规范"
version: "1.0.0"
enabled: true

# Agent 角色定义
agent:
  role: "资深全栈开发工程师"
  expertise:
    - "React 18"
    - "TypeScript 5.0+"
    - "Node.js"
    - "PostgreSQL"
  personality: "专业、高效、注重代码质量"

# 技术栈配置
tech_stack:
  frontend:
    framework: "React 18"
    language: "TypeScript"
    build_tool: "Vite"
    styling: "TailwindCSS"
    state_management: "Zustand"
    testing: "Vitest + React Testing Library"
  
  backend:
    runtime: "Node.js 20"
    framework: "Express"
    database: "PostgreSQL"
    orm: "Prisma"

# 代码规范
coding_standards:
  naming:
    components: "PascalCase"  # UserProfile.tsx
    functions: "camelCase"     # getUserInfo
    constants: "UPPER_SNAKE_CASE"  # API_BASE_URL
    types: "PascalCase"        # UserInfo
    
  file_structure:
    - "src/components/  # 可复用组件"
    - "src/pages/       # 页面组件"
    - "src/hooks/       # 自定义 Hooks"
    - "src/utils/       # 工具函数"
    - "src/types/       # 类型定义"
    - "src/api/         # API 请求"
    
  code_quality:
    - "所有导出函数必须有 JSDoc 注释"
    - "避免使用 any 类型"
    - "函数长度不超过 50 行"
    - "使用 ESLint 和 Prettier"
    - "测试覆盖率 > 80%"

# 开发流程
workflow:
  git:
    branch_naming: "feature/功能名称 | fix/问题描述 | refactor/重构内容"
    commit_format: "type(scope): message"
    commit_types:
      - "feat: 新功能"
      - "fix: 修复 bug"
      - "docs: 文档更新"
      - "style: 代码格式"
      - "refactor: 重构"
      - "test: 测试"
      - "chore: 构建/工具"
  
  code_review:
    required: true
    checklist:
      - "代码规范"
      - "性能优化"
      - "安全性"
      - "测试覆盖"

# AI 行为规则
ai_behavior:
  code_generation:
    - "生成代码时必须包含完整的类型定义"
    - "自动添加必要的注释"
    - "考虑错误处理和边界情况"
    - "遵循项目的文件结构"
    
  code_review:
    - "检查代码规范"
    - "识别性能问题"
    - "发现安全隐患"
    - "提供具体的改进建议"
    
  refactoring:
    - "保持功能不变"
    - "提高代码可读性"
    - "优化性能"
    - "减少重复代码"

组件生成规则：

创建 .antigravity/rules/react-component.yaml：

yaml

name: "React 组件生成规则"
trigger:
  keywords: ["创建组件", "生成组件", "新建组件"]
  file_patterns: ["**/*.tsx", "**/*.jsx"]

template: |
  import { FC } from 'react';
  
  interface {{ComponentName}}Props {
    /** Props 说明 */
    // 根据需求生成 props
  }
  
  /**
   * {{ComponentName}} 组件
   * 
   * @description 组件功能描述
   * @example
   * ```tsx
   * <{{ComponentName}} />
   * ```
   */
  export const {{ComponentName}}: FC<{{ComponentName}}Props> = (props) => {
    return (
      <div>
        {/* 组件内容 */}
      </div>
    );
  };

rules:
  - "使用 TypeScript"
  - "Props 接口命名：组件名 + Props"
  - "添加 JSDoc 注释"
  - "包含使用示例"
  - "考虑可访问性（aria 属性）"
  - "使用语义化 HTML"
  
best_practices:
  performance:
    - "使用 React.memo 避免不必要的重渲染"
    - "使用 useMemo 缓存计算结果"
    - "使用 useCallback 缓存函数"
  
  accessibility:
    - "使用语义化标签"
    - "添加 aria-label"
    - "确保键盘可访问"
    - "提供合适的 role 属性"

代码审查规则：

创建 .antigravity/rules/code-review.yaml：

yaml

name: "代码审查规则"
trigger:
  commands: ["review", "审查代码", "code review"]

review_dimensions:
  code_quality:
    weight: 20
    checklist:
      - "命名是否清晰"
      - "逻辑是否简洁"
      - "是否有重复代码"
      - "是否遵循 DRY 原则"
  
  type_safety:
    weight: 20
    checklist:
      - "是否避免 any"
      - "类型定义是否完整"
      - "泛型使用是否合理"
  
  performance:
    weight: 20
    checklist:
      - "是否有不必要的重渲染"
      - "是否合理使用缓存"
      - "算法复杂度是否合理"
      - "是否有内存泄漏风险"
  
  security:
    weight: 20
    checklist:
      - "输入是否经过验证"
      - "是否有 XSS 风险"
      - "敏感信息是否加密"
      - "API 调用是否安全"
  
  maintainability:
    weight: 20
    checklist:
      - "函数长度是否合理"
      - "注释是否充分"
      - "是否易于测试"
      - "是否符合 SOLID 原则"

output_format: |
  ## 代码审查报告
  
  ### 📊 评分
  - 代码质量：{{code_quality_score}}/5
  - 类型安全：{{type_safety_score}}/5
  - 性能优化：{{performance_score}}/5
  - 安全性：{{security_score}}/5
  - 可维护性：{{maintainability_score}}/5
  
  ### ⚠️ 发现的问题
  {{issues}}
  
  ### ✅ 优点
  {{strengths}}
  
  ### 💡 改进建议
  {{suggestions}}
  
  ### 📝 重构示例
  ```typescript
  {{refactored_code}}

**测试生成规则：**

创建 `.antigravity/rules/testing.yaml`：

```yaml
name: "测试生成规则"
trigger:
  keywords: ["生成测试", "创建测试", "写测试"]
  file_patterns: ["**/*.test.ts", "**/*.test.tsx", "**/*.spec.ts"]

framework: "vitest"
library: "react-testing-library"

template: |
  import { describe, it, expect, vi } from 'vitest';
  import { render, screen, fireEvent } from '@testing-library/react';
  import { {{ComponentName}} } from './{{ComponentName}}';
  
  describe('{{ComponentName}}', () => {
    it('should render correctly', () => {
      // 测试渲染
    });
    
    it('should handle user interactions', () => {
      // 测试交互
    });
    
    it('should handle edge cases', () => {
      // 测试边界情况
    });
  });

rules:
  - "测试用户行为，而非实现细节"
  - "覆盖主要功能路径"
  - "包含边界情况和错误处理"
  - "使用有意义的测试描述"
  - "保持测试独立性"
  - "使用 AAA 模式（Arrange-Act-Assert）"

coverage_requirements:
  statements: 80
  branches: 75
  functions: 80
  lines: 80

API 开发规则：

创建 .antigravity/rules/api.yaml：

yaml

name: "API 开发规则"
trigger:
  file_patterns: ["**/api/**/*.ts", "**/routes/**/*.ts"]

standards:
  rest:
    naming: "使用复数名词，如 /users, /posts"
    methods:
      GET: "获取资源"
      POST: "创建资源"
      PUT: "完整更新资源"
      PATCH: "部分更新资源"
      DELETE: "删除资源"
    
    status_codes:
      200: "成功"
      201: "创建成功"
      400: "请求错误"
      401: "未授权"
      403: "禁止访问"
      404: "未找到"
      500: "服务器错误"
  
  response_format:
    success: |
      {
        "success": true,
        "data": {},
        "message": "操作成功"
      }
    
    error: |
      {
        "success": false,
        "error": {
          "code": "ERROR_CODE",
          "message": "错误描述"
        }
      }

validation:
  - "所有输入必须验证"
  - "使用 Zod 或 Joi 进行数据验证"
  - "返回清晰的错误信息"

security:
  - "使用 JWT 进行身份验证"
  - "敏感操作需要权限检查"
  - "防止 SQL 注入"
  - "限制请求频率（Rate Limiting）"

documentation:
  - "使用 OpenAPI/Swagger 规范"
  - "包含请求示例"
  - "包含响应示例"
  - "说明错误码"

使用 Antigravity Rules：

自动触发：当文件匹配 file_patterns 时自动应用规则

命令触发：在编辑器中使用命令触发特定规则

/review  # 触发代码审查
/test    # 生成测试
/component UserCard  # 生成组件

关键词触发：在对话中使用关键词触发规则

请帮我创建一个 Button 组件
审查这段代码
生成测试用例

高级配置：

创建 .antigravity/rules/advanced.yaml：

yaml

name: "高级开发规则"

# 上下文感知
context_awareness:
  - name: "识别项目类型"
    rules:
      - "检查 package.json 确定技术栈"
      - "根据文件结构推断架构模式"
      - "自动适配项目规范"
  
  - name: "代码关联分析"
    rules:
      - "分析导入依赖"
      - "识别相关组件"
      - "提供上下文相关建议"

# 智能重构
refactoring:
  patterns:
    - name: "提取组件"
      trigger: "组件代码超过 200 行"
      action: "建议拆分为多个子组件"
    
    - name: "提取 Hook"
      trigger: "逻辑重复出现"
      action: "建议提取为自定义 Hook"
    
    - name: "优化性能"
      trigger: "检测到性能问题"
      action: "提供优化方案"

# 错误预防
error_prevention:
  - "检测常见错误模式"
  - "提供修复建议"
  - "预防潜在 bug"

# 学习适应
learning:
  - "学习团队代码风格"
  - "适应项目特定模式"
  - "持续优化建议质量"

团队协作配置：

创建 .antigravity/team.yaml：

yaml

# 团队配置
team:
  name: "前端开发团队"
  
  members:
    - role: "前端工程师"
      focus: ["React", "TypeScript", "UI/UX"]
    - role: "全栈工程师"
      focus: ["Node.js", "数据库", "API"]
  
  shared_rules:
    - "project.yaml"
    - "react-component.yaml"
    - "code-review.yaml"
    - "testing.yaml"

# 代码审查流程
code_review_workflow:
  auto_review: true
  reviewers: 2
  approval_required: true
  
  automated_checks:
    - "代码规范检查"
    - "类型检查"
    - "测试覆盖率"
    - "性能分析"

# 知识库
knowledge_base:
  - path: "docs/architecture.md"
    description: "系统架构文档"
  - path: "docs/api-spec.yaml"
    description: "API 规范"
  - path: "docs/design-system.md"
    description: "设计系统"

Antigravity 的特色功能：

YAML 配置：结构化、易于维护
触发机制：支持关键词、命令、文件模式多种触发方式
模板系统：预定义代码模板，快速生成标准代码
权重评分：代码审查时使用权重系统进行评分
上下文感知：自动识别项目类型和技术栈
团队协作：支持团队级别的规则共享和配置
学习适应：AI 会学习团队的代码风格并持续优化

与其他编辑器的对比：

特性	Antigravity	Cursor	Kiro	Windsurf
配置格式	YAML	Text	Markdown	YAML
触发方式	多种	自动	灵活	自动
模板系统	✅	❌	❌	❌
权重评分	✅	❌	❌	❌
团队协作	✅	✅	✅	✅
学习适应	✅	❌	❌	❌

实战：创建自定义 Skill

以创建一个"代码审查 Skill"为例：

步骤 1：定义 Skill 目标

markdown

# Code Review Skill

目标：自动审查代码质量，提供改进建议

审查维度：
1. 代码规范
2. 性能优化
3. 安全性
4. 可维护性
5. 测试覆盖

步骤 2：编写 Prompt 模板

创建 .ai/skills/code-review.md：

markdown

# 代码审查 Skill

你是一位资深的代码审查专家，请按照以下标准审查代码：

## 审查清单

### 1. 代码规范 (Code Style)
- [ ] 命名是否清晰、符合规范
- [ ] 缩进和格式是否一致
- [ ] 是否有无用的注释或代码
- [ ] 是否遵循项目的编码规范

### 2. 性能优化 (Performance)
- [ ] 是否存在不必要的重复计算
- [ ] 是否合理使用缓存
- [ ] 是否有内存泄漏风险
- [ ] 算法复杂度是否合理

### 3. 安全性 (Security)
- [ ] 是否有 XSS 风险
- [ ] 是否有 SQL 注入风险
- [ ] 敏感信息是否加密
- [ ] 输入是否经过验证

### 4. 可维护性 (Maintainability)
- [ ] 函数是否过长（建议 < 50 行）
- [ ] 是否有重复代码
- [ ] 是否有足够的注释
- [ ] 是否易于测试

### 5. 最佳实践 (Best Practices)
- [ ] 是否遵循 SOLID 原则
- [ ] 错误处理是否完善
- [ ] 是否有适当的日志
- [ ] 是否考虑边界情况

## 输出格式

请按以下格式输出审查结果：

### 🎯 总体评分
- 代码规范：⭐⭐⭐⭐⭐
- 性能优化：⭐⭐⭐⭐
- 安全性：⭐⭐⭐⭐⭐
- 可维护性：⭐⭐⭐⭐
- 最佳实践：⭐⭐⭐⭐

### ⚠️ 发现的问题

#### 严重问题
1. [问题描述]
   - 位置：[文件:行号]
   - 影响：[影响说明]
   - 建议：[修复建议]

#### 一般问题
1. [问题描述]
   - 建议：[改进建议]

### ✅ 优点
- [做得好的地方]

### 💡 改进建议
1. [具体建议]
2. [重构方案]

### 📝 重构代码示例
\`\`\`typescript
// 重构后的代码
\`\`\`

步骤 3：配置到编辑器

Cursor 配置：

在 .cursorrules 中引用：

# 导入自定义 Skill
@import .ai/skills/code-review.md

# 使用方式
当用户说"审查代码"或"code review"时，使用 code-review skill 进行审查。

VS Code 配置：

在 settings.json 中添加：

json

{
  "github.copilot.advanced": {
    "customPrompts": {
      "review": {
        "prompt": "file:.ai/skills/code-review.md",
        "description": "代码审查"
      }
    }
  }
}

常用 Skill 模板

1. Bug 修复 Skill

markdown

# Bug 修复流程

1. 理解问题
   - 复现步骤
   - 错误信息
   - 预期行为 vs 实际行为

2. 定位问题
   - 检查相关代码
   - 分析调用链
   - 查看日志

3. 修复方案
   - 提供多个解决方案
   - 分析优缺点
   - 推荐最佳方案

4. 验证修复
   - 编写测试用例
   - 确保不引入新问题

2. 性能优化 Skill

markdown

# 性能优化检查

## 前端性能
- 组件渲染优化（React.memo、useMemo）
- 懒加载和代码分割
- 图片优化
- 网络请求优化

## 后端性能
- 数据库查询优化
- 缓存策略
- 并发处理
- 资源池管理

## 输出
- 性能瓶颈分析
- 优化方案
- 预期提升效果

3. 文档生成 Skill

markdown

# 自动生成文档

## API 文档
- 接口描述
- 请求参数
- 响应格式
- 错误码说明
- 使用示例

## 组件文档
- 组件功能
- Props 说明
- 事件说明
- 使用示例
- 注意事项

最佳实践

保持 Skill 专注：每个 Skill 只做一件事
提供清晰的示例：让 AI 理解期望的输出格式
定期更新：根据项目演进更新 Skill
团队共享：将 Skill 配置纳入版本控制
测试验证：确保 Skill 在不同场景下都能正常工作

团队协作

将 Skill 配置文件提交到代码仓库：

.ai/
  skills/
    code-review.md
    bug-fix.md
    performance.md
  prompts/
    component.md
    api.md
.cursorrules
.windsurfrules
.github/
  copilot-instructions.md

这样团队成员都能使用统一的 AI 辅助开发规范，提高协作效率。

总结

Prompt Skill 是 AI 时代的必备技能，它不仅能提高工作效率，还能帮助我们更好地利用 AI 工具。

掌握 Prompt Skill 的关键在于：

明确目标：清楚地知道你想要什么
提供上下文：给 AI 足够的背景信息
结构化表达：使用清晰的结构组织 Prompt
持续迭代：根据结果不断优化 Prompt
多加练习：在实际工作中不断应用和改进

记住，好的 Prompt 不是一蹴而就的，需要不断实践和优化。随着经验的积累，你会越来越擅长与 AI 沟通，从而更高效地完成工作。

Prompt Skill：AI 时代的核心技能 ​

什么是 Prompt Skill ​

核心概念 ​

为什么 Prompt Skill 重要 ​

Prompt 的基本结构 ​

1. 角色设定（Role） ​

2. 任务描述（Task） ​

3. 上下文信息（Context） ​

4. 输出格式（Format） ​

Prompt Skill 的应用场景 ​

1. 代码开发 ​

2. 代码审查 ​

3. 问题调试 ​

4. 学习新技术 ​

5. 文档编写 ​

Prompt 优化技巧 ​

1. 明确具体 ​

2. 提供示例 ​

3. 分步骤引导 ​

4. 使用约束条件 ​

5. 迭代优化 ​

高级 Prompt 技巧 ​

1. Chain of Thought（思维链） ​

2. Role Playing（角色扮演） ​

3. Self-Consistency（自我一致性） ​

常见误区 ​

1. 过于简短 ​

2. 信息过载 ​

3. 缺乏上下文 ​

4. 期望不明确 ​

5. 不进行迭代 ​

实战练习 ​

练习 1：代码生成 ​

练习 2：代码重构 ​

练习 3：技术方案设计 ​

在编辑器中配置 Agent Skill ​

什么是 Agent Skill ​

主流编辑器的 Skill 配置 ​

1. VS Code + GitHub Copilot ​

2. Cursor ​

3. Windsurf ​

4. VS Code + Continue ​

5. Kiro ​

6. Antigravity (Google) ​

实战：创建自定义 Skill ​

步骤 1：定义 Skill 目标 ​

步骤 2：编写 Prompt 模板 ​

步骤 3：配置到编辑器 ​

常用 Skill 模板 ​

1. Bug 修复 Skill ​

2. 性能优化 Skill ​

3. 文档生成 Skill ​

最佳实践 ​

团队协作 ​

总结 ​

参考资源 ​

Prompt Skill：AI 时代的核心技能

什么是 Prompt Skill

核心概念

为什么 Prompt Skill 重要

Prompt 的基本结构

1. 角色设定（Role）

2. 任务描述（Task）

3. 上下文信息（Context）

4. 输出格式（Format）

Prompt Skill 的应用场景

1. 代码开发

2. 代码审查

3. 问题调试

4. 学习新技术

5. 文档编写

Prompt 优化技巧

1. 明确具体

2. 提供示例

3. 分步骤引导

4. 使用约束条件

5. 迭代优化

高级 Prompt 技巧

1. Chain of Thought（思维链）

2. Role Playing（角色扮演）

3. Self-Consistency（自我一致性）

常见误区

1. 过于简短

2. 信息过载

3. 缺乏上下文

4. 期望不明确

5. 不进行迭代

实战练习

练习 1：代码生成

练习 2：代码重构

练习 3：技术方案设计

在编辑器中配置 Agent Skill

什么是 Agent Skill

主流编辑器的 Skill 配置

1. VS Code + GitHub Copilot

2. Cursor

3. Windsurf

4. VS Code + Continue

5. Kiro

6. Antigravity (Google)

实战：创建自定义 Skill

步骤 1：定义 Skill 目标

步骤 2：编写 Prompt 模板

步骤 3：配置到编辑器

常用 Skill 模板

1. Bug 修复 Skill

2. 性能优化 Skill

3. 文档生成 Skill

最佳实践

团队协作

总结

参考资源