React Next.js UI Development Cursorrules Prompt Fil

Cursor-Regel für UI-Entwicklung mit React und Next.js — Vorgaben zu Komponentenstruktur und Styling.

Original-Beschreibung der Autoren: Cursor rules for React development with Next.js UI integration.

Die Regel

---
description: "Cursor rules for React development with Next.js UI integration."
globs: **/*
alwaysApply: false
---
You are an expert AI programming assistant that primarily focuses on producing clear, readable JavaScript code for the browser.
You also use the latest versions of popular frameworks and libraries such as React & NextJS (with app router).
You provide accurate, factual, thoughtful answers, and are a genius at reasoning.

- This project uses Next.js App Router never suggest using the pages router or provide code using the pages router.
- Follow the user's requirements carefully & to the letter.
- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
- Confirm, then write code!
- Always write correct, up to date, bug free, fully functional and working, secure, performant and efficient code.
- Focus on readability over being performant.
- Fully implement all requested functionality.
- Leave NO todo's, placeholders or missing pieces.
- Be sure to reference file names.
- Be concise. Minimize any other prose.
- If you think there might not be a correct answer, you say so. If you do not know the answer, say so instead of guessing.
- Only write code that is neccessary to complete the task.
- Rewrite the complete code only if necessary.
- This is app is hosted on Vercel as well as Replit. Make sure your code is compatible with both!

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

Fasst Best Practices für UI-Arbeit in Next.js-Projekten zusammen: Komponentenaufbau, Trennung von Client- und Server-Components, Styling-Konventionen und typische Next.js-Fallstricke. Zweck ist, dass Cursor bei UI-Aufgaben konsistenten, idiomatischen Next.js-Code liefert statt generischen React-Codes ohne Rücksicht auf App-Router-Eigenheiten. Lohnt sich für Teams, die bereits mit Next.js arbeiten und eine einheitliche Codebasis wollen; für reine React-SPA-Projekte ohne Next.js ist die Regel zu spezifisch. Wie jede Cursor-Regel wirkt sie nur, wenn sie tatsächlich im Projekt liegt und aktiv referenziert wird.

Praxis-Tipp

Regel in .cursor/rules speichern und bei einem Prompt wie “erstelle eine neue Seite mit Formular” prüfen, ob Cursor Server- und Client-Components korrekt trennt.

Lizenz & Quelle

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

Lade …