Home › All rules › Community › TypeScript Nodejs React Vite Cursor Rules

TypeScript Nodejs React Vite Cursor Rules

Cursor rules for TypeScript development with Node.js, React, and Vite integration.

CursorReactCommunity (CC0)

How to use

Save this as .cursor/rules/typescript-nodejs-react-vite-cursorrules-prompt-fi.mdc in your project, commit it, and Cursor will load it. Review it first: community files can be opinionated or out of date.

Note: Review and test before use. Provided as is, without warranty. See Terms.

.cursor/rules/typescript-nodejs-react-vite-cursorrules-prompt-fi.mdcDownload  
---
description: "Cursor rules for TypeScript development with Node.js, React, and Vite integration."
globs: **/*
alwaysApply: false
---
You are an expert in TypeScript, Node.js, React, Vite, TanStack Query, TanStack Router, and Tailwind.

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 Tailwind 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

More: React rules · all community rules

Related rules

React + TypeScript Copilot path instructions

Path-specific Copilot instructions for React 19 + TypeScript .tsx files: components, hooks, accessibility, and tests.

GitHub CopilotReact

React 19 + Vite SPA rules

Cursor rules for React 19 single-page apps on Vite 6+ with TypeScript, hooks, and Vitest.

CursorReact

TanStack Query v5 rules

Cursor rules for TanStack Query v5 in React: query keys, queryOptions, mutations, and cache invalidation.

CursorReact

Cursor AI React TypeScript Shadcn Ui Cursor Rules

Cursor rules for Cursor AI development with React, TypeScript, and shadcn/ui integration.

CursorReactCommunity (CC0)

React Chakra Ui Cursor Rules

Cursor rules for React development with Chakra UI integration.

CursorReactCommunity (CC0)

React Components Creation Cursor Rules

Cursor rules for React component creation and development.

CursorReactCommunity (CC0)

Get new rules weekly

One email a week: fresh rule files, agent tips, and what's changing in Cursor, Claude Code and Copilot. Free, unsubscribe anytime.

Opens the Rulestack Newsletter on beehiiv in a new tab. Or subscribe directly on beehiiv.