Realtime Dashboard

Name: Realtime Dashboard
Author: LoopyLuci

ASecurity

Use when building live network traffic visualization UI.

2 stars
0 votes
0 copies
3 views
Added September 10, 2026

ai-agentsgo

Works with

Security analysis

A100/100

Scanned September 10, 2026

npx -y skills add LoopyLuci/Skills --skill realtime-dashboard --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Realtime Dashboard?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Realtime Dashboard

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/loopyluci-realtime-dashboard/badge)](https://www.skillsdirectory.com/skills/loopyluci-realtime-dashboard)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

---
name: realtime-dashboard
title: Real-Time Dashboard
description: Use when building live network traffic visualization UI.
category: networking
tags: [dashboard, realtime, visualization, svelte, chart, ui]
---

# Real-Time Dashboard

**Trigger**: Use when implementing real-time traffic visualization for the web UI.

**Libraries**: Svelte 5, Chart.js/D3.js, WebSocket (for live updates), Tailwind CSS

**Implementation**: WebSocket connection to MCP server for live event stream. Chart.js for traffic graphs (area/line for throughput, pie for protocol distribution). Real-time query log table with infinite scroll. Gauges for block rate, latency, active connections. Auto-refresh every 1s for critical metrics. Dark theme with glass-morphism design. Drill-down from summary to per-flow detail.

**Connected**: `traffic-analyzer`, `bandwidth-monitor`, `connection-monitor`, `traffic-historical`, `mcp-network-server`, `svelte-web-dashboard`