Canary release visualization pattern
Skill kjuhwa/skills-hub/skills/design/canary-release-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 canary-release-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
Split-lane visualization showing stable vs canary traffic flow with weighted percentage bands and promotion gates
SKILL.md
1.8 KB, 334 tokens by cl100k_base, as published. Nobody here has run it
canary-release-visualization-pattern
For canary-release dashboards, render two horizontal lanes stacked vertically — the top lane represents the stable (v1) fleet receiving (100 − N)% of traffic, and the bottom lane represents the canary (v2) fleet receiving N%. Animate request tokens as small dots flowing left-to-right along each lane, with the spawn rate on each lane proportional to its weight. Color-code by version (stable = blue/neutral, canary = amber/accent) and let token color shift to red when it encounters an error on the canary side, so failure concentration is immediately visible without reading numbers.
Above the lanes, place a weight slider (0%→100%) tied to the canary percentage, with discrete stop markers at typical rollout stages (1%, 5%, 25%, 50%, 100%). Below the lanes, draw a promotion timeline strip with vertical gate markers — each gate shows the SLO check (error rate, p99 latency, saturation) that must pass before the weight advances. Gates that pass turn green and the canary band visibly widens; gates that fail flash red and the band snaps back to the prior step, making rollback kinetically obvious.
Supplement with a small side panel of live delta metrics (canary error rate − stable error rate, latency delta, etc.) rendered as diverging bars centered on zero. Red bars extending right mean canary is worse; green bars extending left mean canary is better. This delta-centric framing is what separates a canary viz from a generic traffic-split viz: users care about relative health, not absolute.