React Styled Components

1// React + Styled Components .cursorrules
2 
3// Prefer functional components with hooks
4 
5const preferFunctionalComponents = true;
6 
7// Styled Components best practices
8 
9const styledComponentsBestPractices = [
10  "Use the styled-components/macro for better debugging",
11  "Implement a global theme using ThemeProvider",
12  "Create reusable styled components",
13  "Use props for dynamic styling",
14  "Utilize CSS helper functions like css`` when needed",
15];
16 
17// Folder structure
18 
19const folderStructure = `
20src/
21  components/
22    styled/
23  styles/
24    theme.js
25    globalStyles.js
26  pages/
27  utils/
28`;
29 
30// Additional instructions
31 
32const additionalInstructions = `
331. Use proper naming conventions for styled components (e.g., StyledButton)
342. Implement a consistent theming system
353. Use CSS-in-JS for all styling needs
364. Utilize styled-components' attrs method for frequently used props
375. Implement proper TypeScript support for styled-components
386. Use the css prop for conditional styling when appropriate
397. Follow the styled-components documentation for best practices
40`;
41 
42