Websocket visualization pattern
Skill kjuhwa/skills-hub/skills/design/websocket-visualization-pattern
Self-correcting knowledge corpus for Claude Code — 9 stable shape clusters, bias-correction pipeline baked into contribution flow. 47 papers, 45 techniques, 1.1k skills.
npx -y skills add kjuhwa/skills-hub --skill websocket-visualization-patternAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Canvas/SVG-based frame-level visualization for WebSocket protocol state, handshake phases, and message flow
SKILL.md
1.6 KB, 306 tokens by cl100k_base, as published. Nobody here has run it
websocket-visualization-pattern
WebSocket visualizations benefit from a three-layer rendering model: (1) a connection-lifecycle timeline showing CONNECTING→OPEN→CLOSING→CLOSED states with color-coded transitions, (2) a bidirectional message lane (client↑ / server↓) where each frame is a rectangle whose width encodes payload size and whose fill encodes opcode (0x1 text, 0x2 binary, 0x8 close, 0x9 ping, 0xA pong), and (3) an overlay for control events (masking key, FIN bit, RSV reserved bits). Render with a fixed time axis scrolling left-to-right so live traffic and replay share the same coordinate system.
For handshake visualization specifically, split the HTTP upgrade into discrete animated steps: client GET with Sec-WebSocket-Key, server 101 with Sec-WebSocket-Accept (= base64(sha1(key + GUID))), then protocol switch. Expose the SHA-1 computation inline so learners see why the accept value is derived, not just that it is. Use monospace for headers, highlight the magic GUID 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 as an immutable constant.
Keep the canvas stateless and redraw from an event log on every frame — this makes scrubbing, pause/resume, and deterministic replay trivial, and avoids the mutable-DOM bugs that plague live-updated WS dashboards.