effect-react-vm
CommunityBuild reactive React ViewModels with Effect.
System Documentation
What problem does it solve?
It solves the problem of mixing UI rendering with state management and business/formatting logic in React apps by providing a clear ViewModel pattern built on Effect and Effect-Atom.
Core Features & Use Cases
- Zero UI Logic VM Output: Ensures components only render UI-ready values while VMs handle formatting, transformation, and error-to-UI mapping.
- Effect-Scoped State Management: Defines atoms inside Effect layers so VM lifecycles, resources, and derived state are handled consistently.
- Testable Reactive Architecture: Enables deterministic VM testing by mocking services at the Layer level without relying on UI.
- Async Actions Done Right: Uses Atom.fn patterns for effectful actions with built-in waiting/results to drive UI states cleanly.
Use case: building a wallet screen where a domain service exposes connect/disconnect behavior, while the VM exposes UI-ready state variants (Disconnected/Connecting/Connected) and formatted display fields for the component.
Quick Start
Use the effect-react-vm skill to design a paired Component.tsx and Component.vm.tsx where the VM owns Effect/Atom state, formatting, and actions, and the component only subscribes and renders.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: effect-react-vm Download link: https://github.com/mpsuesser/pi-effect-harness/archive/main.zip#effect-react-vm Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.