Frontend#react#redux#typescript
React Redux TypeScript
Cursor rules for React development with Redux and TypeScript integration.
Use it with Cursor, or export as AGENTS.md / CLAUDE.md for other AI coding agents — pick a format below.
// React + Redux + TypeScript .cursorrules
// Prefer functional components with hooks
const preferFunctionalComponents = true;
// Use TypeScript for type safety
const useTypeScript = true;
// Redux best practices
const reduxBestPractices = [
"Use Redux Toolkit for efficient Redux development",
"Implement slice pattern for organizing Redux code",
"Utilize createAsyncThunk for handling async actions",
"Use selectors for accessing state in components",
];
// Folder structure
const folderStructure = `
src/
components/
features/
store/
slices/
hooks.ts
store.ts
types/
utils/
`;
// Additional instructions
const additionalInstructions = `
1. Use React.FC for functional components with props
2. Implement strict TypeScript checks
3. Use Redux hooks (useSelector, useDispatch) in components
4. Create reusable typed hooks for Redux operations
5. Implement proper error handling in async operations
6. Use Redux DevTools for debugging
7. Follow Redux style guide for naming conventions
`;How to use: save the file at your project root (e.g.
.cursorrules or AGENTS.md) and your AI editor picks it up automatically.Related rules
Frontend→
Next.js
Next.js with TypeScript and Tailwind UI best practices
#nextjs
Frontend→
Next.js App Router
Cursor rules for Next.js development with App Router integration.
#nextjs#app#router
Frontend→
Next.js Material UI Tailwind Cssmpt
Cursor rules for Next.js development with Material UI and Tailwind CSS integration.
#nextjs#material#ui#tailwind