effect-react-composition

Compose React component APIs and wire reactive state with Effect Atom.

22|1|Updated Apr 14, 2026

Search Tags:#state management #react #ui architecture #component composition #effect #atom #asyncresult

Ready to run

npx skills add https://github.com/mpsuesser/pi-effect-harness --skill effect-react-composition

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: effect-react-composition
Source: https://github.com/mpsuesser/pi-effect-harness/tree/main/harnesses/effect/skills/effect-react-composition
Command: npx skills add https://github.com/mpsuesser/pi-effect-harness --skill effect-react-composition

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you build React UIs without boolean-prop configuration sprawl by guiding you toward composable component structure backed by Effect Atom reactive state.

Core Features & Use Cases

Composition-first component APIs that replace boolean prop anti-patterns with explicit, reusable component pieces.
Effect Atom state integration using Atoms (including derived atoms and AsyncResult-based state) for reactive reads and safe async updates.
Component module pattern + state lifting guidance so related UI parts behave like Effect modules, with shared state lifted to the correct level for predictable composition.

Quick Start

Use effect-react-composition to redesign your React component API so it composes smaller components instead of taking boolean props, and then wire shared state through Effect Atom so the UI updates reactively.

Frequently Asked Questions about effect-react-composition

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

FAQPage Schema

How do I remove boolean props from my React component API?▼

To remove boolean props from React components, break monolithic configurations into smaller, explicit composable pieces. This pattern uses smaller, explicit component modules instead of boolean toggles, making UI structure predictable and reusable.

How does Effect Atom state work with React?▼

Effect Atom state provides reactive reads and safe async updates in React. It uses Atoms and derived Atoms alongside AsyncResult-based state updates to handle shared state and structured error handling without manual subscription boilerplate.

What is the best way to manage shared state in React without boolean prop sprawl?▼

The best way to manage shared state without boolean prop sprawl is lifting state to the correct level using Effect Atom. This enforces state lifting discipline and organizes related UI parts into namespace-style modules for predictable composition.

Can I use Effect v4 for async state updates in React?▼

Yes, you can use Effect v4 for async state updates in React. Effect v4 provides the reference for implementing AsyncResult-based state updates, ensuring structured error handling and safe asynchronous flows within your reactive UI.

When should I lift React component state to a shared Atom?▼

You should lift React component state to a shared Atom when related UI parts need predictable composition. State lifting discipline ensures shared state sits at the correct level, allowing namespace-style module organization to behave like Effect modules.