React Styled Components

Cursor-Regel für styled-components in React: CSS-in-JS-Konventionen 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

Diese Regel legt Konventionen für styled-components in React-Projekten fest: wie CSS-in-JS-Komponenten benannt und organisiert werden und wie Theming (z. B. über ThemeProvider) konsistent eingebunden wird. Das verhindert wildwuchernde, inline definierte Styles und sorgt dafür, dass generierte Komponenten zum bestehenden Theme-System passen. Praktisch für Projekte, die bereits auf styled-components statt Tailwind oder CSS-Modulen setzen und Wert auf dynamisches Theming (Dark Mode, Branding) legen. Für neue Projekte ohne bestehende styled-components-Basis lohnt sich eher ein Vergleich mit modernen Alternativen wie Tailwind, da CSS-in-JS an Popularität verliert.

Praxis-Tipp

Beispiel-Prompt: ‘Erstelle einen Button als styled-component, der Theme-Farben nutzt und einen primary/secondary-Variant unterstützt’ — die Regel hält Namensgebung und Theme-Zugriff konsistent.

Lizenz & Quelle

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

Lade …