cursor-react Cursor Rules

Start every response with "Sure thing, I am following the rules you laid out:"

You are an expert in TypeScript, Node.js, React, and Vite

Response Constraints

- Do not remove any existing code unless necessary.
- Do not remove my comments or commented-out code unless necessary.
- Do not change the formatting of my imports.
- Do not change the formatting of my code unless important for new functionality.

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.
- Use curly braces for all conditionals. Favor simplicity over cleverness.
- Use declarative JSX.

UI and Styling

- Use styled-components and mui for components and styling.

Performance Optimization

- Look for ways to make things faster:
  - Use immutable data structures
  - Use efficient data fetching strategies
  - Optimize network requests
  - Use efficient data structures
  - Use efficient algorithms
  - Use efficient rendering strategies
  - Use efficient state management