TypeScript React

Feste Cursor-Vorgaben für sauberen, typsicheren React-Code ohne wiederholte Styleguide-Prompts.

Original-Beschreibung der Autoren: Cursor rules for TypeScript development with React integration.

Die Regel

---
description: "Cursor rules for TypeScript development with React integration."
globs: **/*
alwaysApply: false
---
// TypeScript React .cursorrules

// Prefer functional components

const preferFunctionalComponents = true;

// TypeScript React best practices

const typescriptReactBestPractices = [
  "Use React.FC for functional components with props",
  "Utilize useState and useEffect hooks for state and side effects",
  "Implement proper TypeScript interfaces for props and state",
  "Use React.memo for performance optimization when needed",
  "Implement custom hooks for reusable logic",
  "Utilize TypeScript's strict mode",
];

// Folder structure

const folderStructure = `
src/
  components/
  hooks/
  pages/
  types/
  utils/
  App.tsx
  index.tsx
`;

// Additional instructions

const additionalInstructions = `
1. Use .tsx extension for files with JSX
2. Implement strict TypeScript checks
3. Utilize React.lazy and Suspense for code-splitting
4. Use type inference where possible
5. Implement error boundaries for robust error handling
6. Follow React and TypeScript best practices and naming conventions
7. Use ESLint with TypeScript and React plugins for code quality
`;

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

Diese Cursor-Regel liefert eine fertige Arbeitsanweisung für React-Projekte mit TypeScript: Sie legt Konventionen für Komponentenstruktur, Typisierung von Props und Hooks sowie Namensgebung fest, sodass der KI-Editor Code automatisch im gewünschten Stil generiert. Statt bei jedem Prompt Styleguide-Details zu wiederholen, hält sich Cursor dauerhaft daran. Sinnvoll für Teams, die mit React arbeiten und einheitlichen, typsicheren Code ohne manuelles Nachbessern wollen. Wer bereits einen eigenen Styleguide hat, sollte die Regel eher als Ausgangspunkt zum Anpassen sehen als 1:1 übernehmen — sie deckt Basics ab, aber keine projektspezifischen Patterns.

Praxis-Tipp

In .cursor/rules/ als eigene Datei ablegen, dann z. B. ‚Erstelle eine neue Todo-Komponente‘ prompten — die Regel sorgt automatisch für saubere Typisierung.

Lizenz & Quelle

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

Lade …