Real-Time Monitoring Dashboard
When to use: Building real-time monitoring interfaces for DevOps, system health, live metrics, factory floors, or any scenario requiring live-updating dashboards.
npx skills add real-time-monitoring-dashboardgit clone https://github.com/skillhub-community/real-time-monitoring-dashboard.gitDescription
A real-time monitoring dashboard framework designed for live-updating data streams. Core components: status indicator badges (green/yellow/red/purple) with configurable thresholds and pulse animations for critical states; streaming line/area charts that append new data points and scroll the time window smoothly (last 5 min / 15 min / 1 hour / 24 hours toggle); alert notification panel with severity levels (info/warning/critical), audible alert option, and acknowledgment workflow; and a metrics grid showing current values with delta arrows (up/down) and mini sparklines showing recent trend.
Architecture: WebSocket-first design with automatic reconnection and exponential backoff; falls back to polling at configurable intervals when WebSocket is unavailable. Includes a data adapter layer — connect to Prometheus, Datadog, custom REST/WebSocket endpoints, or a mock data generator for development. Alert rules engine: define conditions (value > threshold, rate of change, anomaly detection via moving average + standard deviation bands). All charts use requestAnimationFrame for smooth real-time rendering without jank.
AI Hub
Need a model endpoint?
AI Hub is an OpenAI-compatible endpoint for Cursor, Claude Code, and Agent workflows.
Open AI Hub