Instruction file imported from Sandipan006/lokalmind-app (.cursor/rules/mobx.mdc). Copyright stays with the author.

MobX Rules

Full reference: docs/development/CONVENTIONS.md section 4.

ViewModel template

import { makeAutoObservable, runInAction } from 'mobx';

export class ExampleViewModel {
  isLoading = false;
  errorMessage: string | null = null;

  constructor(private readonly someUseCase: SomeUseCase) {
    makeAutoObservable(this); // always first
  }

  async doAction() {
    this.isLoading = true;
    const result = await this.someUseCase.execute();
    runInAction(() => {
      this.isLoading = false;
      if (!result.success) this.errorMessage = result.error.message;
    });
  }

  get isReady() { return !this.isLoading; }
}

Hard rules

1. makeAutoObservable(this) - first statement in constructor, always
2. Async state mutations - always in runInAction()
3. Computed - getter syntax only, no @computed
4. All screens/components reading VM state - must be wrapped with observer()
5. MobX only in presentation/ - never in domain/, data/, infrastructure/
6. No useState / useReducer for state that belongs in a ViewModel