cursor rules 规则

可约束代码风格
能限定技术选型
提前指定核心参数

规则方案

维度	项目规则(Project Rules)	用户规则(User Rules)
作用范围	仅对当前项目生效,团队成员共享相同规则	对所有项目有效,个人专属配置
存储位置	项目根目录下的`.cursor/rules/随意.mdc`文件	用户配置目录`~/.cursor/rules`
同步方式	随项目代码提交到版本库,团队共享	仅本地生效,不随项目同步
适用场景	统一团队编码规范	个人习惯,如快捷键,AI 响应风格

注意

项目规则和用户规则同时存在并且规则冲突时,项目规则优先级更高

项目规则

.cursor/rules/随意命名.mdc文件,可以添加多个

选择Rule Type一直生效always

---
description: "团队前端项目规范"
priority: 10000
---

# 代码风格
1. 函数必须包含 JSdoc 注释
2. 禁止使用 `var`,统一使用`const/let`
3. 函数命名必须添加`xxx_前缀`

## 依赖管理
- 优先使用项目内已有的工具函数(如`utils/request`)
- 禁止引入低版本的 `lodash(<4.0.0)`

用户规则

属于全局规则

打开cursor settings>Rules>User Rules

规则例如: 所有回答使用中文,每行代码都需要添加在洪文的注释

mdc 语法

一种markdown在cursor的一种语法格式,专门编写项目规则的轻量级格式.

前置元数据
1. 使用---包裹的YAML格式配置
2. 定义规则的属性,如作用范围,优先级
规则内容 markdown正文
1. 用markdown语法写具体规则

常见的元数据

字段	作用	示例
description	描述规则用途,指导 AI 如何应用规则	"前端组件编码规范"
globs	指定规则生效的文件范围支持 glob 语法	`"src/*/.{js,ts,tsx,jsx}"`
priority	规则优先级(数值越大越优先),解决规则冲突	1000
version	规则版本号(可选)	"1.0.0"

安全约束规则

# 安全规范

1. 禁止使用 eval() 函数
2. SQL 查询必须使用参数化查询,防止注入攻击
3. 敏感信息(如 API 秘钥)必须从环境变量读取

特殊语法: 引用项目文件

用@file引用项目内的配置文件,让 AI 参考:

# 工具链配置

1. ESLint 规则必须符合 @file .eslintrc.js
2. 测试用例必须遵循 Jest 框架规范

完整的 typescript 项目规则示例

---
description: "Typescript 项目编码规范"
globs: "src/**/*.ts"
priority: 1000
---

# 一: 基本规范

1. 所有文件必须使用 UTF-8 编码
2. 统一使用 2 空格缩进

# 二: 类型约束

1. 禁止使用隐式 any 类型
   - 示例: `const num: number = 123` (显式)
   - 禁止: `const num = 123` (隐式)
2. 接口命名必须以`I`开头,如`interface IUser`

# 三: 项目约束

- 所有 HTTP 请求必须通过 @file src/utils/request.ts 封装的工具
- 状态管理必须使用 Redux Toolkit 或者 Pinia,禁止直接修改 state

Cursor 智能插件开发实战

Cursor 设计 chrome 浏览器插件

需求设计

创建: 01_chrome插件需求和要求说明

实现一款 Chrome 的插件,要包含下面三个功能:

1. 解释选中的段落或关键词
2. 翻译选择的段落或关键词(支持中文或英文或日语翻译即可)
3. 朗读选择的段落或关键词(支持中文或英文或日语朗读)
4. 润色和替换选中的文本方案

细节要求:

1. 当选中的段落或者关键词时,出现插件,直接悬浮在选中的关键词和段落上!(显示顺序: 解释,翻译,朗读,润色)
2. 解释,翻译,润色的结果直接在悬浮下方出现结果即可
3. 翻译添加语言选择 (翻译目标: 中文还是英文还是日语)
4. 润色结果可以进行修改,同时提供一键替换的功能,能替换目标文案内容(可编辑的情况下可以直接替换!)
5. 翻译,解释,润色功能使用 kimi 的 api 实现即可,具体参考配置 kimi api 文档(https://platform.moonshot.cn/docs)
6. 朗读直接调用 chrome 浏览器内置插件即可(提供中文和英文朗读)
7. 并且帮我们写好 README 文档,写清在 chrome 部署插件的过程

设计和生成项目 ui 图文本

chat agent模式对话

@01_chrome插件需求和要求说明 根据插件需求文档,帮我写一份项目 UI 文本设计图,将设计图写到 02_chrome插件UI设计图 文件中! 要求页面简洁,清晰!

以下是生成的内容

# Chrome插件UI设计图

## 1. 整体设计理念
- **简洁性**: 悬浮窗口采用卡片式设计，白色背景，圆角边框
- **直观性**: 功能按钮图标化，操作流程清晰
- **响应性**: 根据选中文本长度自适应窗口大小
- **一致性**: 统一的设计语言和交互模式

## 2. 悬浮窗口布局设计

### 2.1 主悬浮窗口结构
```
┌─────────────────────────────────────┐
│  Chrome智能助手                     │
├─────────────────────────────────────┤
│  📖 解释    🌐 翻译    🔊 朗读    ✏️ 润色  │
├─────────────────────────────────────┤
│                                     │
│  [功能结果展示区域]                   │
│                                     │
└─────────────────────────────────────┘
```

### 2.2 详细布局规格
- **窗口尺寸**:
  - 最小宽度: 300px
  - 最大宽度: 500px
  - 高度: 自适应内容
- **边距**: 内边距 16px
- **圆角**: 8px
- **阴影**: 0 4px 12px rgba(0,0,0,0.15)
- **背景**: #FFFFFF
- **边框**: 1px solid #E5E7EB

## 3. 功能按钮设计

### 3.1 按钮规格
- **尺寸**: 32px × 32px
- **间距**: 按钮间距 8px
- **图标**: 24px × 24px
- **悬停效果**: 背景色变为 #F3F4F6

### 3.2 按钮图标和颜色
- **解释按钮**: 📖 图标，主色 #3B82F6
- **翻译按钮**: 🌐 图标，主色 #10B981
- **朗读按钮**: 🔊 图标，主色 #F59E0B
- **润色按钮**: ✏️ 图标，主色 #8B5CF6

## 4. 功能结果展示区域

### 4.1 解释功能结果
```
┌─────────────────────────────────────┐
│ 📖 解释结果                          │
├─────────────────────────────────────┤
│ [解释内容显示区域]                    │
│ 支持多行文本显示，自动换行            │
└─────────────────────────────────────┘
```

### 4.2 翻译功能结果
```
┌─────────────────────────────────────┐
│ 🌐 翻译结果                          │
├─────────────────────────────────────┤
│ 目标语言: [中文 ▼]                   │
├─────────────────────────────────────┤
│ [翻译内容显示区域]                    │
└─────────────────────────────────────┘
```

### 4.3 朗读功能结果
```
┌─────────────────────────────────────┐
│ 🔊 朗读控制                          │
├─────────────────────────────────────┤
│ 语言: [中文 ▼]  [▶️ 播放] [⏸️ 暂停]   │
└─────────────────────────────────────┘
```

### 4.4 润色功能结果
```
┌─────────────────────────────────────┐
│ ✏️ 润色结果                          │
├─────────────────────────────────────┤
│ [润色后的文本，可编辑]                │
├─────────────────────────────────────┤
│ [🔄 重新润色]  [✅ 替换原文]          │
└─────────────────────────────────────┘
```

## 5. 交互流程设计

### 5.1 文本选择触发流程
1. 用户选中网页文本
2. 悬浮窗口在选中文本附近出现
3. 显示四个功能按钮
4. 用户点击对应功能按钮

### 5.2 功能执行流程
1. **解释功能**:
   - 点击解释按钮
   - 显示加载动画
   - 调用Kimi API获取解释
   - 在结果区域显示解释内容

2. **翻译功能**:
   - 点击翻译按钮
   - 显示语言选择下拉框
   - 用户选择目标语言
   - 调用Kimi API获取翻译
   - 显示翻译结果

3. **朗读功能**:
   - 点击朗读按钮
   - 显示语言选择
   - 调用Chrome TTS API
   - 显示播放控制按钮

4. **润色功能**:
   - 点击润色按钮
   - 调用Kimi API获取润色结果
   - 在可编辑区域显示润色文本
   - 提供重新润色和替换功能

## 6. 响应式设计

### 6.1 窗口位置自适应
- 优先显示在选中文本下方
- 如果下方空间不足，显示在上方
- 如果左右空间不足，调整窗口宽度

### 6.2 内容自适应
- 文本内容自动换行
- 长文本支持滚动
- 按钮在小屏幕上垂直排列

## 7. 视觉设计规范

### 7.1 颜色方案
- **主色调**: #3B82F6 (蓝色)
- **成功色**: #10B981 (绿色)
- **警告色**: #F59E0B (橙色)
- **错误色**: #EF4444 (红色)
- **中性色**: #6B7280 (灰色)

### 7.2 字体规范
- **主字体**: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto
- **标题**: 14px, 600 weight
- **正文**: 13px, 400 weight
- **按钮**: 12px, 500 weight

### 7.3 动画效果
- **出现动画**: 淡入 + 向上滑动 (300ms)
- **消失动画**: 淡出 + 向下滑动 (200ms)
- **按钮悬停**: 背景色渐变 (150ms)
- **加载动画**: 旋转图标

## 8. 特殊状态设计

### 8.1 加载状态
```
┌─────────────────────────────────────┐
│ 📖 解释结果                          │
├─────────────────────────────────────┤
│ ⏳ 正在分析中...                      │
└─────────────────────────────────────┘
```

### 8.2 错误状态
```
┌─────────────────────────────────────┐
│ 📖 解释结果                          │
├─────────────────────────────────────┤
│ ❌ 请求失败，请重试                   │
│ [🔄 重试]                           │
└─────────────────────────────────────┘
```

### 8.3 空状态
```
┌─────────────────────────────────────┐
│ 📖 解释结果                          │
├─────────────────────────────────────┤
│ 📝 暂无解释内容                      │
└─────────────────────────────────────┘
```

## 9. 辅助功能设计

### 9.1 键盘快捷键
- **ESC**: 关闭悬浮窗口
- **Enter**: 确认操作
- **Tab**: 在按钮间切换焦点

### 9.2 无障碍设计
- 所有按钮提供aria-label
- 支持屏幕阅读器
- 高对比度模式支持
- 键盘导航支持

## 10. 性能优化考虑

### 10.1 渲染优化
- 使用CSS transform进行动画
- 避免重排重绘
- 合理使用防抖节流

### 10.2 内存管理
- 及时清理事件监听器
- 避免内存泄漏
- 合理管理API请求

这个UI设计图确保了插件的简洁性、易用性和美观性，同时考虑了各种使用场景和用户体验。

在cursor里添加上kimi的文档地址

Chrome 插件实现

准备kimi api的令牌:

实现插件功能

@01_chrome插件需求和要求说明.md @02_chrome插件UI设计图.md 基于需求和 UI 设计图,直接在当前 chrome_plugin 文件夹下实现插件功能,同时提取单独配置文件用于填写 kimi api url和key 的位置!代码中添加中文注释,实现后再次检查,确保插件正常运行和实现功能!

配置kimi的 api key

下面还是要经过漫长的开发,提问,纠错等过程.

常用的规范

### 核心开发原则

**1. 深度思考优先原则**

- 每次接到开发任务时，必须先进行全面的业务分析和技术方案设计
- 列出详细的开发计划，包括：
  - 业务需求理解和分析
  - 技术方案设计和架构考虑
  - 可能的风险点和解决方案
  - 详细的实施步骤和时间规划
- **等待用户确认开发计划后才能开始编码**

**2. 标准开发流程**

```
思考分析 → 方案设计 → 获得确认 → 分支管理 → 编码实现 → 测试验证 → 分支合并
```

**3. Windows 本地开发环境**

- 所有命令基于 Windows 10/11 环境
- 优先使用 PowerShell 或 Command Prompt
- 文件路径使用反斜杠（Windows 格式）
- 考虑 Windows 环境特有的配置和限制

**4. Git 分支管理策略**

```powershell
# 开始新功能开发前
git checkout main                    # 切换到主分支
git pull origin main                # 拉取最新代码
git checkout -b feature/功能描述      # 创建并切换到新功能分支

# 开发完成后
git add .                           # 添加所有更改
git commit -m "feat: 功能描述"       # 提交更改
git checkout main                   # 切换回主分支
git merge feature/功能描述           # 合并功能分支
git branch -d feature/功能描述       # 删除功能分支
git push origin main                # 推送到远程仓库
```

**5. 开发质量保证**

- 编码期间遵循项目现有的代码规范和架构模式
- 完成开发后必须进行测试验证（单元测试、功能测试、集成测试）
- 所有测试通过后才能进行分支合并
- 代码提交信息使用中文，格式清晰

### 任务执行检查清单

每次开发任务必须按以下步骤执行：

- [ ] **需求分析**: 深度理解用户需求，识别业务场景和技术要求
- [ ] **方案设计**: 设计技术实现方案，考虑架构影响和最佳实践
- [ ] **风险评估**: 识别潜在问题和风险点，制定应对策略
- [ ] **计划确认**: 向用户展示完整开发计划，等待确认批准
- [ ] **分支创建**: 创建新的功能分支进行开发
- [ ] **代码实现**: 按照设计方案进行编码，遵循项目规范
- [ ] **测试验证**: 进行全面测试，确保功能正确性和稳定性
- [ ] **代码审查**: 检查代码质量，确保符合项目标准
- [ ] **分支合并**: 测试通过后合并到主分支
- [ ] **部署验证**: 如需要，验证部署环境的功能正确性

### 沟通协作规范

- **提问澄清**: 对不明确的需求主动提问澄清
- **进度汇报**: 开发过程中及时汇报进度和遇到的问题
- **问题预警**: 发现风险或技术难点时及时告知
- **中文交流**: 所有交流、注释、文档都使用中文

新增的一个 MCP：spec-workflow

{
  "mcpServers": {
    "spec-workflow": {
      "command": "npx",
      "args": [
        "-y",
        "@pimzino/spec-workflow-mcp@latest",
        "/path/to/your/project"
      ]
    }
  }
}

/path/to/your/project：你的项目的地址【绝对路径】

cursor rules规则