React Chakra UI

1// React + Chakra UI .cursorrules
2 
3// Prefer functional components with hooks
4 
5const preferFunctionalComponents = true;
6 
7// Chakra UI best practices
8 
9const chakraUIBestPractices = [
10  "Use ChakraProvider at the root of your app",
11  "Utilize Chakra UI components for consistent design",
12  "Implement custom theme for brand-specific styling",
13  "Use responsive styles with the Chakra UI breakpoint system",
14  "Leverage Chakra UI hooks for enhanced functionality",
15];
16 
17// Folder structure
18 
19const folderStructure = `
20src/
21  components/
22  pages/
23  theme/
24    index.js
25    foundations/
26    components/
27  hooks/
28  utils/
29`;
30 
31// Additional instructions
32 
33const additionalInstructions = `
341. Use TypeScript for type safety with Chakra UI components
352. Implement proper component composition using Chakra UI
363. Utilize Chakra UI's built-in accessibility features
374. Use the 'as' prop for semantic HTML rendering
385. Implement dark mode using Chakra UI's color mode
396. Use Chakra UI's layout components for responsive design
407. Follow Chakra UI best practices for performance optimization
41`;
42 
43