Cursor rule
React Chakra Ui Cursorrules Prompt File
Cursor rules for React development with Chakra UI integration.
Prefer functional components with hooks
js
const preferFunctionalComponents = true;Chakra UI best practices
js
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
js
const folderStructure = `
src/
components/
pages/
theme/
index.js
foundations/
components/
hooks/
utils/
`;Additional instructions
js
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
`;More Frontend rules
Frequently asked questions
What is the React Chakra Ui Cursorrules Prompt File Cursor rule?
Cursor rules for React development with Chakra UI integration. It is a Frontend rule, stored as react-chakra-ui-cursorrules-prompt-file.mdc.
How do I use the React Chakra Ui Cursorrules Prompt File rule in Cursor?
Copy the rule from this page and save it as react-chakra-ui-cursorrules-prompt-file.mdc in your project's .cursor/rules folder, or paste it into Cursor's project rules settings.