wode-emittery-pattern

Enforce event-driven React architecture decoupling Zustand actions from side effects via Emittery.

7|2|Updated Feb 25, 2026
One-click install
npx skills add https://github.com/wenerme/ai --skill wode-emittery-pattern
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wode-emittery-pattern
Source: https://github.com/wenerme/ai/tree/main/skills/wode-emittery-pattern
Command: npx skills add https://github.com/wenerme/ai --skill wode-emittery-pattern

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves tightly coupled UI/store logic by forcing inter-component communication and side-effect handling to use a consistent event-driven architecture instead of embedding side effects inside state actions.

Core Features & Use Cases

  • Typed event contracts: Use as const event type objects and strongly typed emitter/data mappings to keep event payloads correct end-to-end.
  • Store emits only: Zustand (or store) actions only emit events and never run side effects, improving testability and separation of concerns.
  • Sidecar handlers: Side-effects like toasts, confirms, and network requests live in sidecar components that subscribe to emitted events using a listener hook pattern.
  • Clear naming & structure: Enforce Module:Action event naming to keep large apps organized and discoverable.

Quick Start

Use wode-emittery-pattern when implementing a Zustand store and React sidecar so that store actions emit typed Emittery events and the sidecar components perform the confirm/toast/network work.

Frequently Asked Questions about wode-emittery-pattern

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

FAQPage Schema
How do I decouple side effects from Zustand store actions in React?

To decouple side effects from Zustand store actions, enforce an event-driven architecture where store actions only emit type-safe Emittery events, allowing sidecar components to handle side-effect execution independently.

What is the sidecar pattern for React event-driven architecture?

The sidecar pattern isolates side-effect logic like toasts, confirms, and network requests into dedicated sidecar components that subscribe to typed Emittery events emitted by Zustand store actions.

How do I set up typed event contracts with Emittery in TypeScript?

Set up typed event contracts by defining `as const` event type objects in `Module:Action` form and creating strongly typed emitter and data payload mappings to ensure type safety end-to-end.

Can I use Emittery for module-scoped inter-component communication in React?

Yes, you can use Emittery for module-scoped inter-component communication by applying a listener hook pattern that allows sidecar components to react to typed event payloads emitted across module boundaries.

Why should store actions only emit events instead of running side effects?

Store actions should only emit events to improve testability and separation of concerns, ensuring tightly coupled UI and store logic is replaced by a consistent event-driven architecture without embedded side effects.