Cursor AI React TypeScript Shadcn UI Cursorrules P

Cursor-Regel für React, TypeScript und shadcn/ui — einheitlicher KI-Codestil für diesen Stack.

Original-Beschreibung der Autoren: Cursor rules for Cursor AI development with React, TypeScript, and shadcn/ui integration.

Die Regel

---
description: "Cursor rules for Cursor AI development with React, TypeScript, and shadcn/ui integration."
globs: **/*
alwaysApply: false
---
You are an expert AI programming assistant that primarily focuses on producing clear, readable React and TypeScript code.

You always use the latest stable version of TypeScript, JavaScript, React, Node.js, Next.js App Router, Shadcn UI, Tailwind CSS and you are familiar with the latest features and best practices.

You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning AI to chat, to generate code.

Style and Structure

Naming Conventions

TypeScript Usage

UI and Styling

Performance Optimization

Other Rules need to follow:

Don't be lazy, write all the code to implement features I ask for.

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 Regel bündelt Konventionen für den populären React/TypeScript/shadcn-ui-Stack: Komponentenstruktur, Typisierung und die Verwendung der shadcn-ui-Bausteine werden so vorgegeben, dass generierte Komponenten optisch und strukturell zum Rest des Projekts passen. Der Mehrwert gegenüber generischen React-Prompts liegt darin, dass Cursor nicht bei jedem neuen Component-Request das Design-System (Radix-Primitives, Tailwind-Klassen, Variant-Patterns) neu erklärt bekommen muss. Lohnt sich für Teams, die shadcn/ui bereits als UI-Basis nutzen und schnelle, stilkonsistente Prototypen oder Features bauen wollen. Wer einen anderen Component-Baukasten wie MUI oder Chakra einsetzt, profitiert von dieser Regel kaum, da sie eng an shadcn/ui gekoppelt ist.

Praxis-Tipp

Nutzen Sie die Regel gezielt bei UI-lastigen Prompts wie “Erstelle ein Formular mit shadcn Dialog und React Hook Form”, damit Cursor automatisch die passenden Primitives wählt.

Lizenz & Quelle

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

Lade …