一、什么是 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
通过别人提供好的 skils 文档来生成。 在 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;
