react styled components
via PatrickJS/awesome-cursorrules
Build React apps with Styled Components using functional components, hooks, and a consistent theming system.
What is react styled components?
This rule configures React development with Styled Components, emphasizing functional components with hooks and CSS-in-JS styling. Use it when building React applications that require component-scoped styling with a centralized theme system.
- Enforce functional components with React hooks as the primary pattern
- Implement global theming via ThemeProvider with centralized theme configuration
- Create reusable styled components with consistent naming conventions (e.g., StyledButton)
- Use props and styled-components attrs method for dynamic and frequently-used styling
- Organize code with dedicated folders for styled components, themes, and global styles
- Support TypeScript integration with styled-components for type-safe styling
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
// 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 = `
- Use proper naming conventions for styled components (e.g., StyledButton)
- Implement a consistent theming system
- Use CSS-in-JS for all styling needs
- Utilize styled-components' attrs method for frequently used props
- Implement proper TypeScript support for styled-components
- Use the css prop for conditional styling when appropriate
- Follow the styled-components documentation for best practices `;
Related rules
Senior full-stack TypeScript, React, Node.js guidance with clean architecture, testing, and WHY-oriented reasoning.
Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.
Android development with Jetpack Compose, clean architecture, and Material Design 3.
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.