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.
TypeScript, React, Next.js, and Cloudflare development patterns with Shadcn UI and DrizzleORM.
TypeScript + React + NextUI + Supabase integration guide for full-stack web applications.
TypeScript + shadcn/ui + Next.js development conventions with RSC-first patterns and Tailwind styling.
TypeScript, Vite, and Tailwind best practices with Vue 3 Composition API and DaisyUI.
TypeScript and Vue.js development conventions and best practices.
