Load balancer visualization pattern
Skill kjuhwa/skills-hub/skills/design/load-balancer-visualization-pattern
Self-correcting knowledge corpus for Claude Code — 9 stable shape clusters, bias-correction pipeline baked into contribution flow. 47 papers, 45 techniques, 1.1k skills.
npx -y skills add kjuhwa/skills-hub --skill load-balancer-visualization-patternAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Canvas/SVG-based real-time visualization for load balancer request distribution across backend pools
SKILL.md
2.1 KB, 368 tokens by cl100k_base, as published. Nobody here has run it
load-balancer-visualization-pattern
Render the load balancer topology as a three-layer visual hierarchy: incoming request stream (left), the balancer node with its active algorithm badge (center), and a fan-out of backend servers with health/load indicators (right). Each backend should expose at least four visual channels — a fill-level bar for current connection count, a color ramp (green→amber→red) for CPU/latency, a pulsing ring when a request is actively being serviced, and a dimmed/struck-through state for unhealthy or drained nodes. Draw the routing decision as an animated path from the balancer to the chosen backend, with the path color keyed to the algorithm (round-robin=blue, least-connections=green, weighted=purple, ip-hash/consistent-hash=orange) so viewers can trace why each request landed where it did.
For consistent-hash-ring specifically, layer a second view that shows the hash ring as a circle with virtual nodes as tick marks on the circumference; when a request arrives, draw an arc from the request's hash position clockwise to the owning virtual node. When nodes are added or removed, highlight only the arc segments whose ownership changed — this is the visual payoff that distinguishes consistent hashing from modulo sharding and must be preserved. Always keep a small "algorithm comparison" sidebar with live counters (requests served, std-dev of load, rebalance cost) so viewers can connect the animation to quantitative outcomes.
Keep the animation frame budget tight: cap request particles at ~200 concurrent, use requestAnimationFrame with a fixed timestep for the simulation and interpolate rendering between ticks, and debounce backend metric redraws to 10 Hz. Use a single <canvas> for particles and an overlay SVG for static topology — mixing everything in SVG collapses at >50 concurrent requests.