CursorReactCode Style
React (React Query) Rules
const preferFunctionalComponents = true;
.cursorrules
// React + React Query .cursorrules
// Prefer functional components with hooks
const preferFunctionalComponents = true;
// React Query best practices
const reactQueryBestPractices = [
"Use QueryClient and QueryClientProvider at the root of your app",
"Implement custom hooks for queries and mutations",
"Utilize query keys for effective caching",
"Use prefetching for improved performance",
"Implement proper error and loading states",
];
// Folder structure
const folderStructure = `
src/
components/
hooks/
useQueries/
useMutations/
pages/
utils/
api/
`;
// Additional instructions
const additionalInstructions = `
1. Use TypeScript for type safety with React Query
2. Implement proper error boundaries for query errors
3. Utilize React Query DevTools for debugging
4. Use stale-while-revalidate strategy for data freshness
5. Implement optimistic updates for mutations
6. Use query invalidation for data refetching
7. Follow React Query naming conventions for consistency
`;How to use with Cursor
Create a `.cursorrules` file in your project root and paste these rules. Cursor reads this automatically on every AI interaction.
#cursor#react#ai-coding-rules
Related Rules
Python Cursor Rules
CursorPython
Best Cursor AI coding rules for Python development. Enforce type hints, PEP 8, Pythonic patterns, and modern Python best practices in your .cursorrules file.
Code Style
python · type-hintsCopy Ready
TypeScript Cursor Rules
CursorTypeScript
Cursor rules for TypeScript: enforce strict mode, eliminate any types, and write type-safe code with these .cursorrules configurations.
Code Style
typescript · strictCopy Ready
React Cursor Rules
CursorReact
Cursor rules for React: component patterns, hooks best practices, performance optimization, and clean state management conventions.
Architecture
react · hooksCopy Ready
Next.js Cursor Rules
CursorNext.js
Cursor rules for Next.js App Router: server components, data fetching, routing, and deployment best practices.
Architecture
nextjs · app-routerCopy Ready