Cursor Agent Skills 实战指南：打造专属前端 AI 助手

一、什么是 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:https://github.com/anthropics/skills

2. Cursor 中使用

在 Cursor 中新建 .cursor 目录加 skills 目录，把从 Github 上下载的 skills 拷贝到该目录下。

这是参考 frontend-design 这个 skills 来设计的网站，会发现精美许多。

三、如何设计自己的 skills

通过别人提供好的 skills 文档来生成。

在 Cursor 中输入提示词，Cursor 会自动扫描你文件下的 skill.md 文档进行生成。

四、实战：打造一个'生成标准 React 组件'的 Skill

假设我们团队有一个严格的组件开发规范：

1. 组件必须是 Function Component。
2. 必须使用 CSS Modules。
3. 必须包含一个 interface 定义 Props。
4. 文件结构必须是文件夹形式。

我们来写一个 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？

1. 团队规范统一：把这个 .cursor 文件夹提交到 Git 仓库，新入职的同事 git pull 下来，他的 AI 助手立刻学会了全套团队规范，不用手把手教。
2. 减少上下文污染：只在写组件时加载组件规范，写测试时加载测试规范，让 AI 的脑子更清醒。
3. 沉淀最佳实践：把那些你每次都要重复敲的 Prompt，固化成代码资产。

💡 个人心得：不要试图把所有东西都塞进 .cursorrules。把 .cursorrules 当作宪法（不可动摇的原则），把 Agent Skills 当作SOP 手册（针对具体任务的流程）。