Agent skill · software engineering · aiskillstore
add-event-type
Add a new event type to the frontend feed system with corresponding React component. Use when user mentions "new event", "add event type", "event block", "new block type", or wants to display new agent output types.
Why this skill is useful
Provides specific TypeScript patterns and React component structure for adding new event types that the AI wouldn't reliably generate on its own.
What it needs
About 1k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Add Event Type Instructions 1. Read current event types in frontend/src/App.tsx: Find the EventType union type definition Review existing block components (UserMessageBlock, PlanBlock, TodoBlock, etc.) 2. Define the new event type interface: 3. Add to EventType union: 4. Create a new block component following existing patterns: 5. Add case to the feed rendering switch/conditional in the main component 6. Update WebSocket message handler if backend sends this event type Examples "Add a new 'searchresult' event type" "Create a block for displaying errors" "Add event type for progress updates" Guardrails Follow existing naming conventions (PascalCase components, snakecase event types) Use existing Tailwind classes for consistent styling Ensure TypeScript types are complete (no any) Test by sending mock event through WebSocket
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/add-event-type