resilient-ws-ui

What problem does it solve?

WebSocket connections in browser applications frequently fail silently due to page freezes, IP address changes, proxy/load balancer idle timeouts, and browser-specific bugs like Firefox's stale connection issue, leaving both the application and user unaware of the broken connection. This Skill provides proven patterns to eliminate these silent failures and ensure users always have accurate, accessible visibility into connection health.

Core Features & Use Cases

• End-to-end connection reliability: Implements a four-state connection state machine, application-level heartbeats with per-ping nonces, exponential backoff reconnection with full jitter, overlapping failover during stale grace periods, and page lifecycle integration to handle tab freezes, BFCache, IP changes, and network disruptions.
• Accessible user-facing health indicators: Provides guidelines for a compact, always-on connection status widget with non-color state channels (color, motion, shape), countdown rings for waiting phases, detailed tooltips with RTT and packet loss data, bounded event logs, and document title state mirroring for hidden tabs.
• Use Case: Ideal for real-time web applications like live dashboards, chat tools, and data streaming services that need to maintain uninterrupted connectivity across network and browser lifecycle events, while keeping users accurately informed of connection status without misleading or annoying them.

Quick Start

Use the resilient-ws-ui skill to implement a WebSocket connection manager with heartbeat monitoring, automatic reconnection, and a visual connection status indicator for your web application.