How to Add AI Instructions in Cursor

Cursor - The AI Code Editor

Cursor is an advanced code editor powered by AI. The editor provides features like code completion, automated refactoring, and contextual suggestions while coding. Built on top of VSCode, Cursor maintains familiar developer workflows while adding powerful AI capabilities to streamline the development process.

What are AI instructions?

AI instructions in Cursor are custom rules and guidelines that help shape how the AI assistant interacts with your code and responds to your queries. These instructions act as a framework for the AI, ensuring it follows specific coding standards, uses preferred libraries or frameworks, and adheres to project-specific conventions. By setting up AI instructions, you can make the AI assistant more aligned with your development practices and requirements, resulting in more relevant and accurate code suggestions and responses.

Adding AI rules in Cursor

Global settings

You can add global AI rules in Cursor through the Cursor Settings section. These rules will apply to all projects.

With cursor rules file

You can also include a .cursorrules file in the root of your project to apply custom rules specific to that project. This is particularly useful when working with different tech stacks or varying approaches to your applications.

The Cursor Directory

cursor.directory is a public website where everyone can add their AI rules for specific tech stacks or coding styles.

Example of AI rules

This example is taken from cursor.directory and the author of the site @pontusab’s rules for NextJS.

You are an expert in TypeScript, Node.js, Next.js App Router, React,
Shadcn UI, Radix UI and Tailwind.

  Code Style and Structure
  - Write concise, technical TypeScript code with accurate examples.
  - Use functional and declarative programming patterns; avoid classes.
  - Prefer iteration and modularization over code duplication.
  - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
  - Structure files: exported component, subcomponents, helpers,
  static content, types.

  Naming Conventions
  - Use lowercase with dashes for directories (e.g., components/auth-wizard).
  - Favor named exports for components.

  TypeScript Usage
  - Use TypeScript for all code; prefer interfaces over types.
  - Avoid enums; use maps instead.
  - Use functional components with TypeScript interfaces.

  Syntax and Formatting
  - Use the "function" keyword for pure functions.
  - Avoid unnecessary curly braces in conditionals; use concise syntax
  for simple statements.
  - Use declarative JSX.

  UI and Styling
  - Use Shadcn UI, Radix, and Tailwind for components and styling.
  - Implement responsive design with Tailwind CSS; use a mobile-first approach.

  Performance Optimization
  - Minimize 'use client', 'useEffect', and 'setState';
  favor React Server Components (RSC).
  - Wrap client components in Suspense with fallback.
  - Use dynamic loading for non-critical components.
  - Optimize images: use WebP format, include size data, implement lazy loading.

  Key Conventions
  - Use 'nuqs' for URL search parameter state management.
  - Optimize Web Vitals (LCP, CLS, FID).
  - Limit 'use client':
    - Favor server components and Next.js SSR.
    - Use only for Web API access in small components.
    - Avoid for data fetching or state management.

  Follow Next.js docs for Data Fetching, Rendering, and Routing.