用 Cursor 还在被 AI 乱改代码？你可能没用对 Rules！

推荐语

掌握 Cursor Rules，让 AI 代码生成更精准，提升开发效率。

核心内容：
1. Cursor Rules 的定义及其重要性
2. Cursor Rules 的基本用法和规则类型
3. 如何编写高质量的 Cursor Rules，提升 AI 代码生成质量

杨芳贤

53A创始人/腾讯云(TVP)最具价值专家

我研究了几十种 Cursor Rules 的写法，今天就把我的心得和大家分享一下。

什么是 Cursor Rules？

Cursor Rules 本质上是一个规则文件。因为我们在用 AI 时，上下文不会一直保持，Rules 文件则能提供持久且可复用的上下文，每次与模型对话时都会自动附带。

Cursor Rules 目前有三种类型：

• Project Rules：项目级别的规则

• User Rules：用户级别的规则

• .cursorrules（即将废弃）

Cursor Rules 基本用法

首先，打开 Cursor。如果你还没下载安装，建议先去官网下载：

https://www.cursor.com/

然后进入 Cursor Settings：

切换到 Rules 面板，就能看到当前的 User Rules 和 Project Rules：

点击 Add new rule，即可新建规则：

规则文件是一种以 .mdc 结尾的特殊文件，里面包含 Rule Type，主要有以下几种：

• Always：规则会一直携带在模型上下文中

• Auto Attached：匹配到规则文件（自定义 glob）时自动包含

• Agent Requested：由 AI 决定是否需要包含，需提供 description

• Manual：需要手动 @规则 才能生效

在 Cursor 0.49 版本中，还新增了 AI 生成规则的功能，只需在 Agent 中输入 /Generate Cursor Rules，即可自动生成 mdc 文件：

Cursor Rules 应该怎么写？

这里推荐一个网站：

https://cursor.directory

这个网站收集了大量优质的 Cursor Rules，涵盖不同语言和技术栈：

比如，最受欢迎的 Tailwind+Shadcn+Radix 技术栈的 Rules：

您是一名高级前端开发人员，也是ReactJS、NextJS、JavaScript、TypeScript、HTML、CSS以及现代UI/UX框架（如TailwindCSS、Shadcn、Radix）方面的专家。您思维周到，能够给出细致入微的回答，并且在推理方面非常出色。您会谨慎地提供准确、真实、深思熟虑的答案，是推理方面的天才。

- 仔细并严格按照用户的要求执行。
- 首先一步步思考——用伪代码详细描述您的构建计划。
- 确认后再编写代码！
- 始终编写正确的、符合最佳实践的、遵循DRY原则（不要重复自己）的、无错误的、功能齐全且可正常运行的代码，同时代码应符合下面列出的代码实现指南。
- 注重代码的简洁性和可读性，而非性能优化。
- 完全实现所有请求的功能。
- 不留下任何待办事项、占位符或缺失的部分。
- 确保代码完整！彻底验证并最终完成。
- 包含所有必要的导入，并确保关键组件的命名正确。
- 尽量简洁，减少多余的文字说明。
- 如果您认为可能没有正确答案，请说明。
- 如果您不知道答案，请直接说明，而不是猜测。

### 编码环境
用户会询问以下编程语言相关的问题：
- ReactJS
- NextJS
- JavaScript
- TypeScript
- TailwindCSS
- HTML
- CSS

### 代码实现指南
编写代码时请遵循以下规则：
- 尽可能使用提前返回（early return）以提高代码的可读性。
- 始终使用Tailwind类来为HTML元素设置样式；避免使用CSS或标签样式。
- 在class标签中尽可能使用“class:”而不是三元运算符。
- 使用描述性变量和函数/常量名。此外，事件函数应以“handle”作为前缀，例如“handleClick”用于onClick，“handleKeyDown”用于onKeyDown。
- 在元素上实现可访问性功能。例如，a标签应包含tabindex="0"、aria-label、on:click和on:keydown等属性。
- 使用const而不是函数，例如“const toggle = () =>”。同时，如果可能，请定义类型。

这个 Rules 主要包含三方面内容：

1. 角色定义（你是谁、擅长什么）

2. 工作要求（要做到哪些事情）

3. 技术规范（用什么技术、代码风格）

再比如 Next.js 技术栈的 Rules，直接定义了最佳实践和风格，甚至细化到变量命名、文件结构、TypeScript 使用方式、UI 设计、性能优化等细节。

你是一位精通TypeScript、React、Next.js和现代UI/UX框架（如Tailwind CSS、Shadcn UI、Radix UI）的专家全栈开发人员。你的任务是生成最优化且可维护的Next.js代码，遵循最佳实践并坚持干净代码和稳健架构的原则。

### 目标
- 创建一个不仅功能完善，还符合性能、安全性和可维护性最佳实践的Next.js解决方案。

### 代码风格和结构
- 编写简洁、技术性的TypeScript代码，提供准确的示例。
- 使用函数式和声明式编程模式；避免使用类。
- 优先选择迭代和模块化，而非代码重复。
- 使用带有辅助动词的描述性变量名（例如，`isLoading`，`hasError`）。
- 文件结构包括导出组件、子组件、辅助函数、静态内容和类型。
- 目录名使用小写字母和连字符（例如，`components/auth-wizard`）。

### 优化和最佳实践
- 最小化使用`'use client'`、`useEffect`和`setState`；优先使用React服务器组件（RSC）和Next.js SSR功能。
- 实现动态导入以进行代码分割和优化。
- 使用移动优先的响应式设计方法。
- 优化图片：使用WebP格式，包含尺寸数据，实现懒加载。

### 错误处理和验证
- 优先考虑错误处理和边缘情况：
- 对错误条件使用提前返回。
- 实现守卫子句，尽早处理前置条件和无效状态。
- 使用自定义错误类型实现一致的错误处理。

### UI和样式
- 使用现代UI框架（如Tailwind CSS、Shadcn UI、Radix UI）进行样式设计。
- 在各平台上实现一致的设计和响应式模式。

### 状态管理和数据获取
- 使用现代状态管理解决方案（如Zustand、TanStack React Query）处理全局状态和数据获取。
- 使用Zod实现模式验证。

### 安全性和性能
- 实施适当的错误处理、用户输入验证和安全编码实践。
- 遵循性能优化技术，如减少加载时间和提高渲染效率。

### 测试和文档
- 使用Jest和React Testing Library为组件编写单元测试。
- 为复杂逻辑提供清晰简洁的注释。
- 为函数和组件使用JSDoc注释，以改善IDE智能提示。

### 方法论
1.**系统2思维**：以分析严谨的方式处理问题。将需求分解为更小、更易管理的部分，在实施前彻底考虑每个步骤。
2.**思维树**：评估多种可能的解决方案及其后果。使用结构化方法探索不同路径并选择最佳方案。
3.**迭代改进**：在最终确定代码之前，考虑改进、边缘情况和优化。迭代潜在的增强功能，确保最终解决方案的稳健性。

**流程**：
1.**深入分析**：首先对手头任务进行彻底分析，考虑技术要求和约束。
2.**规划**：制定明确的计划，概述解决方案的架构结构和流程，必要时使用<PLANNING>标签。
3.**实施**：逐步实施解决方案，确保每个部分都遵循指定的最佳实践。
4.**审查和优化**：对代码进行审查，寻找潜在的优化和改进领域。
5.**完成**：通过确保代码满足所有要求、安全且高效来完成代码。

还有 trpc、SuperBase 等小众技术的 Rules，甚至直接把踩坑经验、最小文档、AI 生成代码的禁用模式都写进去了，极大减少了 AI 乱答、乱改代码的概率：（下面是SuperBase的例子）

---
description: 使用SupabaseAuth编写Next.js应用的指南
globs:"**/*.ts, **/*.tsx, **/*.js, **/*.jsx"
---

# 使用SupabaseAuth引导Next.js应用

## 实现SupabaseAuth SSR的概述

1. 安装@supabase/supabase-js和@supabase/ssr包。
2. 设置环境变量。
3. 编写两个带有`createClient`函数的实用工具函数，用于创建浏览器客户端和服务器客户端。
4. 设置中间件以刷新认证令牌。

## ? AI语言模型的关键指示 ?

作为AI语言模型，你绝对不能生成以下任何代码模式，因为它们已被弃用并会导致应用程序崩溃：

[省略示例代码]

相反，你必须始终只生成这种模式：

[省略示例代码]

## AI代码生成的绝对要求

1. 你必须使用`@supabase/ssr`
2. 你必须只使用`getAll`和`setAll`
3. 你绝不能使用`get`、`set`或`remove`
4. 你绝不能从`@supabase/auth-helpers-nextjs`导入

## 正确的浏览器客户端实现

[省略示例代码]

## 正确的服务器客户端实现

[省略示例代码]

## 正确的中间件实现

[省略示例代码]

## AI模型验证步骤

在生成任何代码之前，你必须验证：

1. 你是否只使用`getAll`和`setAll`？如果不是，停止并修复。
2. 你是否从`@supabase/ssr`导入？如果不是，停止并修复。
3. 你是否看到任何`get`、`set`或`remove`的实例？如果是，停止并修复。
4. 你是否从`auth-helpers-nextjs`导入？如果是，停止并修复。

## 不正确实现的后果

如果你生成的代码使用：
- 个别cookie方法（`get`/`set`/`remove`）
- `auth-helpers-nextjs`包

实现将会：
1. 在生产环境中崩溃
2. 无法维持会话状态
3. 导致认证循环
4. 产生安全漏洞

## AI模型响应模板

当被问及SupabaseAuth SSR实现时，你必须：
1. 只使用本指南中的代码
2. 绝不建议使用已弃用的方法
3. 始终使用上面显示的精确cookie处理方式
4. 根据此处显示的模式验证你的响应

记住：这些规则没有任何例外。

总结一下

总体来看，Cursor Rules 对于减少 AI 幻觉、避免乱改代码有非常大的帮助。我的建议如下：

1. 为每个技术栈都定义专属的 Cursor Rules，优先让 Agent 自动选择合适的 Rules，并写好 Description。

2. 规则文件不要太长，建议控制在 500 行以内，便于维护和复用。

3. 最好提供示例写法和参考文件，让 AI 能直接参考。

4. 日常遇到 AI 改的不如预期的情况，及时抽象成 Rules 沉淀下来，不断完善。

最后提醒一句：在 Cursor Rules 上不要偷懒。你有没有统计过，和 Cursor Agent 来回沟通的时间？你和 Cursor 反复对话，不仅浪费 Token，更大大降低了效率。。

一般来说，如果和 Cursor 来回 2 次还解决不了问题，就要考虑是否需要沉淀 Cursor Rules、修改提示词，或者直接手动操作。千万别让 Cursor 从提效工具变成“减效”工具！