ワンクリックで
spinder-event-management
Create, dispatch, and listen to custom events in the Spinder app using the Zod-validated event system.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
メニュー
Create, dispatch, and listen to custom events in the Spinder app using the Zod-validated event system.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Create and manage expense categorization buckets in the Spinder app, including filtering logic and data aggregation.
Create new Lit-based components for the Spinder expense tracking app, following the project's coding standards and architecture patterns.
Debug issues in the Spinder expense tracking app, including transaction processing, UI rendering, and data flow problems.
Create new pages and routes in the Spinder application, following the routing architecture and page component patterns.
Handle CSV parsing, transaction validation, and data processing for the Spinder expense tracking app.
Create new Zod-based type definitions for the Spinder expense tracking app, following the project's type organization patterns.
| name | spinder-event-management |
| description | Create, dispatch, and listen to custom events in the Spinder app using the Zod-validated event system. |
This skill helps implement the custom event system used throughout the Spinder application for component communication, following the Zod-validated event pattern.
Use this skill when you need to:
The Spinder event system uses:
src/client/event.<event-name>.tssrc/client/util.events.tsdispatch utilityimport z from "zod";
export const ExampleEventName = z.literal("ExampleEvent");
export type ExampleEventName = z.infer<typeof ExampleEventName>;
export const ExampleEventDetail = z.object({
someData: z.string(),
count: z.number().optional(),
});
export type ExampleEventDetail = z.infer<typeof ExampleEventDetail>;
export const ExampleEventData = z.object({
name: ExampleEventName,
detail: ExampleEventDetail,
});
export type ExampleEventData = z.infer<typeof ExampleEventData>;
export const ExampleEvent = (someData: string, count?: number): ExampleEventData => ({
name: ExampleEventName.value,
detail: { someData, count },
});
In src/client/util.events.ts, add your event to the SpinderEvent union:
export const SpinderEvent = z.union([
// ... existing events
ExampleEventData,
// ... more events
]);
Use the dispatch utility function to send events:
import { dispatch } from "./util.events.js";
import { ExampleEvent } from "./event.example.js";
// In a component method
private handleAction(): void {
dispatch(this, ExampleEvent("some value", 42));
}
Listen to events in components or providers:
import { ExampleEvent } from "./event.example.js";
override connectedCallback(): void {
super.connectedCallback();
this.addEventListener(ExampleEvent.name, this.handleExampleEvent);
}
private handleExampleEvent = (event: Event): void => {
const customEvent = event as CustomEvent;
const eventData = customEvent.detail as ExampleEventDetail;
// Handle the event
console.log(eventData.someData, eventData.count);
};
event.<kebab-case>.ts<EventName>EventComponents dispatch events that providers listen to for state updates.
Providers update context that components consume.
Use events for cross-component communication through a common parent.
stopPropagation() if needed with stopProp() utility