Cursor Agent Skills 是一种封装特定任务知识和工作流的标准化方式，相比全局规则 .cursorrules，它按需加载以节省 Token 并提升专注度。本文介绍了如何在 Cursor 项目中配置官方提供的 skills 文档，并通过编写 SKILL.md 文件自定义技能，例如生成符合团队规范的 React 组件。通过结合脚本自动化，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 更专注。
链接：github:https://github.com/anthropics/skills
在 Cursor 中新建 .cursor 目录加 skills 目录，把从 Github 上下载的 skills 拷贝到该目录下。
这是参考 frontend-design 这个 skills 来设计的网站，会发现精美许多。
通过别人提供好的 skills 文档来生成。
在 Cursor 中输入提示词，Cursor 会自动扫描你文件下的 skill.md 文档进行生成。
假设我们团队有一个严格的组件开发规范：
interface 定义 Props。我们来写一个 Skill 教会 Cursor 怎么做。
在你的项目根目录下（或者全局 ~/.cursor/skills），创建一个存放技能的文件夹：
.cursor/
skills/
react-component-gen/ <-- 技能名称文件夹
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 就不只是在'瞎猜'，而是真正执行了你写的工具脚本来辅助它工作。
.cursor 文件夹提交到 Git 仓库，新入职的同事 git pull 下来，他的 AI 助手立刻学会了全套团队规范，不用手把手教。💡 个人心得：不要试图把所有东西都塞进 .cursorrules。把 .cursorrules 当作宪法（不可动摇的原则），把 Agent Skills 当作SOP 手册（针对具体任务的流程）。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online