vibecoding.tech / registry

vizcn

An SVG viz registry built for coding agents first. 17 copy-paste forms, hand-drawn inline SVG — no d3, no recharts. Your agent picks a form by the question it answers; it never invents one.

github.com/eugeneshilow/vizcn · npm: vizcn

setup · hand it to your agent

Nobody wires viz libraries by hand anymore — your coding agent does. Paste this prompt into it; the agent reads the catalog, picks the right form for your data, installs and feeds it:

Add a data visualization to this project from the vizcn registry:

1. Fetch https://vibecoding.tech/vizcn/catalog.json — every form declares the
   question it answers, whenToUse, antiUse, and an `example` (reference
   usage); the top-level `skins` lists the visual registers.
2. Pick the form whose question matches what my data needs to answer.
   Respect antiUse. If no form fits, stop and ask — never invent a chart.
3. Install: npx shadcn@latest add https://vibecoding.tech/vizcn/r/<name>.json
   (no shadcn in the project? run `npx shadcn@latest init -d` once,
   or copy the form file from the repo).
4. Pick a skin from `skins`: core is the default; for another register
   wrap the chart's subtree in its class (e.g. .vz-paper for print,
   .vz-terminal for dark terminal). Skins are token packs — no per-form work.
5. The install adds namespaced --vz-* tokens. The status trio
   (--vz-good/mid/bad) and per-series colors are brand-neutral
   placeholders — remap the trio and pass `color` props to match my brand.
6. Feed my real data via props, following the form's `example` — the
   demo data is fictional reference.

install by hand · two equivalent ways

npx shadcn@latest add https://vibecoding.tech/vizcn/r/dune-flow.json
npx vizcn add dune-flow

`npx shadcn` is not a dependency — a one-shot CLI npx fetches on the fly; the only requirement is a React project with components.json (`npx shadcn@latest init -d` once) · tokens (namespaced `--vz-*`, your app is never repainted) and the series palette install automatically · you own the code

jump to: bench-matrix · bubble-field · delta-bars · dumbbell-range · dune-flow · frontier-board · heat-strip · leaderboard-bars · leaderboard-table · paired-bars · rank-bars · rank-slope · share-strip · stacked-activity · treemap · value-columns · verdict-stack

the catalog · all 17 forms, live

skin
theme

frontier-board

ranking

Which model delivers the most score per dollar (or token), and at what effort level?

113 tasks · updated Jul 1, 2026

Agentic coding scoremore efficient ↖0%10%20%30%40%50%60%70%80%$0$5$10$15$20$25Avg cost per taskatlas-4 [high]defaultatlas-3.5 [high]defaultatlas-3 [max]defaultatlas-2 [high]nova-5 [medium]nova-4 [xhigh]orion-72b [max]defaultvega-flash [medium]vega-pro [high]quasar-coder

when not to use: Needs >=2 runs per model to draw frontier lines; single-point-per-model data reads better as rank-bars.

dune-flow

time-series

What made up the flow over time, and when were the waves?

204060800Jan 5Jan 12Jan 19Jan 26Feb 2Feb 9

Low

Medium

High

when not to use: When readers must read exact values off the chart — the B-spline deliberately does not pass through the data points (raw values live only in the tooltip).

leaderboard-table

ranking

Who leads on score, with what confidence spread, and what does that score cost?

113 tasks · updated Jul 1, 2026

model
pass@1
cost
tokens
steps
atlas-4 [max]
70%±4%
$21.63
119k
88
nova-5 [xhigh]
67%±6%
$7.23
46k
82
atlas-3.5 [max]
59%±2%
$13.22
135k
120
atlas-3 [max]
54%±4%
$26.40
214k
268
nova-4 [xhigh]
52%±2%
$5.65
71k
70
orion-72b [max]
44%±2%
$3.92
78k
129
vega-flash [medium]
37%±2%
$7.34
276k
86
quasar-coder
31%±1%
$2.82
59k
149
atlas-2 [high]
30%±4%
$5.52
76k
134
vega-pro [high]
12%±2%
$9.48
196k
81
0%20%40%60%80%

All runs executed on the same harness with a 100-step budget; cost is the average per solved task. Fictional models, deterministic demo data.

when not to use: Wide-figure genre (min-width ~700px) — not for narrow containers or mobile cards; for a single metric without spread or economy columns, rank-bars is lighter.

leaderboard-bars

ranking

Who clears the bar, with what spread, and at what cost?

configurationpass@1costtokensmin

Opus 4.8

Claude Code

78.7 ±6.1

$3.12

33k

13

Sonnet 5

Claude Code

74.7 ±2.3

$2.42

29k

13

GPT-5.5

Codex

66.7 ±4.6

$2.34

16k

12

Haiku 4.5

Claude Code

53.3 ±4.6

$0.57

18k

10

Fable 5

OFF THE BOARD

85% · 17/20

020406080100%

when not to use: Single-metric rankings without spread or metric columns — use rank-bars; past ~12 rows the board outgrows a screen and labels stop scanning — use leaderboard-table.

rank-slope

ranking

How does the ranking reorder between two contexts?

SWE-BENCH PRODEEPSWEclaude-opus-4.7 · 64% to 54%claude-opus-4.7 64%54% claude-opus-4.7gpt-5.5 · 59% to 70%gpt-5.5 59%70% gpt-5.5gpt-5.4 · 58% to 56%gpt-5.4 58%56% gpt-5.4claude-sonnet-4.6 · 54% to 32%claude-sonnet-4.6 54%32% claude-sonnet-4.6gpt-5.4-mini · 54% to 24%gpt-5.4-mini 54%24% gpt-5.4-minigemini-3.1-pro · 46% to 10%gemini-3.1-pro 46%10% gemini-3.1-proclaude-haiku-4.5 · 39% to 0%claude-haiku-4.5 39%0% claude-haiku-4.5gemini-3-flash · 35% to 5%gemini-3-flash 35%5% gemini-3-flash

when not to use: More than two contexts — use lines; when only the gap per item matters — use dumbbell-range.

paired-bars

comparison

How do two measurements of the same subjects compare?

measurementpass ratevalue

claude-opus-4.7

mini-swe-agent

50%

Claude Code

40%

gpt-5.5

mini-swe-agent

40%

Codex CLI

40%

gemini-3.1-pro

mini-swe-agent

40%

Gemini CLI

20%

0204060%

when not to use: More than two measurements per subject — use a table or bench-matrix; two rivals over time — use delta-bars.

verdict-stack

composition

What do each subject's outcomes consist of?

gpt-5.5

n=90

claude-opus-4.7

n=90

gpt-5.4

n=90

claude-sonnet-4.6

n=80

gemini-3.1-pro

n=83

claude-haiku-4.5

n=90

PASS

FAIL

VERIFIER

when not to use: Reading exact segment values (no common baseline) — use a table; time series — use stacked-activity.

share-strip

composition

What makes up the whole, in one strip?

Language distribution

Typescript3531%
Go3430%
Python3430%
Javascript54%
Rust54%

when not to use: Hierarchies or many small categories — use treemap; comparing composition across subjects — use verdict-stack.

bubble-field

distribution

How is the pool scattered across two axes?

1001k10k100k101001k10kts-router · 90000 · 2100 · 520signal-kit · 54000 · 860 · 310canvas-core · 27000 · 3900 · 470typed-shell · 11800 · 620 · 180node-ledger · 4300 · 1280 · 140form-wire · 1300 · 240 · 64go-proxy · 76000 · 940 · 280cluster-watch · 31000 · 1800 · 250tiny-store · 9200 · 310 · 120queue-lab · 2800 · 520 · 96packet-view · 700 · 110 · 42py-agent · 68000 · 7200 · 610data-craft · 42000 · 3400 · 430prompt-eval · 15000 · 890 · 210task-bench · 5200 · 2700 · 240micro-orbit · 600 · 160 · 50js-bundler · 47000 · 1300 · 260web-hook · 19000 · 430 · 130dom-scan · 3600 · 760 · 98fetch-lite · 900 · 80 · 38rust-cache · 61000 · 960 · 300safe-term · 22000 · 4100 · 350byte-index · 6800 · 1500 · 160mini-wasm · 1700 · 190 · 70GITHUB STARSFILES IN DEFAULT BRANCH
TypeScript6
Go5
Python5
JavaScript4
Rust4

when not to use: Few points with runs per entity and an efficiency story — use frontier-board; exact value reading — use a table.

dumbbell-range

ranking/comparison

How far apart are the two values per row, and who sits where?

API pricing · input / output, Jun 2026

Atlas 4

$15 / $75

Nova Max

$10 / $40

Orion Pro

$5 / $25

Vega 2

$2.5 / $10

Lumen

$0.5 / $4

input · output — $ per 1M tokens

when not to use: Not for more than 2 points per row (use a range strip or box plot) and not for time series — use lines.

bench-matrix

matrix

How do these models compare across many benchmarks at once?

7 benchmarks · snapshot Jul 9, 2026

benchmarkAtlas 2 (max)MeridianNova ProHelix LabsOrion 1.5VantageVega UltraHelix Labs
reasoningReasonEvalgraduate-level multi-step reasoning, no tools88.486.184.987.2
PuzzleBench Hardconstraint puzzles, pass@171.369.864.270.5
LongContext QAneedle retrieval over 1M-token inputs92.690.191.4
codingRepoPatch Verifiedreal repository bug fixes, end-to-end74.872.370.673.1
CodeGolf Elitecompetitive programming, percentile61.263.758.460.9
agenticAgentOps Suitemulti-step tool use across 40 tasks67.562.859.365.0
BrowserQuestautonomous web navigation, success rate54.151.647.253.8

Scores as reported by each vendor; dash = not published. Higher is better.

when not to use: Trends over time or more than ~6 models — use a time-series form or a ranking board instead of a wide table.

stacked-activity

time-series

What makes up each day's volume, and how does it breathe day to day?

5B10B15B20BJun 1Jun 6Jun 11Jun 16Jun 21Jun 26

Jun 28, 2025· partial day

Prompt3.81B

Completion2.05B

Reasoning1.37B

Daily token volume for Atlas by request part. Hover a day to pin it in the legend.

when not to use: Comparing exact values of individual segments across days (inner segments have no common baseline) or fewer than 5 days.

delta-bars

time-series

Who is ahead today, and by how much?

+250K250KNova ahead by 63KNova ahead by 3KAtlas ahead by 25KAtlas ahead by 25KAtlas ahead by 10KNova ahead by 4KNova ahead by 6KAtlas ahead by 9KAtlas ahead by 33KAtlas ahead by 53KAtlas ahead by 54KAtlas ahead by 26KNova ahead by 28KNova ahead by 97KNova ahead by 161KNova ahead by 198KNova ahead by 195KNova ahead by 67KAtlas ahead by 29KAtlas ahead by 118KAtlas ahead by 181KAtlas ahead by 208KAtlas ahead by 205KAtlas ahead by 183KAtlas ahead by 160KAtlas ahead by 148KAtlas ahead by 153KAtlas ahead by 170KAtlas ahead by 186KJun 1Jun 11Jun 21Jun 30Atlas aheadNova ahead

when not to use: Not for more than 2 rivals or for absolute magnitudes — use race lines or stacked forms instead.

heat-strip

time-series

Is this thing alive — how did its activity move over the last year?

Atlas SDK · a year of weekly activity

total 1,820peak 71/wkthis week 62

51 wknow

when not to use: Not for exact value reading or short ranges (<12 weeks) — use a column chart instead.

rank-bars

ranking

Who leads this ranking, and by how much?

Coding benchmark · pass rate, Jun 2026

Atlas 4

Meridian

74.2%

Nova Max

Helix Labs

68.9%

Orion Pro

Vantage

63.5%

Vega 2

Meridian

57.1%

Lumen

Helix Labs

44.8%

when not to use: Not for time series, part-to-whole composition, or more than ~10 rows — use a table or sparklines instead.

value-columns

ranking

How do these few values stack up side by side?

Pro plan price · $/month, Jun 2026

$20

Atlas 4

Meridian

$30

Nova Max

Helix Labs

$25

Orion Pro

Vantage

$15

Vega 2

Stellar

$10

Lumen

Helix Labs

when not to use: Not for many items (>8) or time series — use rank bars or lines instead.

treemap

composition

How is the whole split up, and who dominates?

Assistant usage share, Jun 2026

Atlas

Meridian

34%

npm 12.4M/wk

Nova

Helix Labs

26%

npm 8.1M/wk

Orion

Vantage

18%

npm 4.9M/wk

Vega

Meridian

12%

Lumen

Helix Labs

7%

Others

long tail

3%

area = share of total · color = vendor · brighter = bigger

when not to use: Not for close values (areas are hard to compare precisely) or deep hierarchies (flat only) — use rank bars or a nested treemap library instead.

machine-readable catalog with when-to-use and when-NOT-to-use per form: catalog.json

for agents · make the rule permanent

One-off prompts are for trying it. To make your agent reach for the catalog every time, drop this into your project's AGENTS.md:

## Data visualizations
Never invent charts or add chart libraries. Use the vizcn registry:
pick a form by the question it answers in
https://vibecoding.tech/vizcn/catalog.json (respect each form's antiUse,
copy its `example`), install via
`npx shadcn@latest add https://vibecoding.tech/vizcn/r/<name>.json`,
apply a skin class from the catalog's `skins` if the surface calls for it,
remap --vz-good/mid/bad to the brand palette, wire real data via props.

Programmatic channel: one line in components.json and any shadcn-MCP-aware agent browses and installs the catalog natively — no extra MCP server needed. Machine index for crawlers: llms.txt.

{ "registries": { "@vizcn": "https://vibecoding.tech/vizcn/r/{name}.json" } }

next drops

vizcn is a curated static snapshot — copy-paste, no runtime dependency. New forms and new tools land here first.

New builder tools, when they ship · No spam · Unsubscribe anytime

github.com/eugeneshilow/vizcn · @eugeneshilow