# Add Typed Events to React Feeds

Adding feed events often requires coordinated TypeScript, React, rendering, and WebSocket changes. This skill provides a focused workflow that follows existing project conventions.

## Install

```bash
npx skillstore add applelamps/add-event-type
```

## Metadata

- Status: approved
- Slug: applelamps-add-event-type
- Skillstore revision: r2
- Version status: missing
- Tree hash: daa12a307e54f0ee2857ba7927a67d6e8d0ad22d6144061fed640506be44669e
- Author: AppleLamps
- GitHub username: AppleLamps
- License: MIT
- Repository: https://github.com/AppleLamps/web-term/tree/main/.claude/skills/add-event-type
- Ref: 89edfdc710d0846129dcee6a929477b04f08052c
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/applelamps-add-event-type
- Manifest: https://skillstore.pages.dev/api/skills/applelamps-add-event-type/manifest

## Capabilities

- Reviews the existing EventType union and feed block components.
- Defines a typed interface for a new feed event.
- Adds the event interface to the existing TypeScript union.
- Creates a React block component using established project patterns.
- Connects the event to feed rendering and relevant WebSocket handling.
- Guides validation with a mock WebSocket event.

## Use Cases

- Display Search Results: Add a typed search result event and render its details in the frontend feed.
- Surface Agent Progress: Create progress events that show ongoing agent work in a consistent React block.
- Standardize Error Events: Introduce a structured error event and connect it to existing feed rendering.

## Prompt Templates

### Add a Basic Event

```
Add a new [event_name] event type with fields for [field_list]. Follow the existing feed component patterns.
```

### Add a Styled Event Block

```
Create a [event_name] event and React block. Reuse nearby Tailwind styles and explain each changed file.
```

### Connect a WebSocket Event

```
Add [event_name] across TypeScript types, feed rendering, and WebSocket handling. Include a mock event for validation.
```

### Extend the Feed End to End

```
Inspect existing feed patterns, then add [event_name] with [field_list]. Update types, rendering, transport handling, and focused tests without using any.
```

## Limitations

- Assumes the feed types and components are located in frontend/src/App.tsx.
- Provides a workflow and examples, not reusable implementation files.
- Does not define backend event production or transport protocols.
- Requires project-specific decisions for fields, styling, and rendering behavior.

## Best Practices

- Review nearby event interfaces and blocks before making changes.
- Keep event names in snake case and React component names in PascalCase.
- Test rendering with representative mock WebSocket events.

## Anti Patterns

- Do not use any when a concrete event interface can be defined.
- Do not add a union member without connecting its rendering path.
- Do not introduce unrelated styles when existing Tailwind patterns are suitable.

## Security Audit

- Audited at: 2026-07-23T05:15:52.18\+00:00
- Summary: All eight static findings are false positives caused by Markdown inline-code markers and fenced TypeScript examples. The skill contains no shell commands, executable backticks, prompt injection, or other semantic security concerns.

## Stats

- Views: 214
- Downloads: 9
- Favorites: 0
- Popularity score: 0