TypeScript Node.js React Vite Cursorrules Prompt Fi

Cursor-Regel für TypeScript, Node.js, React und Vite — ohne Next.js, für schlanke SPA-Projekte.

Original-Beschreibung der Autoren: Cursor rules for TypeScript development with Node.js, React, and Vite integration.

Die Regel

---
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

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Einzige Regel der Sammlung ohne Next.js: Sie richtet sich an klassische React-Single-Page-Apps mit Vite als Build-Tool und einem separaten Node.js-Backend. Konventionen betreffen schnelle Vite-Konfiguration, Komponentenstruktur ohne Next.js-Routing-Zwänge und die Trennung von Frontend- und Backend-Code in zwei eigenständigen Projekten. Passend für alle, die kein Full-Stack-Framework wollen, sondern bewusst React-SPA plus eigenes Node-Backend trennen, etwa für interne Tools oder Prototypen ohne SEO-Anforderungen.

Praxis-Tipp

Sinnvoll bei „Setze eine neue React-Komponente mit React Router auf, die Daten von einer separaten Node-API lädt“.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …