skills.rest
lambdasolver2
lambdasolver2COMMUNITY
Explore all skills by this author →
GitHub

effect-react-vm

Implement View Model architecture for React applications using Effect and Effect-Atom.

1|Updated Aug 24, 2026
Search Tags:#typescript#state management#frontend#react#effect#atom#view model
One-click install
npx skills add https://github.com/lambdasolver2/opencode-effect-harness --skill effect-react-vm-lambdasolver2
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: effect-react-vm
Source: https://github.com/lambdasolver2/opencode-effect-harness/tree/main/packages/module-typescript/assets/skills/effect-react-vm
Command: npx skills add https://github.com/lambdasolver2/opencode-effect-harness --skill effect-react-vm-lambdasolver2

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires effect, @effect/atom-react.

What problem does it solve? Building React frontends often leads to components cluttered with formatting logic, business rules, and manual async state management. This Skill guides you to implement the View Model (VM) pattern with Effect v4 and Effect-Atom, keeping components as pure renderers while VMs handle all domain-to-UI transformation. ## Core Features & Use Cases - VM Architecture Pattern: Enforces the golden rule of zero UI logic—VMs transform domain entities into UI-ready values (formatted dates, display names, computed flags) while components only subscribe and render. - Atom-Based State Management: Uses Atom.fn with Effect.fnUntraced for async actions with automatic waiting flags and AsyncResult states, plus Atom.family for list item VMs and Atom.searchParam for URL state. - Testable Design: VMs are plain Effect layers testable without a UI by building the layer with a fresh AtomRegistry and mocked services. - Use Case: Building a wallet connection component where the VM produces displayAddress and connection state as a Data.TaggedEnum state machine, while the component only pattern matches and renders. ## Quick Start Ask the AI to create a React component with a View Model using Effect and Effect-Atom for a feature like a wallet connector or consent list.

Frequently Asked Questions about effect-react-vm

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement the View Model pattern in React with Effect?▼

Create a VM file alongside each parent component containing an interface, a Context.Service tag, and a default { tag, layer } export. Define atoms inside Layer.effect, transform domain data into UI-ready values, and consume the VM in the component via a useVM hook.

How to handle async actions with Effect-Atom in React?▼

Use Atom.fn with Effect.fnUntraced to define async actions, which returns an AtomResultFn with an automatic waiting flag and AsyncResult states. In components, call useAtom to get the [result, trigger] tuple and render states with AsyncResult.matchWithWaiting.

What is the difference between a View Model and a service layer in Effect?▼

A VM is strictly a UI construct that exists only when paired with a component, living in components/X/X.vm.ts. Service layers hold non-UI shared business logic in services/ or lib/, and VMs compose over them using standard Effect layer composition.

Can I test Effect View Models without rendering React components?▼

Yes, build the VM layer with Layer.build, provide a fresh AtomRegistry and mocked services via Layer.succeed, then read atom values directly from the registry. Create a fresh VM per test to isolate state.

How do I manage URL search params with Effect-Atom instead of useEffect?▼

Use Atom.searchParam to create writable atoms bound to URL parameters, optionally with a Schema for parsing values like numbers. This replaces useEffect plus useSearchParams with reactive atoms that components subscribe to directly.

Related Skills

Explore More Software Engineering Skills→
front-depictionfront-depiction

react-vm

Define VM interfaces and layers for React UIs using Effect and Effect-Atom.

Community
Advanced
paarths-collabpaarths-collab
13

integration-clerk

Connect Clerk authentication to a self-hosted Hermes agent over SSH.

Community
Advanced
mazicimertmazicimert

integration-test-scaffold

Generate cross-module integration test harnesses with mock servers and in-memory stores.

Community
Advanced
armanzeroeightarmanzeroeight
29

state-management-advisor

Advise on selecting React state management solutions with decision trees and code examples.

Community
Intermediate