{"filename":"react-styled-components-cursorrules-prompt-file.mdc","content":"---\ndescription: \"Cursor rules for React development with Styled Components integration.\"\nglobs: **/*\nalwaysApply: false\n---\n// React + Styled Components .cursorrules\n\n// Prefer functional components with hooks\n\nconst preferFunctionalComponents = true;\n\n// Styled Components best practices\n\nconst styledComponentsBestPractices = [\n  \"Use the styled-components/macro for better debugging\",\n  \"Implement a global theme using ThemeProvider\",\n  \"Create reusable styled components\",\n  \"Use props for dynamic styling\",\n  \"Utilize CSS helper functions like css`` when needed\",\n];\n\n// Folder structure\n\nconst folderStructure = `\nsrc/\n  components/\n    styled/\n  styles/\n    theme.js\n    globalStyles.js\n  pages/\n  utils/\n`;\n\n// Additional instructions\n\nconst additionalInstructions = `\n1. Use proper naming conventions for styled components (e.g., StyledButton)\n2. Implement a consistent theming system\n3. Use CSS-in-JS for all styling needs\n4. Utilize styled-components' attrs method for frequently used props\n5. Implement proper TypeScript support for styled-components\n6. Use the css prop for conditional styling when appropriate\n7. Follow the styled-components documentation for best practices\n`;\n"}