React Components Creation

Cursor-Regel für konsistente Struktur und Naming 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

Cursor-Regel speziell für das Anlegen neuer React-Komponenten: gibt Vorgaben zu Dateibenennung, Ordnerstruktur (z. B. eine Komponente pro Ordner mit Test und Styles), Props-Interfaces und wann ein Custom Hook statt Logik in der Komponente sinnvoll ist. Hilft, damit bei jedem „erstelle eine neue Komponente“-Prompt konsistente Struktur entsteht, statt dass jede Komponente anders organisiert ist. Besonders für größere Codebasen mit vielen Contributor:innen wertvoll, wo Konsistenz wichtiger ist als individuelle Vorlieben. Ergänzt die allgemeine React-Regel um den konkreten Erstellungs-Workflow.

Praxis-Tipp

Bei neuen Features direkt anwenden: „erstelle die Komponente ProductCard nach den Component-Creation-Regeln“ statt die Struktur jedes Mal manuell vorzugeben.

Lizenz & Quelle

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

Lade …