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
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.
leaderboard-bars
rankingWho clears the bar, with what spread, and at what cost?
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
—
—
—
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
rankingHow does the ranking reorder between two contexts?
when not to use: More than two contexts — use lines; when only the gap per item matters — use dumbbell-range.
paired-bars
comparisonHow do two measurements of the same subjects compare?
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%
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
compositionWhat 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.
bubble-field
distributionHow is the pool scattered across two axes?
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/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,
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.