Incantory
로그인
규칙CC0-1.0검사 안 됨

React Styled Components

Cursor rules for React development with Styled Components integration.

Awesome CursorRulesv1스타 0개 · 포크 0개 · 작품 0개≈267 토큰

렌더링소스

// 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 `;