1. 什么是 Agent SkillsAgent Skills 是 Cursor 编辑器中的一项革命性功能它让开发者能够将特定领域的工作流程和知识封装成可复用的技能包。想象一下当你需要完成某个重复性任务时不再需要每次都向 AI 助手重复解释相同的规则和要求 - 你只需要提前把这些知识打包成一个 SkillAI 就会在合适的场景自动调用这些知识。从技术实现来看Agent Skills 本质上是一套标准化的 Markdown 文档SKILL.md包含两个核心部分Frontmatter 元数据定义技能名称、描述等基本信息Markdown 正文详细说明该技能的使用场景、操作步骤和示例代码与全局规则.cursorrules相比Agent Skills 有几个显著优势按需加载只在相关场景下激活不会占用宝贵的上下文窗口模块化设计每个技能独立存在可以灵活组合使用团队共享通过版本控制系统轻松实现团队知识同步提示在实际使用中我发现将常用但非全局的规则放在 Skills 中可以显著提升 AI 助手的响应质量和效率。2. 环境准备与基础配置2.1 获取官方 Skills 模板开始使用 Agent Skills 前建议先下载官方提供的示例库git clone https://github.com/anthropics/skills.git这个仓库包含了多个实用的技能模板如frontend-design前端设计规范code-review代码审查指南test-generation测试用例生成2.2 配置 Cursor 环境在项目根目录或用户主目录创建以下结构.cursor/ skills/ your-skill-name/ SKILL.md scripts/ # 可选配套脚本重要配置细节确保使用最新版 Cursor建议开启 Beta 通道在设置中启用 Agent Skills 功能对于团队项目建议将.cursor/skills纳入版本控制3. 设计自定义 Skill 的完整指南3.1 Skill 元数据规范SKILL.md 的 Frontmatter 部分支持以下字段--- name: unique-skill-name # 必须全小写使用连字符 description: 简明描述该技能的用途 priority: 0-100 # 可选影响匹配优先级 disable-model-invocation: false # 是否禁止直接调用模型 tags: [tag1, tag2] # 可选便于分类 ---3.2 指令编写最佳实践指令部分需要特别注意以下几点明确触发条件清晰定义何时应该使用该技能分步说明将复杂流程分解为可执行的步骤提供示例包含完整的代码模板考虑边界情况说明特殊情况的处理方式示例结构# 技能名称 ## 使用场景 描述何时应该触发该技能 ## 操作步骤 1. 第一步... 2. 第二步... ## 代码规范 - 规范1... - 规范2... ## 示例 tsx // 完整示例代码4. 实战React 组件生成器4.1 需求分析假设团队需要统一 React 组件开发规范必须使用 TypeScript必须采用 CSS Modules组件必须定义 Props 接口必须遵循特定的文件结构4.2 实现步骤4.2.1 创建技能目录.cursor/ skills/ react-component/ SKILL.md examples/ Button/ index.tsx styles.module.scss4.2.2 编写 SKILL.md--- name: react-component description: Generate React components following team standards --- # React Component Generator ## 使用场景 当需要创建新的UI组件时使用 ## 文件结构 1. 创建以组件名命名的文件夹PascalCase 2. 包含以下文件 - index.tsx组件主文件 - styles.module.scss样式文件 ## 代码规范 ### TypeScript - 必须使用 FC 类型 - 必须定义 [ComponentName]Props 接口 - 必须使用默认导出 ### 样式 - 根元素使用 .container 类 - 遵循 BEM 命名规范 ## 示例Button 组件 tsx // Button/index.tsx import React, { FC } from react; import styles from ./styles.module.scss; interface ButtonProps { label: string; onClick?: () void; } const Button: FCButtonProps ({ label, onClick }) ( button className{styles.container} onClick{onClick} {label} /button ); export default Button;4.3 使用技巧自动触发当输入创建一个UserCard组件时AI会自动应用该技能手动调用输入/react-component命令调试技巧在命令面板输入debug skill查看技能匹配情况5. 高级应用带脚本的 Skill5.1 自动化重构案例创建颜色替换技能.cursor/ skills/ color-refactor/ SKILL.md scripts/ find-hex.jsSKILL.md 内容--- name: color-refactor description: Replace hex colors with Tailwind classes --- # Color Refactoring ## 前置条件 1. 确保项目已安装 Tailwind CSS 2. 运行 npm install color-convert 安装依赖 ## 操作步骤 1. 执行 scripts/find-hex.js 扫描文件 2. 对每个找到的十六进制颜色 - 匹配最接近的 Tailwind 颜色类 - 替换原始代码 3. 输出变更报告 ## 示例转换 color: #ef4444; → classNametext-red-500find-hex.js 脚本示例// 简化的颜色查找逻辑 const { hex2rgb } require(color-convert); function findClosestTailwindColor(hex) { // 实际实现应包括完整的颜色匹配算法 const [r, g, b] hex2rgb(hex); // 返回最接近的Tailwind类名 return text-red-500; } module.exports { findClosestTailwindColor };5.2 性能优化技巧缓存机制对常用操作结果进行缓存增量处理只扫描修改过的文件并行处理对大型项目使用 worker 线程6. 团队协作实践6.1 技能版本管理建议采用以下工作流在团队仓库中维护team-skills子模块使用语义化版本控制技能更新通过 CI/CD 自动验证技能有效性6.2 技能开发流程提案阶段在团队 wiki 记录新技能需求实现阶段创建技能原型并测试评审阶段团队代码审查技能定义发布阶段合并到主分支并更新版本7. 常见问题排查7.1 技能未被识别检查清单确保文件路径正确.cursor/skills/验证 SKILL.md 格式是否正确检查 Cursor 版本是否支持查看技能元数据是否完整7.2 技能执行不符合预期调试步骤使用debug skill命令查看匹配情况检查技能指令是否足够明确验证示例代码是否可执行确认没有冲突的全局规则7.3 性能优化建议避免在技能中包含过多示例将大型脚本拆分为多个小文件使用disable-model-invocation: true减少模型调用8. 效能提升技巧经过三个月的实践我总结了以下提升技能效能的经验上下文隔离为不同职责创建独立技能如组件生成、测试编写、文档生成渐进式增强从简单技能开始逐步增加复杂度反馈循环定期审查技能使用情况并优化组合使用设计可以协同工作的技能组合一个典型的工作流改进案例通过组合 react-component、test-generator 和 storybook-add 三个技能现在创建一个完整可用的组件只需要一个命令效率提升了70%。对于大型项目建议建立技能索引文档帮助团队成员了解可用技能及其用途。同时定期举办技能分享会收集反馈并持续改进。
1. 什么是 Agent SkillsAgent Skills 是 Cursor 编辑器中的一项革命性功能它让开发者能够将特定领域的工作流程和知识封装成可复用的技能包。想象一下当你需要完成某个重复性任务时不再需要每次都向 AI 助手重复解释相同的规则和要求 - 你只需要提前把这些知识打包成一个 SkillAI 就会在合适的场景自动调用这些知识。从技术实现来看Agent Skills 本质上是一套标准化的 Markdown 文档SKILL.md包含两个核心部分Frontmatter 元数据定义技能名称、描述等基本信息Markdown 正文详细说明该技能的使用场景、操作步骤和示例代码与全局规则.cursorrules相比Agent Skills 有几个显著优势按需加载只在相关场景下激活不会占用宝贵的上下文窗口模块化设计每个技能独立存在可以灵活组合使用团队共享通过版本控制系统轻松实现团队知识同步提示在实际使用中我发现将常用但非全局的规则放在 Skills 中可以显著提升 AI 助手的响应质量和效率。2. 环境准备与基础配置2.1 获取官方 Skills 模板开始使用 Agent Skills 前建议先下载官方提供的示例库git clone https://github.com/anthropics/skills.git这个仓库包含了多个实用的技能模板如frontend-design前端设计规范code-review代码审查指南test-generation测试用例生成2.2 配置 Cursor 环境在项目根目录或用户主目录创建以下结构.cursor/ skills/ your-skill-name/ SKILL.md scripts/ # 可选配套脚本重要配置细节确保使用最新版 Cursor建议开启 Beta 通道在设置中启用 Agent Skills 功能对于团队项目建议将.cursor/skills纳入版本控制3. 设计自定义 Skill 的完整指南3.1 Skill 元数据规范SKILL.md 的 Frontmatter 部分支持以下字段--- name: unique-skill-name # 必须全小写使用连字符 description: 简明描述该技能的用途 priority: 0-100 # 可选影响匹配优先级 disable-model-invocation: false # 是否禁止直接调用模型 tags: [tag1, tag2] # 可选便于分类 ---3.2 指令编写最佳实践指令部分需要特别注意以下几点明确触发条件清晰定义何时应该使用该技能分步说明将复杂流程分解为可执行的步骤提供示例包含完整的代码模板考虑边界情况说明特殊情况的处理方式示例结构# 技能名称 ## 使用场景 描述何时应该触发该技能 ## 操作步骤 1. 第一步... 2. 第二步... ## 代码规范 - 规范1... - 规范2... ## 示例 tsx // 完整示例代码4. 实战React 组件生成器4.1 需求分析假设团队需要统一 React 组件开发规范必须使用 TypeScript必须采用 CSS Modules组件必须定义 Props 接口必须遵循特定的文件结构4.2 实现步骤4.2.1 创建技能目录.cursor/ skills/ react-component/ SKILL.md examples/ Button/ index.tsx styles.module.scss4.2.2 编写 SKILL.md--- name: react-component description: Generate React components following team standards --- # React Component Generator ## 使用场景 当需要创建新的UI组件时使用 ## 文件结构 1. 创建以组件名命名的文件夹PascalCase 2. 包含以下文件 - index.tsx组件主文件 - styles.module.scss样式文件 ## 代码规范 ### TypeScript - 必须使用 FC 类型 - 必须定义 [ComponentName]Props 接口 - 必须使用默认导出 ### 样式 - 根元素使用 .container 类 - 遵循 BEM 命名规范 ## 示例Button 组件 tsx // Button/index.tsx import React, { FC } from react; import styles from ./styles.module.scss; interface ButtonProps { label: string; onClick?: () void; } const Button: FCButtonProps ({ label, onClick }) ( button className{styles.container} onClick{onClick} {label} /button ); export default Button;4.3 使用技巧自动触发当输入创建一个UserCard组件时AI会自动应用该技能手动调用输入/react-component命令调试技巧在命令面板输入debug skill查看技能匹配情况5. 高级应用带脚本的 Skill5.1 自动化重构案例创建颜色替换技能.cursor/ skills/ color-refactor/ SKILL.md scripts/ find-hex.jsSKILL.md 内容--- name: color-refactor description: Replace hex colors with Tailwind classes --- # Color Refactoring ## 前置条件 1. 确保项目已安装 Tailwind CSS 2. 运行 npm install color-convert 安装依赖 ## 操作步骤 1. 执行 scripts/find-hex.js 扫描文件 2. 对每个找到的十六进制颜色 - 匹配最接近的 Tailwind 颜色类 - 替换原始代码 3. 输出变更报告 ## 示例转换 color: #ef4444; → classNametext-red-500find-hex.js 脚本示例// 简化的颜色查找逻辑 const { hex2rgb } require(color-convert); function findClosestTailwindColor(hex) { // 实际实现应包括完整的颜色匹配算法 const [r, g, b] hex2rgb(hex); // 返回最接近的Tailwind类名 return text-red-500; } module.exports { findClosestTailwindColor };5.2 性能优化技巧缓存机制对常用操作结果进行缓存增量处理只扫描修改过的文件并行处理对大型项目使用 worker 线程6. 团队协作实践6.1 技能版本管理建议采用以下工作流在团队仓库中维护team-skills子模块使用语义化版本控制技能更新通过 CI/CD 自动验证技能有效性6.2 技能开发流程提案阶段在团队 wiki 记录新技能需求实现阶段创建技能原型并测试评审阶段团队代码审查技能定义发布阶段合并到主分支并更新版本7. 常见问题排查7.1 技能未被识别检查清单确保文件路径正确.cursor/skills/验证 SKILL.md 格式是否正确检查 Cursor 版本是否支持查看技能元数据是否完整7.2 技能执行不符合预期调试步骤使用debug skill命令查看匹配情况检查技能指令是否足够明确验证示例代码是否可执行确认没有冲突的全局规则7.3 性能优化建议避免在技能中包含过多示例将大型脚本拆分为多个小文件使用disable-model-invocation: true减少模型调用8. 效能提升技巧经过三个月的实践我总结了以下提升技能效能的经验上下文隔离为不同职责创建独立技能如组件生成、测试编写、文档生成渐进式增强从简单技能开始逐步增加复杂度反馈循环定期审查技能使用情况并优化组合使用设计可以协同工作的技能组合一个典型的工作流改进案例通过组合 react-component、test-generator 和 storybook-add 三个技能现在创建一个完整可用的组件只需要一个命令效率提升了70%。对于大型项目建议建立技能索引文档帮助团队成员了解可用技能及其用途。同时定期举办技能分享会收集反馈并持续改进。
