react-vm

Implement the VM pattern with Effect and Effect-Atom for React state management.

68|13|Updated Aug 9, 2025
One-click install
npx skills add https://github.com/kriegcloud/beep-effect --skill react-vm-kriegcloud
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-vm
Source: https://github.com/kriegcloud/beep-effect/tree/main/.repos/beep-effect/.claude/skills/react-vm
Command: npx skills add https://github.com/kriegcloud/beep-effect --skill react-vm-kriegcloud

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a robust pattern for managing frontend state in React applications, ensuring that components remain pure renderers and all complex logic resides in View Models (VMs).

Core Features & Use Cases

  • Decoupled State Management: Separates UI logic from presentation, making components simpler and more testable.
  • Reactive State: Leverages Effect-Atom for efficient, fine-grained updates.
  • Testable VMs: View Models are built using Effect layers, allowing for easy mocking and testing.
  • Use Case: Building a complex dashboard with multiple interactive widgets where each widget's state and logic needs to be managed independently and tested thoroughly.

Quick Start

Use the react-vm skill to implement a ViewModel for a React component that manages user authentication state.

Frequently Asked Questions about react-vm

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

FAQPage Schema
What is the best way to decouple complex state logic from React components?

Using the View Model pattern for React state management decouples complex logic from components, keeping UI elements as pure renderers while VMs handle interactions and domain transformations.

How do I make frontend state management testable in React?

Build View Models using Effect layers to make frontend state management testable, allowing deterministic task execution, easy mocking, and in-depth information retrieval for React components.

How does reactive programming work with React state management?

Reactive programming in React uses Effect-Atom to manage state through atoms, providing efficient, fine-grained updates that automatically trigger UI re-renders when underlying View Model data changes.

Can I use Effect layers to manage independent widget states in a React dashboard?

Yes, Effect layers manage independent widget states in a React dashboard by transforming domain entities into UI-ready outputs and handling user interactions via actions within isolated View Models.

When do I need a View Model pattern for frontend architecture?

You need a View Model pattern for frontend architecture when building complex interactive interfaces like dashboards, requiring components to remain pure renderers while logic is independently managed and tested.

Does this View Model approach require external dependencies for React state management?

This React state management approach relies on Effect and Effect-Atom to implement reactive View Models, bridging domain services and UI without requiring additional external state libraries.