Define VM interfaces and layers for React UIs using Effect and Effect-Atom.
npx skills add https://github.com/front-depiction/claude-setup --skill react-vm
Please help me install this Agent Skill. Skill: react-vm Source: https://github.com/front-depiction/claude-setup/tree/main/skills/react-vm Command: npx skills add https://github.com/front-depiction/claude-setup --skill react-vm
This Skill introduces a reusable VM (View Model) pattern for React applications, enabling UI components to stay pure while VMs bridge domain services and UI layers.
Define a VM for a component using the React VM pattern, wire it into a React component via the VM runtime, and write a small test that renders the VM with a mock service.
High-intent search queries and answers about installing and using this skill.
To separate domain logic in React, use a View Model pattern to bridge domain services and UI layers, enforcing components to handle UI-only rendering while VMs manage formatting and derived state.
You can test state management logic without rendering by writing VM-first tests that inject mock services into scoped Effect layers, verifying the View Model behavior independently of the React component tree.
Yes, this React VM pattern integrates with Effect and Effect-Atom to model application state, services, and actions through composable layers, bridging domain services directly to the UI.
A View Model pattern for React is an architectural approach that turns domain inputs into UI-ready View Models, keeping UI components pure by moving formatting and derived state into a dedicated VM layer.
To wire a View Model into a React component, define the VM interface, connect it through the VM runtime, and enforce the component to strictly handle UI-only rendering using the provided Effect layers.
semicolon-devteamWrite TypeScript/React code with DDD architecture and TDD workflow.
mpsuesserBuild reactive ViewModel state for React components using Effect and Effect-Atom.
mpsuesserImplement reactive React state management with Effect Atoms and async actions.
quanngynxSeparate React view rendering from data-fetching and business logic.
