PluginBench
Rule

typescript nodejs react vite cursorrules prompt fi

via PatrickJS/awesome-cursorrules

TypeScript, Node.js, React, Vite, TanStack Query/Router, and Tailwind development guide.

What is typescript nodejs react vite cursorrules prompt fi?

Establishes coding standards and best practices for full-stack TypeScript development with React, Vite, and modern ecosystem libraries. Use this rule to maintain consistent code style, naming conventions, and performance optimization patterns across your project.

  • Enforces functional, declarative TypeScript patterns with interfaces over types and maps over enums
  • Defines naming conventions for directories (lowercase-dashed) and components (named exports)
  • Specifies file structure: exported component, subcomponents, helpers, static content, types
  • Guides Tailwind CSS usage for UI and styling
  • Provides performance optimization strategies including immutable data structures, efficient data fetching, and optimized rendering
  • Establishes code preservation rules to avoid removing existing code, comments, or import/formatting changes unless necessary

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

TypeScript React development with functional components and strict typing.

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

TypeScript, React, Next.js, and Cloudflare development patterns with Shadcn UI and DrizzleORM.

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

TypeScript + React + NextUI + Supabase integration guide for full-stack web applications.

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

TypeScript + shadcn/ui + Next.js development conventions with RSC-first patterns and Tailwind styling.

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

TypeScript, Vite, and Tailwind best practices with Vue 3 Composition API and DaisyUI.

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

TypeScript and Vue.js development conventions and best practices.

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