Skip to main content
rule

typescript-nodejs-react-vite-cursorrules-prompt-fi — Cursor rule

This rule sets TypeScript conventions for Node.js, React, and Vite projects, with guidance for TanStack Query, TanStack Router, and Tailwind. Use it to keep agent edits aligned with your codebase’s existing style.

Install into Cursor · Manually: put the files in place All methods and platforms ↓
.cursor/rules/typescript-nodejs-react-vite-cursorrules-prompt-fi.mdc
Open on GitHub

What typescript-nodejs-react-vite-cursorrules-prompt-fi does

The rule matches files with the **/* glob. It tells the agent to preserve existing code and comments, leave import formatting alone, and avoid unrelated formatting changes. For React, it favors functional components and named exports; for TypeScript, it prefers interfaces over type aliases and enums.

It also covers file organization, JSX, and Tailwind styling. Performance guidance points to data structures, fetching, network requests, and rendering. The alwaysApply setting is false, so the rule is not configured to apply unconditionally; check how Cursor activates it for your project files.

What it helps with

  • preserve comments and import formatting during TypeScript edits
  • keep React components consistent with functional patterns
  • choose conventions for interfaces and named exports
  • consider data fetching and rendering when tuning UI performance

Example prompts for the agent

  • Add a TypeScript React component and keep the existing import formatting.
  • Improve data fetching with TanStack Query without removing comments.
  • Review this component’s JSX and styling using Tailwind and functional patterns.

How to install typescript-nodejs-react-vite-cursorrules-prompt-fi

Manually: put the files in place

.cursor/rules/typescript-nodejs-react-vite-cursorrules-prompt-fi.mdc

Frontmatter: description, globs, alwaysApply

Step by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules

Questions about typescript-nodejs-react-vite-cursorrules-prompt-fi

How do I install typescript-nodejs-react-vite-cursorrules-prompt-fi in Cursor?

Add the rule file at .cursor/rules/typescript-nodejs-react-vite-cursorrules-prompt-fi.mdc.

What does typescript-nodejs-react-vite-cursorrules-prompt-fi do?

It sets coding conventions for TypeScript with Node.js, React, and Vite, including file organization, JSX, imports, and comments.

Does the rule apply to every file automatically?

Its glob is **/*, but alwaysApply is false. It is not configured for unconditional application.

Source text

typescript-nodejs-react-vite-cursorrules-prompt-fi.mdc · CC0-1.0
---
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

© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules

Similar IDE rules

All IDE rules for Frontend and UI →

From the same set210

typescript-vuejs-cursorrules-prompt-file A Cursor rule that tells the agent how to write TypeScript inside Vue.js projects. Useful when you want edits across components to follow the same conventions. ★ 41,024repo stars typescript-vite-tailwind-cursorrules-prompt-file A Cursor rule that pins down TypeScript code style for Vue projects built with Vite and styled with Tailwind. Useful when you want the agent's output to stay predictable. ★ 41,024repo stars typescript-react-nextui-supabase-cursorrules-promp This rule gives an agent context for a TypeScript app built with React, NextUI, and Supabase. Use it when working on the UI, user dashboard, or authentication flows. ★ 41,024repo stars typescript-react-nextjs-cloudflare-cursorrules-pro A Cursor rule that points the agent at TypeScript, Next.js App Router, React and Cloudflare tooling. Useful when your project already runs on that stack. ★ 41,024repo stars typescript-nodejs-nextjs-react-ui-css-cursorrules- A Cursor rule that pins down how the agent writes TypeScript, Next.js App Router, React and Tailwind code. Useful when generated components drift from your conventions. ★ 41,024repo stars typescript-nextjs-supabase-cursorrules-prompt-file A Cursor rule that keeps TypeScript work on Next.js App Router and Supabase consistent: server components first, Shadcn UI, Tailwind. ★ 41,024repo stars typescript-nextjs-cursorrules-prompt-file This rule sets coding conventions for TypeScript and Next.js App Router, with guidance for React and Daisy UI with Tailwind. Use it to steer Cursor toward those patterns in a project. ★ 41,024repo stars typescript-expo-jest-detox-cursorrules-prompt-file A Cursor rule that points the assistant at TypeScript, React Native, Expo and mobile UI work. Useful when your app runs on Expo and you test it with Jest and Detox. ★ 41,024repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor