Frontend#react#mobx
React Mobx
Cursor rules for React development with MobX integration.
Use it with Cursor, or export as AGENTS.md / CLAUDE.md for other AI coding agents — pick a format below.
// React + MobX .cursorrules
// Prefer functional components with hooks
const preferFunctionalComponents = true;
// MobX best practices
const mobxBestPractices = [
"Use MobX-react-lite for optimal performance with functional components",
"Implement stores for managing application state",
"Utilize computed values for derived state",
"Use actions for modifying observable state",
"Implement proper error handling in asynchronous actions",
];
// Folder structure
const folderStructure = `
src/
components/
stores/
hooks/
pages/
utils/
`;
// Additional instructions
const additionalInstructions = `
1. Use TypeScript for type safety with MobX
2. Implement strict mode for MobX for better debugging
3. Use observer HOC or useObserver hook for reactive components
4. Implement proper dependency injection for stores
5. Use reaction for side-effects based on observable changes
6. Utilize MobX DevTools for debugging
7. Follow MobX best practices for scalable state management
`;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