JavaScriptAI大前端
在 Cursor 中打造专属前端 AI 助手：Agent Skills 实战指南
介绍 Cursor 编辑器中的 Agent Skills 功能，对比其与 .cursorrules 的差异，详述了从官方文档下载、本地配置到自定义开发的全流程。通过实战案例演示了如何创建生成标准 React 组件的技能，涵盖 SKILL.md 编写规范、目录结构及脚本自动化扩展，旨在帮助团队统一代码规范并提升 AI 辅助开发效率。
介绍 Cursor 编辑器中的 Agent Skills 功能，对比其与 .cursorrules 的差异，详述了从官方文档下载、本地配置到自定义开发的全流程。通过实战案例演示了如何创建生成标准 React 组件的技能，涵盖 SKILL.md 编写规范、目录结构及脚本自动化扩展，旨在帮助团队统一代码规范并提升 AI 辅助开发效率。
简单来说，Agent Skills 是一种标准化的方式，用来封装特定任务的知识和工作流。 如果说 MCP (Model Context Protocol) 是给 AI 装上了'手'（让它能连接数据库、Github），那么 Skills 就是给 AI 的'操作说明书'（告诉它怎么用这双手去搬砖）。 它和 .cursorrules 的区别在于：.cursorrules (全局规则): 就像公司的'员工手册'，是 AI 必须时刻记住的（Always on），适合放通用的代码风格（比如'永远使用 TypeScript'）。Agent Skills (技能): 就像'特定的任务 SOP'，AI 只有在需要的时候（Context Relevant）才会去加载它，或者通过 / 命令手动触发。这大大节省了 Token，也让 AI 更专注。
链接：https://github.com/anthropics/skills
在 cursor 中新建.cursor 目录加 skills 目录，把从 Github 上下载的 skills 拷贝到该目录下。
这是参考 frontend-design 这个 skills 来设计的网站，会发现精美许多。
通过别人提供好的 skils 文档来生成。
在 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;
Rules 或 Features，确保 Agent Skills 相关的开关已打开。react-component-gen 技能，并严格按照你的模板生成代码！/，你应该能看到 react-component-gen 出现在命令列表中。前端经常需要做一些批量重构，比如'找出所有硬编码的颜色并替换为 Tailwind 类名'。我们可以给 Skill 配上脚本。
.cursor/skills/refactor-color/
SKILL.md
scripts/
find-hex.js <-- 一个扫描文件的脚本
SKILL.md:
---
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
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online