28 react rules available
Browse optimized Cursor rules specifically designed for React development. These rules help Cursor's AI understand React best practices and patterns.
React's component-based architecture and hooks system require specific patterns for AI code generation. Well-configured rules help the AI understand your preferred state management approach, component composition patterns, and whether you're using class components or modern functional components with hooks.
When configuring Cursor for React development, consider these recommendations:
Most React rules focus on functional components with hooks, TypeScript integration, and modern patterns like compound components and render props. Popular configurations include Next.js App Router integration, React Query for data fetching, and Tailwind CSS for styling.
For Next.js projects, we recommend using Next.js-specific rules which include React patterns plus additional server component and routing configurations. However, React rules are perfect for Vite, Create React App, or other React frameworks.
Most modern rules focus on functional components with hooks, as this is the recommended pattern. If you're maintaining a legacy codebase with class components, look for rules that explicitly support both patterns.
Some rules are designed specifically for React Native development. Look for rules tagged with 'react-native' or 'mobile' for platform-specific patterns like navigation and native modules.
Comprehensive Cursor rules for Next.js 14+ with App Router, including routing, layouts, and API patterns.
Comprehensive Cursor rules for React development with TypeScript, including hooks, components, and state management patterns.
Cursor rules for React Server Components and the App Router pattern in Next.js 14+.
Cursor rules for testing React applications using Vitest and React Testing Library.
Use React Portals for modals and tooltips
Ensure React applications are accessible to all users
Comprehensive testing approach for React components
Guidelines for managing state effectively in React applications
Optimize images for performance in Next.js applications
Best practices for composing React components for maximum reusability
Efficient patterns for handling forms in React applications
Build performant data tables in React
Build reusable custom hooks collection
Secure authentication implementation in Next.js
Comprehensive rules for using React hooks effectively with proper dependency management
Implement robust error handling with React error boundaries
Create smooth animations with Framer Motion
Best practices for React Server Components in Next.js
Advanced techniques for optimizing React application performance
Compare and use React form libraries
Use React Profiler to identify performance issues
Modern patterns for Next.js App Router architecture
Optimal data fetching patterns for Next.js applications
Implement comprehensive metadata for SEO in Next.js
Server state management with React Query
Optimize React Context usage for performance
Implement data fetching with React Suspense
Leverage React 18+ concurrent features
Create your own Cursor rules for React and share with the community.