React Chakra UI

Cursor-Regel für React-Projekte, die konsequent Chakra-UI-Komponenten und Theming statt eigenem CSS nutzt.

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

Die Regel

---
description: "Cursor rules for React development with Chakra UI integration."
globs: **/*
alwaysApply: false
---
// React + Chakra UI .cursorrules

// Prefer functional components with hooks

const preferFunctionalComponents = true;

// Chakra UI best practices

const chakraUIBestPractices = [
  "Use ChakraProvider at the root of your app",
  "Utilize Chakra UI components for consistent design",
  "Implement custom theme for brand-specific styling",
  "Use responsive styles with the Chakra UI breakpoint system",
  "Leverage Chakra UI hooks for enhanced functionality",
];

// Folder structure

const folderStructure = `
src/
  components/
  pages/
  theme/
    index.js
    foundations/
    components/
  hooks/
  utils/
`;

// Additional instructions

const additionalInstructions = `
1. Use TypeScript for type safety with Chakra UI components
2. Implement proper component composition using Chakra UI
3. Utilize Chakra UI's built-in accessibility features
4. Use the 'as' prop for semantic HTML rendering
5. Implement dark mode using Chakra UI's color mode
6. Use Chakra UI's layout components for responsive design
7. Follow Chakra UI best practices for performance optimization
`;

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 der KI bei, in React-Projekten konsequent auf Chakra UI zurückzugreifen, statt eigenes CSS oder fremde Klassennamen wie bei Tailwind zu erzeugen. Das betrifft sowohl die Verwendung von Chakras vorgefertigten Komponenten wie Box, Stack oder Button als auch das Theming-System für Farben, Abstände und Breakpoints. Der Vorteil gegenüber einer allgemeinen React-Regel ist, dass generierter Code sofort optisch und strukturell zum bestehenden Chakra-Setup passt, statt nachträglich angepasst werden zu müssen. Sinnvoll ist das für Teams, die sich bereits für Chakra UI als Design-System entschieden haben; für Projekte mit anderen UI-Kits oder reinem Tailwind-Ansatz ist die Regel dagegen nicht die richtige Wahl.

Praxis-Tipp

Verwenden Sie die Regel gezielt bei Prompts wie „baue ein responsives Formular“ und prüfen Sie, dass die KI dafür Chakra-Komponenten statt HTML-Elemente mit eigenem CSS vorschlägt.

Lizenz & Quelle

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

Lade …