websocket-streaming
Implements real-time bidirectional communication between DAG execution engines and visualization dashboards via WebSocket. Covers connection management, typed event protocols, reconnection with backoff, and React hook integration. Activate on "WebSocket", "real-time updates", "live streaming", "execution events", "state streaming", "push notifications". NOT for HTTP REST APIs, server-sent events (SSE), or general networking.
Best use case
websocket-streaming is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Implements real-time bidirectional communication between DAG execution engines and visualization dashboards via WebSocket. Covers connection management, typed event protocols, reconnection with backoff, and React hook integration. Activate on "WebSocket", "real-time updates", "live streaming", "execution events", "state streaming", "push notifications". NOT for HTTP REST APIs, server-sent events (SSE), or general networking.
Teams using websocket-streaming 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/websocket-streaming/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How websocket-streaming Compares
| Feature / Agent | websocket-streaming | 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?
Implements real-time bidirectional communication between DAG execution engines and visualization dashboards via WebSocket. Covers connection management, typed event protocols, reconnection with backoff, and React hook integration. Activate on "WebSocket", "real-time updates", "live streaming", "execution events", "state streaming", "push notifications". NOT for HTTP REST APIs, server-sent events (SSE), or general networking.
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
# WebSocket Streaming
Real-time bidirectional communication between DAG execution engines and dashboards. Typed event protocols, connection management, and React hook integration.
---
## When to Use
✅ **Use for**:
- Streaming DAG node state changes to a visualization dashboard
- Sending human gate decisions from dashboard to execution engine
- Live cost ticker and progress updates during execution
- Bi-directional communication (not just server → client)
❌ **NOT for**:
- One-way server → client updates (consider SSE, simpler)
- REST API design (use `api-architect`)
- Polling-based status checks (WebSocket replaces polling)
---
## Event Protocol
### Server → Client Events
```typescript
type ServerEvent =
| { type: 'node_state'; node_id: string; status: NodeStatus; output?: any; metrics?: NodeMetrics }
| { type: 'edge_active'; from: string; to: string }
| { type: 'dag_mutated'; mutation: DAGMutation }
| { type: 'cost_update'; spent: number; budget: number; remaining: number }
| { type: 'execution_complete'; results: Record<string, any> }
| { type: 'human_gate_waiting'; node_id: string; presentation: GatePresentation }
| { type: 'error'; node_id?: string; message: string };
```
### Client → Server Events
```typescript
type ClientEvent =
| { type: 'human_decision'; node_id: string; decision: 'approve' | 'reject' | 'modify'; feedback?: string }
| { type: 'pause_execution' }
| { type: 'resume_execution' }
| { type: 'cancel_execution' };
```
---
## React Hook: useDAGStream
```typescript
import { useEffect, useRef, useCallback } from 'react';
export function useDAGStream(dagId: string, store: DAGStore) {
const wsRef = useRef<WebSocket | null>(null);
const reconnectAttempt = useRef(0);
const connect = useCallback(() => {
const ws = new WebSocket(`/api/dags/${dagId}/stream`);
ws.onopen = () => { reconnectAttempt.current = 0; };
ws.onmessage = (event) => {
const msg = JSON.parse(event.data) as ServerEvent;
switch (msg.type) {
case 'node_state':
store.updateNodeData(msg.node_id, {
status: msg.status, output: msg.output, metrics: msg.metrics,
});
break;
case 'cost_update':
store.setCostState({ spent: msg.spent, budget: msg.budget });
break;
case 'dag_mutated':
store.applyMutation(msg.mutation);
break;
case 'execution_complete':
store.setExecutionComplete(msg.results);
break;
}
};
ws.onclose = () => {
// Reconnect with exponential backoff (max 30s)
const delay = Math.min(1000 * 2 ** reconnectAttempt.current, 30000);
reconnectAttempt.current++;
setTimeout(connect, delay);
};
wsRef.current = ws;
}, [dagId, store]);
useEffect(() => { connect(); return () => wsRef.current?.close(); }, [connect]);
// Send client events
const send = useCallback((event: ClientEvent) => {
wsRef.current?.send(JSON.stringify(event));
}, []);
return { send };
}
```
---
## Server Implementation (Node.js)
```typescript
import { WebSocketServer } from 'ws';
const wss = new WebSocketServer({ noServer: true });
// Per-DAG rooms
const rooms = new Map<string, Set<WebSocket>>();
function broadcast(dagId: string, event: ServerEvent) {
const clients = rooms.get(dagId);
if (!clients) return;
const msg = JSON.stringify(event);
for (const ws of clients) {
if (ws.readyState === ws.OPEN) ws.send(msg);
}
}
// Usage in execution engine:
function onNodeComplete(dagId: string, nodeId: string, result: any) {
broadcast(dagId, {
type: 'node_state',
node_id: nodeId,
status: 'completed',
output: result.output,
metrics: result.metrics,
});
}
```
---
## Anti-Patterns
### No Reconnection Logic
**Wrong**: WebSocket closes and the dashboard shows stale data forever.
**Right**: Exponential backoff reconnection (1s, 2s, 4s, 8s... max 30s). Resync state on reconnect.
### Sending Full State on Every Event
**Wrong**: Broadcasting the entire DAG state on every node update.
**Right**: Send only the delta: which node changed, to what status. The client applies the update to its local store.
### No Typed Protocol
**Wrong**: Sending untyped JSON objects and parsing with `any`.
**Right**: Define `ServerEvent` and `ClientEvent` union types. Exhaustive switch on `msg.type`.Related Skills
llm-streaming-response-handler
Build production LLM streaming UIs with Server-Sent Events, real-time token display, cancellation, error recovery. Handles OpenAI/Anthropic/Claude streaming APIs. Use for chatbots, AI assistants, real-time text generation. Activate on "LLM streaming", "SSE", "token stream", "chat UI", "real-time AI". NOT for batch processing, non-streaming APIs, or WebSocket bidirectional chat.
skill-coach
Guides creation of high-quality Agent Skills with domain expertise, anti-pattern detection, and progressive disclosure best practices. Use when creating skills, reviewing existing skills, or when users mention improving skill quality, encoding expertise, or avoiding common AI tooling mistakes. Activate on keywords: create skill, review skill, skill quality, skill best practices, skill anti-patterns. NOT for general coding advice or non-skill Claude Code features.
3d-cv-labeling-2026
Expert in 3D computer vision labeling tools, workflows, and AI-assisted annotation for LiDAR, point clouds, and sensor fusion. Covers SAM4D/Point-SAM, human-in-the-loop architectures, and vertical-specific training strategies. Activate on '3D labeling', 'point cloud annotation', 'LiDAR labeling', 'SAM 3D', 'SAM4D', 'sensor fusion annotation', '3D bounding box', 'semantic segmentation point cloud'. NOT for 2D image labeling (use clip-aware-embeddings), general ML training (use ml-engineer), video annotation without 3D (use computer-vision-pipeline), or VLM prompt engineering (use prompt-engineer).
wisdom-accountability-coach
Longitudinal memory tracking, philosophy teaching, and personal accountability with compassion. Expert in pattern recognition, Stoicism/Buddhism, and growth guidance. Activate on 'accountability', 'philosophy', 'Stoicism', 'Buddhism', 'personal growth', 'commitment tracking', 'wisdom teaching'. NOT for therapy or mental health treatment (refer to professionals), crisis intervention, or replacing professional coaching credentials.
windows-95-web-designer
Modern web applications with authentic Windows 95 aesthetic. Gradient title bars, Start menu paradigm, taskbar patterns, 3D beveled chrome. Extrapolates Win95 to AI chatbots, mobile UIs, responsive layouts. Activate on 'windows 95', 'win95', 'start menu', 'taskbar', 'retro desktop', '95 aesthetic', 'clippy'. NOT for Windows 3.1 (use windows-3-1-web-designer), vaporwave/synthwave, macOS, flat design.
windows-3-1-web-designer
Modern web applications with authentic Windows 3.1 aesthetic. Solid navy title bars, Program Manager navigation, beveled borders, single window controls. Extrapolates Win31 to AI chatbots (Cue Card paradigm), mobile UIs (pocket computing). Activate on 'windows 3.1', 'win31', 'program manager', 'retro desktop', '90s aesthetic', 'beveled'. NOT for Windows 95 (use windows-95-web-designer - has gradients, Start menu), vaporwave/synthwave, macOS, flat design.
win31-pixel-art-designer
Expert in Windows 3.1 era pixel art and graphics. Creates icons, banners, splash screens, and UI assets with authentic 16/256-color palettes, dithering patterns, and Program Manager styling. Activate on 'win31 icons', 'pixel art 90s', 'retro icons', '16-color', 'dithering', 'program manager icons', 'VGA palette'. NOT for modern flat icons, vaporwave art, or high-res illustrations.
win31-audio-design
Expert in Windows 3.1 era sound vocabulary for modern web/mobile apps. Creates satisfying retro UI sounds using CC-licensed 8-bit audio, Web Audio API, and haptic coordination. Activate on 'win31 sounds', 'retro audio', '90s sound effects', 'chimes', 'tada', 'ding', 'satisfying UI sounds'. NOT for modern flat UI sounds, voice synthesis, or music composition.
wedding-immortalist
Transform thousands of wedding photos and hours of footage into an immersive 3D Gaussian Splatting experience with theatre mode replay, face-clustered guest roster, and AI-curated best photos per person. Expert in 3DGS pipelines, face clustering, aesthetic scoring, and adaptive design matching the couple's wedding theme (disco, rustic, modern, LGBTQ+ celebrations). Activate on "wedding photos", "wedding video", "3D wedding", "Gaussian Splatting wedding", "wedding memory", "wedding immortalize", "face clustering wedding", "best wedding photos". NOT for general photo editing (use native-app-designer), non-wedding 3DGS (use drone-inspection-specialist), or event planning (not a wedding planner).
webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. Activate on: Playwright, webapp testing, browser automation, E2E testing, UI testing. NOT for API-only testing without browser, unit tests, or mobile app testing.
web-weather-creator
Master of stylized atmospheric effects using SVG filters and CSS animations. Creates clouds, waves, lightning, rain, fog, aurora borealis, god rays, lens flares, twilight skies, and ocean spray—all with a premium aesthetic that's stylized but never cheap-looking.
web-wave-designer
Creates realistic ocean and water wave effects for web using SVG filters (feTurbulence, feDisplacementMap), CSS animations, and layering techniques. Use for ocean backgrounds, underwater distortion, beach scenes, ripple effects, liquid glass, and water-themed UI. Activate on "ocean wave", "water effect", "SVG water", "ripple animation", "underwater distortion", "liquid glass", "wave animation", "feTurbulence water", "beach waves", "sea foam". NOT for 3D ocean simulation (use WebGL/Three.js), video water effects (use video editing), physics-based fluid simulation (use canvas/WebGL), or simple gradient backgrounds without wave motion.