React Styled Components

Cursor-Regel für React mit styled-components — Konventionen für CSS-in-JS und Theming.

Original-Beschreibung der Autoren: Cursor rules for React development with Styled Components integration.

Die Regel

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

// Prefer functional components with hooks

const preferFunctionalComponents = true;

// Styled Components best practices

const styledComponentsBestPractices = [
  "Use the styled-components/macro for better debugging",
  "Implement a global theme using ThemeProvider",
  "Create reusable styled components",
  "Use props for dynamic styling",
  "Utilize CSS helper functions like css`` when needed",
];

// Folder structure

const folderStructure = `
src/
  components/
    styled/
  styles/
    theme.js
    globalStyles.js
  pages/
  utils/
`;

// Additional instructions

const additionalInstructions = `
1. Use proper naming conventions for styled components (e.g., StyledButton)
2. Implement a consistent theming system
3. Use CSS-in-JS for all styling needs
4. Utilize styled-components' attrs method for frequently used props
5. Implement proper TypeScript support for styled-components
6. Use the css prop for conditional styling when appropriate
7. Follow the styled-components documentation for best practices
`;

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

Legt fest, wie Cursor styled-components in React-Projekten einsetzen soll: Benennung von styled-Komponenten, Nutzung des Theme-Providers, Vermeidung von Inline-Styles zugunsten von CSS-in-JS. Hilfreich für Teams, die bereits auf styled-components statt Tailwind oder CSS-Modulen setzen und eine einheitliche Schreibweise wollen. Weniger sinnvoll, wenn das Projekt eigentlich Utility-CSS wie Tailwind nutzt — dann würde die Regel gegen den bestehenden Stil arbeiten. Der Wert liegt vor allem darin, Styling-Konsistenz zu erzwingen, wenn mehrere Personen oder eine KI gemeinsam an derselben Codebasis arbeiten.

Praxis-Tipp

Nur aktivieren, wenn styled-components tatsächlich die Styling-Lösung im Projekt ist — vorher prüfen, ob nicht Tailwind oder CSS-Module im Einsatz sind.

Lizenz & Quelle

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

Lade …