React Components Creation

Cursor-Regel für einheitliche Namensgebung und Dateistruktur beim Anlegen neuer React-Komponenten.

Original-Beschreibung der Autoren: Cursor rules for React component creation and development.

Die Regel

---
description: "Cursor rules for React component creation and development."
globs: **/*
alwaysApply: false
---
# Cursor Rules

## Whenever you need a React component

1. Carefully consider the component's purpose, functionality, and design

2. Think slowly, step by step, and outline your reasoning

3. Check if a similar component already exists in any of the following locations
   1. packages/ui/src/components
   2. apps/spa/src/components

4. If it doesn't exist, generate a detailed prompt for the component, including:
   - Component name and purpose
   - Desired props and their types
   - Any specific styling or behavior requirements
   - Mention of using Tailwind CSS for styling
   - Request for TypeScript usage

5. URL encode the prompt.

6. Create a clickable link in this format:
   [ComponentName](https://v0.dev/chat?q={encoded_prompt})

7. After generating, adapt the component to fit our project structure:
   - Import
     - common shadcn/ui components from <ui_package_alias>@repo/ui/components/ui/</ui_package_alias>
     - app specific components from <app_package_alias>@/components</app_package_alias>
   - Ensure it follows our existing component patterns
   - Add any necessary custom logic or state management

Example prompt template:
"Create a React component named {ComponentName} using TypeScript and Tailwind CSS. It should {description of functionality}. Props should include {list of props with types}. The component should {any specific styling or behavior notes}. Please provide the full component code."

Remember to replace placeholders like <ui_package_path> and <app_package_alias> with the actual values used in your project.

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 legt fest, wie neue React-Komponenten strukturell angelegt werden sollen: einheitliches Naming, Dateiaufteilung, Ort im Projekt und grundlegender Aufbau von Props und Exporten. Anders als die generische React-Regel geht es hier nicht um Code-Stil innerhalb einer Komponente, sondern um Konsistenz beim Anlegen ganz neuer Dateien, was gerade in größeren Projekten mit mehreren Mitwirkenden schnell durcheinandergerät. Der Mehrwert zeigt sich vor allem in Teams, in denen unterschiedliche Personen oder KI-Sessions Komponenten anlegen und ohne feste Vorgabe unterschiedliche Namens- und Strukturmuster entstehen würden. Für Einzelentwickler mit bereits etabliertem eigenen Stil ist der Effekt geringer.

Praxis-Tipp

Fügen Sie die Regel Projekten mit mehreren Mitwirkenden hinzu und testen Sie sie mit einem Prompt wie „lege eine neue Komponente für die Nutzerprofilanzeige an“, um zu sehen, ob Datei- und Ordnerstruktur konsistent bleiben.

Lizenz & Quelle

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

Lade …