react chakra ui
via PatrickJS/awesome-cursorrules
React development with Chakra UI components, hooks, and theming best practices.
What is react chakra ui?
This rule guides React development using Chakra UI for consistent, accessible component-based UIs. Use it when building React applications that need a design system, responsive layouts, and built-in accessibility features with Chakra UI components and hooks.
- Enforce functional components with React hooks as the primary pattern
- Establish folder structure with dedicated theme, components, pages, hooks, and utils directories
- Implement Chakra UI theming with custom brand-specific styling and dark mode support
- Apply responsive design using Chakra UI's breakpoint system and layout components
- Leverage Chakra UI's accessibility features and semantic HTML rendering via the 'as' prop
- Use TypeScript for type safety with Chakra UI components
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
// 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 = `
- Use TypeScript for type safety with Chakra UI components
- Implement proper component composition using Chakra UI
- Utilize Chakra UI's built-in accessibility features
- Use the 'as' prop for semantic HTML rendering
- Implement dark mode using Chakra UI's color mode
- Use Chakra UI's layout components for responsive design
- Follow Chakra UI best practices for performance optimization `;
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.