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

一、什么是 Agent Skills？

简单来说，Agent Skills 是一种标准化的方式，用来封装特定任务的知识和工作流。如果把 MCP (Model Context Protocol) 比作给 AI 装上了'手'，让它能连接数据库或 Github，那么 Skills 就是给 AI 的'操作说明书'，告诉它怎么用这双手去干活。

它与 .cursorrules 的区别很明显：.cursorrules 是全局规则，像公司的'员工手册'，AI 必须时刻记住（Always on），适合放通用的代码风格；而 Agent Skills 是特定的任务 SOP，AI 只有在需要的时候（Context Relevant）才会加载，或者通过 / 命令手动触发。这样既节省了 Token，也让 AI 更专注。

二、如何安装与使用

官方提供了一些基础技能文档，你可以从 GitHub 获取。

在 Cursor 项目中新建 .cursor 目录并添加 skills 子目录，将下载的 skills 拷贝到该目录下即可生效。参考官方的 frontend-design 等技能配置后，你会发现生成的界面效果会精美许多。

三、设计自己的 Skills

你可以基于现有的 skill 文档进行修改，或者完全从零开始。在 Cursor 中输入提示词时，它会自动扫描你文件下的 SKILL.md 文档进行生成。

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

假设团队有严格的组件规范：Function Component、CSS Modules、Props Interface、文件夹结构。我们来写一个 Skill 教会 Cursor 怎么做。

1. 创建目录

在项目根目录或全局 ~/.cursor/skills 下，创建一个技能文件夹：

.cursor/
  skills/
    react-component-gen/
      SKILL.md

2. 编写 SKILL.md

这是核心部分，包含元数据（Frontmatter）和指令正文。

在 .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
               


       

            
        

    
          
            
         
          
    
          
              


       

 
  {  }  
   

   {
   
     
}

        {
   
     {} {}    
  
}