Agent skill
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.
Install this agent skill to your Project
npx add-skill https://github.com/curiositech/some_claude_skills/tree/main/.claude/skills/websocket-streaming
Metadata
Additional technical details for this skill
- tags
-
websocket streaming real-time-updates live-streaming
- category
- DevOps & Site Reliability
- pairs with
-
[ { "skill": "reactflow-expert", "reason": "WebSocket connections deliver live DAG state updates to ReactFlow visualization dashboards" }, { "skill": "real-time-collaboration-engine", "reason": "WebSocket transport powers the real-time communication layer for collaborative editing" }, { "skill": "llm-streaming-response-handler", "reason": "WebSocket is an alternative transport to SSE for bidirectional LLM streaming" } ]
SKILL.md
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
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
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
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)
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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
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).
project-management-guru-adhd
Expert project manager for ADHD engineers managing multiple concurrent projects. Specializes in hyperfocus management, context-switching minimization, and parakeet-style gentle reminders. Activate on 'ADHD project management', 'context switching', 'hyperfocus', 'task prioritization', 'multiple projects', 'productivity for ADHD', 'task chunking', 'deadline management'. NOT for neurotypical project management, rigid waterfall processes, or general productivity advice without ADHD context.
large-scale-map-visualization
Master of high-performance web map implementations handling 5,000-100,000+ geographic data points. Specializes in Leaflet.js optimization, Supercluster algorithms, viewport-based loading, canvas rendering, and progressive disclosure UX patterns.
adhd-design-expert
Designs digital experiences for ADHD brains using neuroscience research and UX principles. Expert in reducing cognitive load, time blindness solutions, dopamine-driven engagement, and compassionate design patterns. Activate on 'ADHD design', 'cognitive load', 'accessibility', 'neurodivergent UX', 'time blindness', 'dopamine-driven', 'executive function'. NOT for general accessibility (WCAG only), neurotypical UX design, or simple UI styling without ADHD context.
liaison
Translate multi-agent ecosystem activity into human-readable status briefings, decision requests, and progress summaries. Use for 'status update', 'brief me', 'what happened', 'summarize progress'. NOT for project planning (use project-management-guru-adhd), code review, or technical documentation.
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.
Didn't find tool you were looking for?