PluginBench
Rule

typescript nodejs react vite cursorrules prompt fi

via PatrickJS/awesome-cursorrules

Expert guidance for TypeScript, React, and Vite projects with TanStack Query/Router and Tailwind.

What is typescript nodejs react vite cursorrules prompt fi?

This rule configures Cursor for full-stack TypeScript development using Node.js, React, Vite, and modern ecosystem libraries. Apply it when building type-safe, performant React applications with server integration and advanced routing/data-fetching patterns.

  • Enforces functional, declarative TypeScript patterns with interfaces over types and no enums
  • Structures code with clear separation: components, subcomponents, helpers, types, and static content
  • Applies Tailwind CSS for styling and Vite for fast builds with React integration
  • Optimizes performance through immutable data structures, efficient rendering, and smart state management
  • Preserves existing code formatting, comments, and import structure unless critical changes needed
  • Uses TanStack Query and Router for advanced data fetching and client-side routing

Applies to

File patterns this rule matches.

**/*
Rule definition (reference)

Source of truth, from the repository.

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

Related rules

Senior full-stack TypeScript, React, Node.js guidance with clean architecture, testing, and WHY-oriented reasoning.

**/*
41k
via PatrickJS/awesome-cursorrules

Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.

**/*
41k
via PatrickJS/awesome-cursorrules

Android development with Jetpack Compose, clean architecture, and Material Design 3.

**/*
41k
via PatrickJS/awesome-cursorrules

Angular development with Novo Elements UI library using standalone components.

**/*
41k
via PatrickJS/awesome-cursorrules

Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.

**/*
41k
via PatrickJS/awesome-cursorrules

Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.

**/*.sh +5
41k
via PatrickJS/awesome-cursorrules