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.
Best use case
add-event-type is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using add-event-type should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/add-event-type/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How add-event-type Compares
| Feature / Agent | add-event-type | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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:
```typescript
type NewEventType = {
type: 'new_type';
// Add required fields
};
```
3. Add to EventType union:
```typescript
type EventType = UserMessage | Plan | Todo | ... | NewEventType;
```
4. Create a new block component following existing patterns:
```typescript
function NewTypeBlock({ event }: { event: NewEventType }) {
return (
<div className="p-3 bg-zinc-800/50 rounded-lg border border-zinc-700/50">
{/* Render event data */}
</div>
);
}
```
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 'search_result' event type"
- "Create a block for displaying errors"
- "Add event type for progress updates"
## Guardrails
- Follow existing naming conventions (PascalCase components, snake_case event types)
- Use existing Tailwind classes for consistent styling
- Ensure TypeScript types are complete (no `any`)
- Test by sending mock event through WebSocketRelated Skills
agent-typescript-pro
Expert TypeScript developer specializing in advanced type system usage, full-stack development, and build optimization. Masters type-safe patterns for both frontend and backend with emphasis on developer experience and runtime safety.
Advanced Typescript Type Level
Master TypeScript type-level programming with conditional types, mapped types, template literals, and infer patterns. Use when writing advanced types, creating utility types, or solving complex type challenges.
advanced-typescript-patterns
Advanced TypeScript patterns for TMNL. Covers conditional types, mapped types, branded types, generic constraints, type inference, and utility type composition. Pure TypeScript patterns beyond Effect Schema.
advanced-types
Advanced TypeScript types including generics, conditionals, and mapped types
adding-persistent-event
Adds a new type of event that gets persisted to the event log. Use this when adding new kinds of write operations to the system or when adding new events to existing code.
add_type
gwexpyに新しい配列型（Array/Series/Field）とコレクションを実装する
add-event
Add an event/conference to your CV's relevant events list with intelligent data extraction, validation, and automatic commit generation
add-error-type
Add a new custom error type for domain-specific errors. Use when creating errors for specific business rules or HTTP status codes. Triggers on "add error", "custom error", "error type".
abuse-prevention
Abuse prevention - rate limiting, moderation, bad actors. Use when fighting abuse.
1k-adding-socket-events
Adds new WebSocket event subscriptions to OneKey. Use when implementing new socket events, handling server push messages, or adding real-time data subscriptions. Socket, WebSocket, event, subscription, push, real-time.
scaffold-bulk-review-prototypes
Review all prototypes at once for cross-prototype consistency, coverage gaps, ADR follow-through, and scope discipline. Use for a full audit of all prototypes.
qwen_training_data_miner_prototype
Qwen Training Data Miner (Prototype)