一键导入
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