add-event-type
Add new event types to feed
Users need to display new types of agent output in the chat feed. This skill provides structured instructions for adding new event types with TypeScript interfaces, React components, and WebSocket integration.
์คํฌ ZIP ๋ค์ด๋ก๋
Claude์์ ์ ๋ก๋
์ค์ โ ๊ธฐ๋ฅ โ ์คํฌ โ ์คํฌ ์ ๋ก๋๋ก ์ด๋
ํ ๊ธ์ ์ผ๊ณ ์ฌ์ฉ ์์
ํ ์คํธํด ๋ณด๊ธฐ
"add-event-type" ์ฌ์ฉ ์ค์ ๋๋ค. Add a 'search_result' event type
์์ ๊ฒฐ๊ณผ:
- Defined SearchResultEventType interface with query and results array
- Created SearchResultBlock React component with result items
- Added 'search_result' to EventType union
- Added switch case in feed rendering
"add-event-type" ์ฌ์ฉ ์ค์ ๋๋ค. Create an error event type block
์์ ๊ฒฐ๊ณผ:
- Defined ErrorEventType interface with message and severity fields
- Created ErrorBlock React component with warning styling
- Added 'error' to EventType union
- Added error handling case in WebSocket message handler
"add-event-type" ์ฌ์ฉ ์ค์ ๋๋ค. Add a progress event type
์์ ๊ฒฐ๊ณผ:
- Defined ProgressEventType interface with percentage and status text
- Created ProgressBlock React component with progress bar
- Added 'progress' to EventType union
- Added case for real-time progress updates
๋ณด์ ๊ฐ์ฌ
์์ This skill contains only documentation with TypeScript code examples for adding event types to a React frontend. No executable code, scripts, network calls, filesystem access, or cryptographic operations exist. The static findings in the prompt are false positives from the scanner misinterpreting TypeScript syntax and markdown code block formatting.
์ํ ์์ธ
๐ ๋คํธ์ํฌ ์ ๊ทผ (1)
๐ ํ์ผ ์์คํ ์ก์ธ์ค (1)
โ๏ธ ์ธ๋ถ ๋ช ๋ น์ด (8)
ํ์ง ์ ์
๋ง๋ค ์ ์๋ ๊ฒ
Display agent output types
Add new block types to show different agent responses like search results, errors, or progress updates in the chat interface
Extend feed functionality
Create custom event displays for specialized agent capabilities beyond standard text and planning blocks
Add visualization components
Build new React components to visualize complex data like charts, tables, or formatted code in the feed
์ด ํ๋กฌํํธ๋ฅผ ์ฌ์ฉํด ๋ณด์ธ์
Add a new 'search_result' event type to display search results in the feed
Create an 'error' event type block that shows error messages with warning styling
Add a 'progress' event type with percentage and status text for tracking task progress
Add a 'chart' event type that accepts data points and renders a visualization in the feed
๋ชจ๋ฒ ์ฌ๋ก
- Follow existing naming conventions for consistency
- Complete TypeScript types without using 'any'
- Test new event types with mock WebSocket events
ํผํ๊ธฐ
- Skipping TypeScript type definitions
- Using inline styles instead of Tailwind classes
- Forgetting to update the event handler switch case
์์ฃผ ๋ฌป๋ ์ง๋ฌธ
What AI tools support this skill?
What event types can I add?
Do I need a React project?
Is my data safe?
Why is my new event not displaying?
How is this different from custom code?
๊ฐ๋ฐ์ ์ธ๋ถ ์ ๋ณด
ํ์ผ ๊ตฌ์กฐ
๐ SKILL.md