vibecoding.tech / registry
vizcn
An SVG viz registry built for coding agents first. 11 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, and antiUse.
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. Feed my real data via props — 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 · delta-bars · dumbbell-range · dune-flow · frontier-board · heat-strip · leaderboard-table · rank-bars · stacked-activity · treemap · value-columns
the catalog · all 11 forms, live
frontier-board
rankingWhich model delivers the most score per dollar (or token), and at what effort level?
113 tasks · updated Jul 1, 2026
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-seriesWhat made up the flow over time, and when were the waves?
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
rankingWho leads on score, with what confidence spread, and what does that score cost?
113 tasks · updated Jul 1, 2026
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.
dumbbell-range
ranking/comparisonHow 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
matrixHow do these models compare across many benchmarks at once?
7 benchmarks · snapshot Jul 9, 2026
| benchmark | Atlas 2 (max)Meridian | Nova ProHelix Labs | Orion 1.5Vantage | Vega UltraHelix Labs | |
|---|---|---|---|---|---|
| reasoning | ReasonEvalgraduate-level multi-step reasoning, no tools | 88.4 | 86.1 | 84.9 | 87.2 |
| PuzzleBench Hardconstraint puzzles, pass@1 | 71.3 | 69.8 | 64.2 | 70.5 | |
| LongContext QAneedle retrieval over 1M-token inputs | 92.6 | 90.1 | — | 91.4 | |
| coding | RepoPatch Verifiedreal repository bug fixes, end-to-end | 74.8 | 72.3 | 70.6 | 73.1 |
| CodeGolf Elitecompetitive programming, percentile | 61.2 | 63.7 | 58.4 | 60.9 | |
| agentic | AgentOps Suitemulti-step tool use across 40 tasks | 67.5 | 62.8 | 59.3 | 65.0 |
| BrowserQuestautonomous web navigation, success rate | 54.1 | 51.6 | 47.2 | 53.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-seriesWhat makes up each day's volume, and how does it breathe day to day?
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-seriesWho is ahead today, and by how much?
when not to use: Not for more than 2 rivals or for absolute magnitudes — use race lines or stacked forms instead.
heat-strip
time-seriesIs 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
when not to use: Not for exact value reading or short ranges (<12 weeks) — use a column chart instead.
rank-bars
rankingWho 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
rankingHow 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
compositionHow 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),
install via `npx shadcn@latest add https://vibecoding.tech/vizcn/r/<name>.json`,
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.