43 lines
1.1 KiB
Plaintext
43 lines
1.1 KiB
Plaintext
// React + Chakra UI .cursorrules
|
|
|
|
// Prefer functional components with hooks
|
|
|
|
const preferFunctionalComponents = true;
|
|
|
|
// Chakra UI best practices
|
|
|
|
const chakraUIBestPractices = [
|
|
"Use ChakraProvider at the root of your app",
|
|
"Utilize Chakra UI components for consistent design",
|
|
"Implement custom theme for brand-specific styling",
|
|
"Use responsive styles with the Chakra UI breakpoint system",
|
|
"Leverage Chakra UI hooks for enhanced functionality",
|
|
];
|
|
|
|
// Folder structure
|
|
|
|
const folderStructure = `
|
|
src/
|
|
components/
|
|
pages/
|
|
theme/
|
|
index.js
|
|
foundations/
|
|
components/
|
|
hooks/
|
|
utils/
|
|
`;
|
|
|
|
// Additional instructions
|
|
|
|
const additionalInstructions = `
|
|
1. Use TypeScript for type safety with Chakra UI components
|
|
2. Implement proper component composition using Chakra UI
|
|
3. Utilize Chakra UI's built-in accessibility features
|
|
4. Use the 'as' prop for semantic HTML rendering
|
|
5. Implement dark mode using Chakra UI's color mode
|
|
6. Use Chakra UI's layout components for responsive design
|
|
7. Follow Chakra UI best practices for performance optimization
|
|
`;
|
|
|