react-mobx-cursorrules-prompt-file — Cursor rule: install & details
Cursor rule for building React apps with MobX. It configures state stores, hook conventions, and strict MobX patterns for code generation.
.cursor/rules/react-mobx-cursorrules-prompt-file.mdcWhat react-mobx-cursorrules-prompt-file does
This rule guides Cursor toward functional React components paired with mobx-react-lite. State updates must occur inside actions, derived values rely on computed, and components connect via observer or useObserver.
It establishes a standard layout inside src/ across components/, stores/, hooks/, pages/, and utils/. Type safety requires TypeScript, while observable side effects run through reaction.
Debugging becomes messy when components mutate state outside actions, so the rule enforces MobX strict mode alongside dependency injection for store instances.
What it helps with
- structure a React project layout with dedicated store and hook folders
- manage application state with MobX stores and computed properties
- bind functional components to reactive state via mobx-react-lite
- isolate side effects using MobX reaction hooks
Example prompts for the agent
- Create a shopping cart store in TypeScript using MobX actions and computed totals.
- Build a user profile functional component wrapped with mobx-react-lite observer.
- Write an asynchronous MobX action for fetching orders with proper error handling.
How to install react-mobx-cursorrules-prompt-file
Manually: put the files in place
.cursor/rules/react-mobx-cursorrules-prompt-file.mdcFrontmatter: description, globs, alwaysApply
Manually: put the files in place
.claude/rules/react-mobx-cursorrules-prompt-file.mdThe paths frontmatter field limits the files: move globs from the source into paths
AGENTS.md
Codex reads AGENTS.md: paste the rule text there
Manually: put the files in place
.github/instructions/react-mobx-cursorrules-prompt-file.instructions.mdThe applyTo field sets which files it applies to: move globs from the source into applyTo
Manually: put the files in place
.devin/rules/react-mobx-cursorrules-prompt-file.mdManually: put the files in place
.clinerules/react-mobx-cursorrules-prompt-file.mdStep by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules
Questions about react-mobx-cursorrules-prompt-file
How to install react-mobx-cursorrules-prompt-file in Cursor?
Add the rule content to .cursor/rules/react-mobx-cursorrules-prompt-file.mdc in your project root.
What does react-mobx-cursorrules-prompt-file do?
It directs the AI to write React code with MobX state management, enforcing TypeScript, mobx-react-lite, actions, and computed properties.
What folder layout does this rule enforce?
The configuration organizes files inside src/ under components/, stores/, hooks/, pages/, and utils/.
Source text
react-mobx-cursorrules-prompt-file.mdc · CC0-1.0
--- description: "Cursor rules for React development with MobX integration." globs: **/* alwaysApply: false --- // 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 `;
© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules