Skip to main content
rule

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.

Install into Cursor · Manually: put the files in place All methods and platforms ↓
.cursor/rules/react-mobx-cursorrules-prompt-file.mdc
Open on GitHub

What 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.mdc

Frontmatter: description, globs, alwaysApply

Step 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

Similar IDE rules

All IDE rules for Frontend and UI →

From the same set210

react-query-cursorrules-prompt-file A Cursor rule that tells the agent how to write React Query code: where QueryClient lives, how hooks and query keys are named. ★ 41,024repo stars react-nextjs-ui-development-cursorrules-prompt-fil Configures Cursor for React and Next.js App Router development. Forces the agent to outline pseudocode first and maintain dual Vercel and Replit support. ★ 41,024repo stars react-native-expo-router-typescript-windows-cursorrules-prompt-file This rule guides React Native projects using Expo, TypeScript, and Expo Router. It also covers NativeWind and Tailwind CSS versions, Babel configuration, and Windows terminal commands. ★ 41,024repo stars react-native-expo-cursorrules-prompt-file A Cursor rule that tells the agent how to write React Native code with Expo. Useful when you want new screens and components to follow one stack. ★ 41,024repo stars react-graphql-apollo-client-cursorrules-prompt-file This rule guides React work with GraphQL and Apollo Client in Cursor. Use it when a project needs consistent patterns for operations, hooks, and error states. ★ 41,024repo stars react-formengine-ai-form-builder-cursorrules-prompt-file A Cursor rule that has the agent build React forms from a screenshot, PDF, HTML or text description and return a FormEngine JSON schema plus a runnable App.tsx. ★ 41,024repo stars react-components-creation-cursorrules-prompt-file Guides React component creation in Cursor by checking for duplicates, building v0.dev generation links, and standardising shadcn/ui imports. ★ 41,024repo stars react-chakra-ui-cursorrules-prompt-file A Cursor rule for React projects using Chakra UI, covering component style, theming, responsive layouts, accessibility, and project structure. ★ 41,024repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor