{
  "instruction": "Show connection state to users when the real-time connection is degraded",
  "relevant_when": "Agent implements a client-side UI that depends on a WebSocket, SSE, or real-time connection for displaying live data",
  "context": "When the real-time connection drops, the user sees stale data with no indication that anything is wrong. The UI must show connection state (connecting, connected, reconnecting, disconnected) so users understand why data may be stale.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/realtime-web-patterns/SKILL.md",
      "tile": "tessl-labs/realtime-web-patterns@0.2.0"
    }
  ],
  "checklist": [
    {
      "name": "connection-state-tracked",
      "rule": "Client code tracks connection state (at minimum: connected, reconnecting, disconnected) as application state that the UI can render",
      "relevant_when": "Agent implements real-time client connection with a UI"
    },
    {
      "name": "connection-status-displayed",
      "rule": "The UI shows a visible indicator (banner, toast, or status badge) when the connection is lost or reconnecting, using role='status' and aria-live='polite' for accessibility",
      "relevant_when": "Agent implements real-time client connection with a UI"
    }
  ]
}