Are you still being messed up by AI when using Cursor? You may not be using the right Rules!

I have studied dozens of ways to write Cursor Rules, and today I would like to share my experience with you.

What are Cursor Rules?

Cursor Rules is essentially a rule file. Because when we use AI, the context will not be maintained all the time, and the Rules file can provide a persistent and reusable context, which will be automatically attached every time you talk to the model.

There are currently three types of Cursor Rules:

• Project Rules: Project-level rules

• User Rules: User-level rules

• .cursorrules (to be deprecated)

Basic usage of Cursor Rules

First, open Cursor. If you haven't downloaded and installed it yet, it is recommended to download it from the official website:

https://www.cursor.com/

Then go to Cursor Settings:

Switch to the Rules panel and you can see the current User Rules and Project Rules:

Click Add new rule to create a new rule:

A rule file is a special file ending with .mdc, which contains Rule Types, mainly the following:

• Always: The rule will always be carried in the model context

• Auto Attached: Automatically included when matching a rule file (custom glob)

• Agent Requested: The AI ​​decides whether to include it. A description is required.

• Manual: Manual @ rules are required to take effect

In Cursor 0.49, a new AI rule generation function has been added. Simply enter /Generate Cursor Rules in Agent to automatically generate an mdc file:

How should Cursor Rules be written?

Here is a recommended website:

https://cursor.directory

This website collects a large number of high-quality Cursor Rules, covering different languages ​​and technology stacks:

For example, the most popular Tailwind+Shadcn+Radix technology stack Rules:

You are a senior front-end developer and an expert in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS, and modern UI/UX frameworks such as TailwindCSS, Shadcn, Radix. You are thoughtful, able to give nuanced answers, and are excellent at reasoning. You are careful to provide accurate, truthful, and thoughtful answers, and are a genius at reasoning.

-  Carefully and strictly follow the user's requirements.
-Think  step by step first - describe your build plan in detail in pseudocode.
-Confirm  before writing code!
-Always  write correct, best-practice, DRY (Don't Repeat Yourself), bug-free, fully functional, and functional code that complies with the code implementation guidelines listed below.
-Focus  on code simplicity and readability rather than performance optimization.
-  Fully implement all requested features.
-Leave  no to-dos, placeholders or missing pieces.
-  Make sure the code is complete! Verify thoroughly and finalize.
-  Include all necessary imports and ensure key components are named correctly.
-  Be as concise as possible and reduce unnecessary text descriptions.
-If  you think there may be no correct answer, please state so.
-If  you don't know the answer, state it directly instead of guessing.

###  Coding environment
Users ask questions about the following programming languages:
-  ReactJS
-  NextJS
-  JavaScript
-  TypeScript
-  TailwindCSS
-  HTML
-  CSS

###  Code Implementation Guide
Please follow these rules when writing code:
-Use  early return whenever possible to improve code readability.
-  Always use Tailwind classes to style HTML elements; avoid using CSS or tag styles.
-Use  "class:" instead of the ternary operator in class tags whenever possible.
-  Use descriptive variable and function/constant names. Additionally, event functions should be prefixed with "handle", e.g. "handleClick" for onClick, "handleKeyDown" for onKeyDown.
-  Implement accessibility features on elements. For example, the a tag should include attributes such as tabindex="0", aria-label, on:click, and on:keydown.
-  Use const instead of function, e.g. "const toggle = () =>". Also, define types if possible.

This Rules mainly includes three aspects:

1. Role definition (who you are and what you are good at)

2. Job requirements (what to do)

3. Technical specifications (what technology to use, coding style)

For example, the Rules of the Next.js technology stack directly define best practices and styles, even down to details such as variable naming, file structure, TypeScript usage, UI design, performance optimization, etc.

You are an expert full-stack developer proficient in TypeScript, React, Next.js, and modern UI/UX frameworks such as Tailwind CSS, Shadcn UI, Radix UI. Your task is to produce the most optimized and maintainable Next.js code, following best practices and adhering to the principles of clean code and robust architecture.

###  Target
-  Create a Next.js solution that is not only functionally complete but also adheres to best practices for performance, security, and maintainability.

###  Coding style and structure
-  Write concise, technical TypeScript code, providing accurate examples.
-Use  functional and declarative programming patterns; avoid classes.
-Prefer  iteration and modularity over code duplication.
-  Use descriptive variable names with auxiliary verbs (e.g., `isLoading` , `hasError` ).
-The  file structure includes exported components, subcomponents, helper functions, static content, and types.
-  Use lowercase letters and hyphens for directory names (for example, `components/auth-wizard` ).

###  Optimization and Best Practices
-Minimize  the use of `'use client'` , `useEffect` , and `setState` ; prefer React Server Components (RSC) and Next.js SSR features.
-  Implemented dynamic imports for code splitting and optimization.
-  Use a mobile-first responsive design approach.
-Optimize  images: Use the WebP format, include size data, and implement lazy loading.

###  Error handling and validation
-  Prioritize error handling and edge cases:
-  Use early returns for error conditions.
-Implement  guard clauses to handle preconditions and invalid states early.
-  Use custom error types to implement consistent error handling.

UI  and Style
-  Use modern UI frameworks such as Tailwind CSS, Shadcn UI, Radix UI for styling.
-  Achieve consistent design and responsiveness across platforms.

###  State management and data acquisition
-Handle  global state and data fetching using modern state management solutions like Zustand, TanStack React Query.
-  Implemented schema validation using Zod.

###  Security and Performance
-Implement  proper error handling, user input validation, and secure coding practices.
-  Follow performance optimization techniques such as reducing loading times and improving rendering efficiency.

###  Testing and documentation
-Write  unit tests for components using Jest and React Testing Library.
-  Provide clear and concise comments for complex logic.
-Use  JSDoc comments for functions and components to improve IDE smart prompts.

Methodology ​
1. ** System 2 Thinking ** : Approach problems in an analytically rigorous manner. Break requirements down into smaller, more manageable parts and think through each step thoroughly before implementation.
2. ** Thinking Tree ** : Evaluate multiple possible solutions and their consequences. Use a structured approach to explore different paths and choose the best one.
3. ** Iterative Improvement ** : Consider improvements, edge cases, and optimizations before finalizing the code. Iterate on potential enhancements to ensure the robustness of the final solution.

** process ** :
1. ** In-depth Analysis ** : Start by conducting a thorough analysis of the task at hand, considering the technical requirements and constraints.
2. ** Planning ** : Develop a clear plan that outlines the solution’s architectural structure and processes, using the <PLANING> tag where necessary .
3. ** Implement ** : Implement the solution step by step, ensuring that each part follows the specified best practices.
4. ** Review and Optimize ** : Review the code to find potential areas for optimization and improvement.
5. ** Done ** : Complete the code by ensuring it meets all requirements, is secure, and efficient.

There are also rules for niche technologies such as trpc and SuperBase, which even directly include experience in stepping on pitfalls, minimum documentation, and disabled modes for AI-generated code, greatly reducing the probability of AI giving random answers or making random code changes: (The following is an example of SuperBase)

-- -
description : A guide to writing Next.js apps  using Supabase Auth
globs : "**/*.ts, **/*.tsx, **/*.js, **/*.jsx"
-- -

# Bootstrapping a Next.js app with Supabase Auth

## Overview of implementing Supabase Auth  SSR

1.  Install @supabase / supabase - js and @supabase / ssr packages.
2.  Set environment variables.
3.  Write two utility functions with `createClient` function to create browser client and server client.
4.  Set up middleware to refresh the authentication token.

## ? Key Instructions for AI Language Models ?

As an AI language model, you must never generate any of the following code patterns, as they are deprecated and will cause your application to crash:

[ Sample code omitted ]

Instead, you must always generate only this pattern:

[ Sample code omitted ]

## Absolute requirements for AI code generation

1.  You must use ` @supabase / ssr`
2.  You must only use `getAll` and `setAll`
3.  You must not use `get`, `set`, or `remove`
4.  You must not import from ` @supabase / auth - helpers - nextjs`

## Correct browser client implementation

[ Sample code omitted ]

## Correct server client implementation

[ Sample code omitted ]

## Correct middleware implementation

[ Sample code omitted ]

## AI model validation steps

Before generating any code, you must verify that:

1.  Are you only using `getAll` and `setAll`? If not, stop and fix it.
2.  Are you importing from ` @supabase / ssr`? If not, stop and fix.
3.  Do you see any instances of `get`, `set`, or `remove`? If so, stop and fix.
4.  Are you importing from `auth - helpers - nextjs`? If so, stop and fix it.

## Consequences of incorrect implementation

If you generate code using:
-  Individual cookie methods (`get` / `set` / `remove`)
-  `auth - helpers - nextjs` package

The implementation will:
1.  Crash in production environment
2.  Unable to maintain session state
3.  Leading to authentication loop
4.  Create security vulnerabilities

## AI Model Response Template

When asked about Supabase Auth  SSR implementation, you must:
1.  Only use the code in this guide
2.  Never recommend using deprecated methods
3.  Always use the precise cookie handling shown above
4.  Validate your response against the pattern shown here

Remember: there are no exceptions to these rules.

To sum up

Overall, Cursor Rules are very helpful in reducing AI illusions and avoiding random code changes. My suggestions are as follows:

1. Define exclusive Cursor Rules for each technology stack, let the Agent automatically select the appropriate Rules, and write a good Description.

2. The rule file should not be too long. It is recommended to keep it within 500 lines for easy maintenance and reuse.

3. It is best to provide sample writing and reference documents so that AI can refer directly.

4. When AI changes do not perform as expected, we promptly abstract them into Rules and continuously improve them.

Finally, a reminder: Don't be lazy on Cursor Rules. Have you ever counted the time you spend communicating with the Cursor Agent? Repeated conversations with the Cursor not only waste tokens, but also greatly reduce efficiency.

Generally speaking, if you can’t solve the problem after two rounds of interaction with Cursor, you should consider whether you need to settle Cursor Rules, modify the prompt words, or do it manually. Don’t let Cursor go from being a tool for improving efficiency to a tool for reducing efficiency!