spinder-event-management

name	spinder-event-management
description	Create, dispatch, and listen to custom events in the Spinder app using the Zod-validated event system.

Spinder Event Management Skill

This skill helps implement the custom event system used throughout the Spinder application for component communication, following the Zod-validated event pattern.

When to Use

Use this skill when you need to:

• Create new custom events for component communication
• Dispatch events from components or providers
• Listen to events in other components or providers
• Implement event-driven data flow
• Add new event types to the system

Event Architecture

The Spinder event system uses:

• Zod schemas for type-safe event validation
• CustomEvent with bubbling and composition
• Centralized event type definitions
• Provider-based event handling

Steps to Create a New Event

1. Create event definition file at src/client/event.<event-name>.ts
2. Define Zod schemas for event name, detail, and data
3. Create event factory function that returns the event data
4. Add event to union type in src/client/util.events.ts
5. Dispatch events using the dispatch utility
6. Listen to events in components or providers

Event Definition Structure

import z from "zod";

export const ExampleEventName = z.();
   = z.< >;

   = z.({
  : z.(),
  : z.().(),
});
   = z.< >;

   = z.({
  : ,
  : ,
});
   = z.< >;

   = (: , ?: ):  ({
  : .,
  : { someData, count },
});