Service mesh visualization pattern
Skill kjuhwa/skills-hub/skills/design/service-mesh-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 service-mesh-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
Rendering sidecar proxies, control plane, and east-west traffic flows as an interactive topology graph
SKILL.md
2.0 KB, 352 tokens by cl100k_base, as published. Nobody here has run it
service-mesh-visualization-pattern
Service mesh visualization requires a layered rendering approach: the data plane (sidecar proxies attached to each workload) sits on one visual tier, while the control plane (xDS/pilot components issuing config) hovers above with dashed config-push arrows pointing down to each sidecar. Render services as rounded rectangles with an attached proxy "ear" (small hexagon) to make the sidecar pattern visually explicit — users should never confuse a service node with its proxy. Use directed edges for L7 request flows with color-coding by protocol (HTTP blue, gRPC purple, TCP gray) and animate packet dots along the edge to convey live throughput.
For mesh-traffic-visualizer and sidecar-proxy-playground, the topology graph should support drill-down: clicking a sidecar reveals its listener/cluster/route config (Envoy-style), and clicking an edge reveals the retry policy, circuit breaker state, and mTLS handshake status. Overlay mode is critical — toggle between traffic-view (RPS, latency heatmap on edges), security-view (mTLS enabled/disabled per edge, SPIFFE identity on nodes), and policy-view (which AuthorizationPolicy or VirtualService applies to each edge). Use force-directed layout with namespace clustering so services in the same namespace gravitate together.
The mesh-policy-composer variant extends this by making edges clickable policy targets: drag-and-drop a policy card onto an edge to attach it, with immediate visual feedback showing affected traffic flows highlighted. Persist camera position and expanded nodes in URL query params so users can share specific mesh views. Always show a legend panel explaining sidecar/ingress-gateway/egress-gateway iconography — mesh topology is unfamiliar to many users and implicit symbolism fails.
Gives 0 of the 12 instructions most data analysis skills give in 352 tokens
Counted across 286 of the 286 authors here whose files we hold, read 2026-08-06
- use excel formulas instead of hardcoded calculated valuesin 35 of 286, across 7 files
- match existing template conventions when modifying filesin 35 of 286, across 7 files
- document sources for all hardcoded valuesin 35 of 286, across 7 files
- write minimal concise python codein 35 of 286, across 7 files
- place all assumptions in separate assumption cellsin 32 of 286, across 5 files
- apply industry-standard color coding to financial modelsin 31 of 286, across 5 files
- format years as text stringsin 30 of 286, across 3 files
- recalculate formulas using recalc.py after modificationsin 30 of 286, across 3 files
- format negative numbers using parenthesesin 30 of 286, across 3 files
- fix all identified formula errors before finishingin 27 of 286, across 1 file
- use colorblind-safe palettesin 19 of 286, across 12 files
- Name tests after the prevented bugin 13 of 286, across 8 files
Said here and by no other author read
- put data plane and control plane on separate visual tiers
- render services as rounded rectangles with attached proxy hexagons
- use directed edges for L7 request flows
- color-code edges by protocol
- animate packet dots along edges
- support drill-down on sidecars and edges
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.