Your agent stops making chart slop.
74 chart types and 16 complete visual identities, every one specified to the pixel. One skill for Claude Code and any coding agent: ask for "a chart of X for the board" and get an editorial-quality, on-brand, deterministic SVG. Onboard your own brand in 60 seconds.
Every visual on this page was rendered by the system itself, from the same specs your agent will use.
I build weekly decks for a pipeline megaproject. Every time I asked an AI for a chart I got a different one: random palette, a legend for two series, a truncated axis, a pie with nine slices, a title that says "Chart of Data". Fixing them by hand cost more than drawing them myself, so I specified them instead.
A chart is specified, not styled. Same message, same spec, same bytes, every run.
Before
"Here's a colorful pie chart showing your 11 cost categories! 🎨"
After
Eleven categories is a ranking, not a part-to-whole. Rendering a ranked bar, EVIDENTIA identity, largest category direct-labeled: "Logistics carries 38% of total cost, 2.4x the next category."
74 chart types across ten families. Each carries its own spec: when to use it, when to refuse it, exact canvas and px, color roles, and a QA list the agent runs before delivering. All renders below are the KATA identity; switch identity and every one of them re-skins.
 BAR-H CH-RNK-01 ranking categories by a single measure |
 ORDERED COLUMN CH-RNK-02 ranking with short category names where vertical reads naturally |
 LOLLIPOP CH-RNK-03 ranking where bars would overwhelm the page (many rows, light values) |
 BUMP CH-RNK-04 rank order changes over time: who overtook whom |
 DOT STRIP CH-RNK-05 compact ranking with minimal ink |
 TABLE WITH BARS CH-RNK-06 readers need exact values AND instant rank perception |
 COLUMN CH-MAG-01 comparing magnitude across categories that carry a natural order... |
 PAIRED COLUMN CH-MAG-02 two measures per category: budget vs actual, plan vs forecast |
 PAIRED BAR CH-MAG-03 two measures per category with long labels (plan vs actual, A vs B) |
 BULLET CH-MAG-04 KPI reporting: actual vs target vs poor/ok/good bands |
 PROPORTIONAL SYMBOL CH-MAG-05 magnitudes spanning orders where bars would dwarf the small ones |
 PICTOGRAM CH-MAG-06 countable things told in countable marks (people, lots, trucks) |
 RADAR CH-MAG-07 WARN: only when every axis shares one unit and the audience... |
 PARLIAMENT CH-MAG-08 seats, slots, berths: integer allocations where each unit matters |
 GAUGE CH-MAG-09 WARN: only when a dashboard convention demands a dial for ONE number |
 LINE CH-TIM-01 trend over ordered periods |
 S-CURVE CH-TIM-02 cumulative progress vs plan over the project timeline |
 AREA CH-TIM-03 one quantity over time where the VOLUME matters (output,... |
 STACKED AREA CH-TIM-04 how a growing total splits into components over time |
 SLOPE CH-TIM-05 year-over-year or before/after across categories |
 SPARKLINE STRIP CH-TIM-06 scanning many metrics for direction at a glance |
 CALENDAR HEATMAP CH-TIM-07 workload rhythm: deliveries, tickets, tests per weekday across weeks |
 FAN CH-TIM-08 forecasts that honestly show their spread |
 GANTT CH-TIM-09 schedule communication: 4-10 tasks against a period grid |
 CONNECTED SCATTER CH-TIM-10 trajectories: cost vs output, price vs volume, risk vs progress... |
 STREAMGRAPH CH-TIM-11 WARN: editorial texture pieces where the organic silhouette IS the... |
 HORIZON CH-TIM-12 WARN: dense monitoring walls scanned for where and when, never how... |
 STEP CH-TIM-13 levels that hold between discrete changes: stock, rates,... |
 INDEXED LINE CH-TIM-14 comparing growth across series with different units or magnitudes |
 EVENT TIMELINE CH-TIM-15 milestone communication: what happens when, on one line |
 STACKED BAR CH-PTW-01 how a total splits, tracked across periods or categories |
 STACKED BAR 100% CH-PTW-02 how the MIX shifts across periods or categories |
 PIE CH-PTW-03 one dominant share against one or two others, single period |
 DONUT CH-PTW-04 exactly the pie use case, when the surrounding design system... |
 TREEMAP CH-PTW-05 a total split across 4 to 12 parts where the big picture beats... |
 WAFFLE CH-PTW-06 one share communicated with countable units: 62 of every 100 |
 MARIMEKKO CH-PTW-07 two composition questions at once: how big is each category, and... |
 FUNNEL CH-PTW-08 pipeline attrition: ordered > shipped > cleared > delivered |
 SUNBURST CH-PTW-09 WARN: only when a 2-level whole must be shown in one figure |
 CIRCLE PACK CH-PTW-10 WARN: editorial openers where an organic cluster invites exploration |
 SCATTER CH-COR-01 how two measures relate across entities |
 BUBBLE CH-COR-02 two related measures plus a weight (budget, volume, headcount) |
 XY HEATMAP CH-COR-03 patterns across two ordered dimensions: weekday x week, hour x... |
 COLUMN + LINE CH-COR-04 a volume and a rate that move together over time |
 HEXBIN CH-COR-05 hundreds of points where overplotting hides the density |
 PARALLEL COORDINATES CH-COR-06 WARN: analyst-only views for spotting multi-dimensional profiles |
 SCATTERPLOT MATRIX CH-COR-07 WARN: analyst overview to pick which pairwise plot deserves a real... |
 DIVERGING BAR CH-DEV-01 signed variance per category: ahead/behind, over/under,... |
 DUMBBELL CH-DEV-02 before/after per category: backlog W24 vs W28, score last year vs now |
 SPINE CH-DEV-03 two-part splits compared across categories |
 SURPLUS/DEFICIT AREA CH-DEV-04 balances that swing between surplus and deficit |
 DIVERGING STACKED CH-DEV-05 survey scales: agreement, satisfaction, support |
 HISTOGRAM CH-DST-01 showing the shape of one distribution: skew, mode, outliers |
 DOT PLOT CH-DST-02 two measures per category on one scale: planned vs actual, this vs... |
 DOT STRIP CH-DST-03 small samples where every raw value can be shown honestly |
 BOXPLOT CH-DST-04 comparing many distributions compactly |
 POPULATION PYRAMID CH-DST-05 two groups across ordered bands: age structures, tenure mixes |
 CUMULATIVE CURVE CH-DST-06 service-level questions: what share clears within N days |
 BEESWARM CH-DST-07 every item matters and outliers deserve a name |
 VIOLIN CH-DST-08 statistical audiences comparing multimodal shapes that a box hides |
 DENSITY CURVE CH-DST-09 one distribution's shape for a reader who knows what a density is |
 ERROR BARS CH-DST-10 estimates that carry a range: durations, forecasts, measurement spread |
 WATERFALL CH-FLO-01 explaining how a total moved from A to B through named drivers |
 SANKEY CH-FLO-02 where things came from and where they went, conserved end to end |
 NETWORK CH-FLO-03 dependency and connection structures: who touches whom |
 CHORD CH-FLO-04 WARN: editorial overviews of dense mutual exchange between few nodes |
 CHOROPLETH CH-SPA-01 rates and intensities across known territories |
 PROPORTIONAL SYMBOL MAP CH-SPA-02 absolute counts anchored to places (stock, headcount, backlog) |
 ROUTE PROGRESS CH-SPA-03 linear infrastructure: pipelines, roads, transmission lines |
 DOT DENSITY CH-SPA-04 spatial concentration where the cluster shape matters |
 FLOW MAP CH-SPA-05 origin-destination stories over real geography |
 STATUS MATRIX CH-TAB-01 readiness tracking: systems x stages, packages x gates, sites x... |
 HEATMAP TABLE CH-TAB-02 entities compared across metrics with different scales (progress... |
 KPI TABLE CH-TAB-03 executive KPI panels: exact number, change, and shape in one row |
The same monthly series, rendered under four different constitutions. Nothing was restyled by hand; only the identity changed.
| AGRAW | LOGOS | SENTINEL | MIZAN |
|---|---|---|---|
 |
 |
 |
 |
Each one is a full constitution: palette, fonts, density, annotation policy, charts per page, and a voice (register, title grammar, word caps). An executive identity writes and draws differently than an ops room or a legal exhibit.
Claude Code
git clone https://github.com/babarda/chart-designCopy skills/chart-design/ into your project's .claude/skills/
folder (or ~/.claude/skills/ for every project). Ask for any chart.
Claude.ai, Cursor, or any agent that reads files
Point it at skills/chart-design/SKILL.md. The skill and its
references are plain markdown plus JSON; nothing to execute.
The shareable moment is your own brand, not ours. Say:
"Onboard my brand from acme.com"
| Detected from your site | Becomes |
|---|---|
| Background color | background, plus derived panel, hairline, gridline |
| Heading text color | ink, plus derived body |
| Brand accent | primary, plus derived primaryDark, muted |
| Second accent, if any | kept for highlights, never for data ink |
| Status colors, if any | positive, negative, warning (else safe defaults) |
| Heading font | display, with installed fallbacks |
| Body font | body, with installed fallbacks |
The result is a BRAND.json validated by
python tools/check_brand.py: shape, hex discipline, and WCAG AA
contrast, exit 2 until it passes. From then on every chart renders in
your identity. Same geometry, your skin, still deterministic.
Rules the skill will not break, whoever asks:
- Bars start at zero. Always.
- Pie only for 3 slices or fewer; otherwise it ranks.
- Never a second Y axis.
- Direct labels over legends.
- One message per chart, one highlight per chart.
- No 3D, no gradients, no invented numbers.
The skill never loads this README or the galleries. Context cost stays small and fixed.
| You ask for... | Agent loads |
|---|---|
| "which chart for market share?" | references/charts.md |
| "a chart for the steering committee" | references/languages.md + one token |
| "make this chart" | one spec + one token |
| "onboard my brand" | references/brand.md + BRAND-template.json |
| "is this chart honest?" | references/honesty.md |
- Interactive dashboards. This renders static SVG for decks, docs, and reports.
- Exploratory analysis where you chart 40 things to find one. Use a notebook, then bring the finding here.
- Data you do not have. The skill never invents numbers; without data it asks or writes TBC.
- Art. If the goal is an infographic poster, this will fight you.
message -> chart spec (canon/specs/CH-xx.json: exact px, rules, QA)
audience -> identity token (canon/tokens/DL-xx.json or your BRAND.json)
spec + token + data -> SVG (deterministic: same input, same bytes)
python build.py --check and python tools/verify.py gate every
commit, so the references and this page's gallery can never drift from
the canon.
Built on the Open Visualization Protocol, which specifies and gate-checks every object this skill uses (3,276 checks upstream).
If this saves you from one more slop chart, star it so others find it.