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.
Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.
Android development with Jetpack Compose, clean architecture, and Material Design 3.
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.