一、什么是 Agent Skills？
简单来说，Agent Skills 是一种标准化的方式，用来封装特定任务的知识和工作流。 如果说 MCP (Model Context Protocol) 是给 AI 装上了'手'（让它能连接数据库、Github），那么 Skills 就是给 AI 的'操作说明书'（告诉它怎么用这双手去搬砖）。 它和 .cursorrules 的区别在于：.cursorrules (全局规则): 就像公司的'员工手册'，是 AI 必须时刻记住的（Always on），适合放通用的代码风格（比如'永远使用 TypeScript'）。Agent Skills (技能): 就像'特定的任务 SOP'，AI 只有在需要的时候（Context Relevant）才会去加载它，或者通过 / 命令手动触发。这大大节省了 Token，也让 AI 更专注。
二、使用步骤
1. 下载官方提供的 agent-skills 文档
GitHub 官方文档：skills
2. Cursor 中使用
在 Cursor 中新建 .cursor 目录加 skills 目录，把从 Github 上下载的 skills 拷贝到该目录下。
这是参考 frontend-design 这个 skills 来设计的网站，会发现精美许多。
三、如何设计自己的 skills
通过别人提供好的 skills 文档来生成。 在 Cursor 中输入提示词，Cursor 会自动扫描你文件下的 skill.md 文档进行生成。
四、实战：打造一个'生成标准 React 组件'的 Skill
假设我们团队有一个严格的组件开发规范：
- 组件必须是 Function Component。
- 必须使用 CSS Modules。
- 必须包含一个
interface定义 Props。 - 文件结构必须是文件夹形式。
我们来写一个 Skill 教会 Cursor 怎么做。
第一步：创建目录
在你的项目根目录下（或者全局 ~/.cursor/skills），创建一个存放技能的文件夹：
.cursor/
skills/
react-component-gen/ <-- 技能名称文件夹
SKILL.md <-- 核心定义文件
第二步：编写 SKILL.md
这是核心部分。SKILL.md 包含两部分：Frontmatter (元数据) 和 Markdown 正文 (指令)。
在 .cursor/skills/react-component-gen/SKILL.md 中写入：
---
name: react-component-gen
description: Generate a new React functional component with CSS Modules and TypeScript interfaces following team standards.
disable-model-invocation: false
---
# React Component Generator
Use this skill when the user asks to create a new UI component, page, or widget.
## Instructions
1. **Analyze the Request**: Identify the component name and props required.
2. **Directory Structure**:
- Create a folder named exactly as the component (PascalCase).
- Inside, create `index.tsx` and `styles.module.scss`.
3. **Code Standards**:
- **index.tsx**:
- Use `FC` type from 'react'.
- Import styles as `import styles from './styles.module.scss'`.
- Define an interface `[ComponentName]Props`.
- Export the component as default.
- **styles.module.scss**:
- Create a root class `.container`.
- Use BEM naming convention for inner elements if needed.
## Template Example
If the user asks for a "Button", generate:
```tsx
// Button/index.tsx
import React, { FC } from 'react';
import styles from './styles.module.scss';
export interface ButtonProps {
label: string;
onClick: () => void;
}
const Button: FC<ButtonProps> = ({ label, onClick }) => {
return (
<button className={styles.container} onClick={onClick}>
{label}
</button>
);
};
export default Button;
### 第三步：启用并使用
1. **启用**：确保你的 Cursor 是较新版本（部分功能可能在 Beta/Nightly 通道）。打开设置 -> `Rules` 或 `Features`，确保 Agent Skills 相关的开关已打开。
2. **自动触发**：
- 打开 Cursor 的 Agent 聊天框（CMD+L 或 CMD+K）。
- 输入：'帮我写一个 UserCard 组件，包含头像和名字。'
- 你会发现 Agent 会自动识别意图，加载 `react-component-gen` 技能，并严格按照你的模板生成代码！
3. **手动触发**：
- 输入 `/`，你应该能看到 `react-component-gen` 出现在命令列表中。
### 进阶玩法：带脚本的 Skill (自动化重构)
前端经常需要做一些批量重构，比如'找出所有硬编码的颜色并替换为 Tailwind 类名'。我们可以给 Skill 配上脚本。
.cursor/skills/refactor-color/ SKILL.md scripts/ find-hex.js <-- 一个扫描文件的脚本
**SKILL.md**:
```markdown
---
name: refactor-color
description: Refactor hardcoded hex colors to Tailwind utility classes.
---
# Color Refactoring
## Instructions
1. Run the script `scripts/find-hex.js` to locate hex codes in the current file.
2. For each hex code found, map it to the closest Tailwind color (e.g., `#ef4444` -> `text-red-500`).
3. Rewrite the code.
这样，AI 就不只是在'瞎猜'，而是真正执行了你写的工具脚本来辅助它工作。
总结：为什么你应该开始用 Skills？
- 团队规范统一：把这个
.cursor文件夹提交到 Git 仓库，新入职的同事git pull下来，他的 AI 助手立刻学会了全套团队规范，不用手把手教。 - 减少上下文污染：只在写组件时加载组件规范，写测试时加载测试规范，让 AI 的脑子更清醒。
- 沉淀最佳实践：把那些你每次都要重复敲的 Prompt，固化成代码资产。
💡 个人心得：不要试图把所有东西都塞进 .cursorrules。把 .cursorrules 当作宪法（不可动摇的原则），把 Agent Skills 当作SOP 手册（针对具体任务的流程）。
