scaffold-event-display

What problem does it solve?

This Skill eliminates the manual, error-prone work of creating and registering Vue display components for new agent event types in the application's event timeline, saving development time and ensuring consistent UI patterns across all event displays.

Core Features & Use Cases

• Vue Component Generation: Creates a pre-structured Vue component for the new event type using the project's standard EventDisplayBase wrapper, with correct prop typing and slot layout.
• Automatic Resolver Registration: Updates the event component resolver to map the new event type to its display component, enabling automatic rendering in the agent event timeline.
• Convention Alignment: Guides selection of appropriate icons, alignment with backend event definitions and SDK types, and adherence to project UI standards.
• Real-World Use Case: When adding a new ToolCall event type to the agent system, this Skill generates its display component and registers it in the timeline in seconds, eliminating manual boilerplate code and resolver configuration work.

Quick Start

Invoke the scaffold-event-display skill with the name of your new agent event type (e.g., ToolCall) to generate its Vue display component and register it for timeline rendering.