Use when building live network traffic visualization UI.
Scanned 9/10/2026
Install to Claude Code
Skills Directorynpx -y skills add LoopyLuci/Skills --skill realtime-dashboard --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Realtime Dashboard?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/loopyluci-realtime-dashboard)More formats (shields.io, HTML) on the badges page.
---
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`
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
Ultra-compressed communication mode. Cuts token usage ~75% by speaking like caveman while keeping full technical accuracy. Supports intensity levels: lite, full (default), ultra, wenyan-lite, wenyan-full, wenyan-ultra. Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens", "be brief", or invokes /caveman. Also auto-triggers when token efficiency is requested.
