Tailwind Shadcn UI Integration Cursorrules Prompt

Cursor-Regel für konsistenten UI-Code mit Tailwind-Utilities und shadcn/ui-Komponenten.

Original-Beschreibung der Autoren: Cursor rules for Tailwind development with shadcn/ui integration.

Die Regel

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

You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

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.

Ensure code is complete! Verify thoroughly finalized.

Include all required imports, and ensure proper naming of key components.

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.

Tech Stack

Files are located inside the src folder.

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 bringt Cursor bei, wie in Projekten mit Tailwind CSS und shadcn/ui gearbeitet werden soll. shadcn/ui-Komponenten werden nicht als Paket installiert, sondern direkt in den Code kopiert – die Regel sorgt dafür, dass die KI diese Struktur respektiert statt eigene Komponenten zu erfinden oder Styling doppelt zu pflegen. Sie gibt vor, Klassen konsequent über die cn()-Utility zusammenzuführen, auf Tailwind-Design-Tokens statt fest codierte Werte zu setzen und bestehende UI-Primitives wiederzuverwenden. Für Teams, die shadcn/ui als Komponentenbasis nutzen und verhindern wollen, dass generierter Code Stilbrüche oder redundante Klassen produziert, ist das ein sinnvolles Werkzeug.

Praxis-Tipp

Legen Sie die Regel in .cursor/rules ab und fordern Sie neue Komponenten explizit mit „nutze bestehende shadcn/ui-Komponenten aus components/ui“ an, damit die KI nicht neu erfindet, was schon existiert.

Lizenz & Quelle

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

Lade …