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.