Data Visualization
A chart is read by people and executed by you. This skill turns "make it look
good" into a procedure with checks, so the result is right by construction rather
than by taste.
The method here is design-system-agnostic. Nothing in the procedure, the form
heuristic, the six checks, or the mark specs is specific to one product. A design
system supplies a small set of parameters (its ramps, a categorical order, a
diverging pair, a status palette, a texture, its surfaces, its filter components);
the method consumes them unchanged. A validated default palette is the
reference instance, fully specified in references/palette.md. To target your
brand, read that file's structure and substitute its values — touch nothing else.
The single most important habit: the color part is computable, so compute it.
Never eyeball whether a palette is colorblind-safe — run scripts/validate_palette.js.
The procedure — do these in order
Color comes LAST. Most bad charts pick colors first.
- Pick the form. What is the data's job — magnitude, identity, polarity, a
single headline, change-over-time? The job picks the chart type, and sometimes
the answer is not a chart (a stat tile or hero number). →
references/choosing-a-form.md
- Assign color by the job it does. Categorical (identity), sequential
(magnitude), diverging (polarity), or status (state) — each has one rule.
Assign categorical hues in fixed order, never cycled. →
references/color-formula.md
- VALIDATE the palette — run the script, don't reason about ΔE.
node scripts/validate_palette.js "<hex,hex,…>" --mode light (relative to
this skill's base directory — or load it as <script type="module"> in the
chart's own page, where it reads
data-palette off <body> and logs a console.table report). It returns
pass/fail on the lightness band, chroma floor, adjacent-pair CVD separation,
the normal-vision floor, and contrast. Fix anything that FAILs before continuing. Re-run for
--mode dark with that mode's surface.
- Apply mark specs & spacers. Thin marks, 4px rounded data-ends anchored to
the baseline, 2px lines, ≥8px markers, a 2px surface gap between fills (stacked
segments and adjacent bars alike) and a 2px surface ring on overlapping marks,
selective direct labels. →
references/marks-and-anatomy.md
- Add the hover layer — by default. An HTML/SVG chart is interactive; ship
a crosshair+tooltip on line/area and a per-mark hover tooltip on bar/dot/cell.
The only form that skips it is a bare stat tile with no plot. Hit targets bigger
than the mark; filters in one row above the charts. →
references/interaction.md
- Final accessibility pass. For ≥ 2 series a legend is always present and ≤ 4
are also direct-labeled (a single series needs no legend box — the title names
it), so identity is never color-alone; a table view exists; dark mode is selected — its own
steps from the same ramps, validated against the dark surface, not an automatic
flip; texture is available for the CVD/print/forced-colors case.
- Render it and look at it. The validator checks color, not layout — open or
screenshot the output and eyeball it for label collisions, geometry, and overflow
before calling it done.
Then check the result against references/anti-patterns.md — it is the catalog
of what goes wrong. If your chart matches an entry, it's wrong.
Non-negotiables (true in every design system)
- Assign categorical hues in fixed order, never cycled. A 9th series is never a
generated hue — it folds into "Other," small multiples, or composite encoding.
- One axis. Never a dual-axis chart (two y-scales). Two measures of different
scale → two charts, small multiples, or indexed to a common base. (This is the
#1 chart mistake — see anti-patterns.)
- Color follows the entity, never its rank. A filter that changes the series
count must not repaint the survivors.
- Sequential = one hue, light→dark. Diverging = two hues + a neutral gray
midpoint. Never a rainbow; never a hue at the diverging midpoint.
- Run the validator before shipping any categorical palette. CVD ΔE ≥ 8 is the
target (OKLab ×100); 6–8 is a floor that is legal ONLY with secondary encoding. A
normal-vision floor below 15 is a hard FAIL — full-color readers can't tell the
pair apart; re-step it on the adjacent pairlist (secondary encoding does not excuse
this one); under
--pairs all cut series or facet instead — see check 4. A contrast WARN
obligates visible labels or a table view — it is not dismissable.
- Thin marks; a legend always present for ≥ 2 series (none for one), with
selective direct labels (never a number on every point); recessive grid/axes.
- Text wears text tokens, never the series color — values, labels, and legends
stay in primary/secondary/muted ink; a colored mark beside them carries identity.
- Status colors are reserved (good/warning/serious/critical) and never reused
for "series 4"; they ship with an icon + label, never color alone.
Plugging in a design system
The method is invariant; only these parameters change per system. The reference
instance — every value filled in — is references/palette.md.
| Parameter |
What the system provides |
| Ramps |
the hue scales (named steps) the palette draws from |
| Categorical theme |
the fixed hue order (a named theme); default + alternates |
| Sequential hue |
the default single hue for magnitude |
| Diverging pair |
two warm/cool poles + a neutral midpoint |
| Status palette |
good / warning / serious / critical — steps distinct from categorical |
| Texture fill |
one directional hand-drawn fill, used at 45° / 135° |
| Surfaces |
light & dark chart-surface colors (the validator needs these) |
| Filter controls |
date-range & dimension controls (behavioral spec in interaction.md) |
To onboard a new system: fill those rows, feed its ramps to the validator, and let
it snap each slot to the nearest passing step. Structure and rules stay as written.
Reference files
| File |
What it answers |
references/choosing-a-form.md |
Which chart type / is it even a chart? |
references/color-formula.md |
The four jobs, the six checks, snap-to-passing |
references/marks-and-anatomy.md |
Mark specs, spacers, labels, figures, hero number |
references/interaction.md |
Tooltips & hover, filters & time ranges |
references/components.md |
The pieces a chart is made of — build each in plain HTML |
references/anti-patterns.md |
What goes wrong — check every chart against this |
references/palette.md |
The reference palette instance — every parameter, filled in; swap for your brand's |
scripts/validate_palette.js |
Runnable six-checks validator (run it; don't eyeball) |
Source: asgeirtj/system_prompts_leaks → Anthropic/Claude Code/bundled-skills/dataviz/SKILL.md
1---2name: data-visualization3description: > Produce a chart, graph, dashboard, or any data visualization that reads as one system — elegant, accessible, and consistent in light and dark — BRAND-NEUTRAL, shipping a placeholder palette to swap for your own. Read this BEFORE generating ANY chart (bar, line, area, heatmap, scatter, sparkline, donut), choosing chart colors, building a stat tile / meter / KPI row, or laying out a dashboard. Teaches a design-system-AGNOSTIC method: a form heuristic, a color formula with a runnable validator, mark specs, and interaction rules. The method is invariant; a design system plugs in its own ramps and surfaces. A validated default palette is documented in `references/palette.md` — swap that file's values for your brand's. Triggers on: "chart", "graph", "plot", "data viz", "dashboard", "analytics", "visualize data", "categorical colors", "sequential / diverging palette", "stat tile",...4---567# Data Visualization89A chart is **read by people and executed by you**. This skill turns "make it look10good" into a procedure with checks, so the result is right by construction rather11than by taste.1213**The method here is design-system-agnostic.** Nothing in the procedure, the form14heuristic, the six checks, or the mark specs is specific to one product. A design15system supplies a small set of *parameters* (its ramps, a categorical order, a16diverging pair, a status palette, a texture, its surfaces, its filter components);17the method consumes them unchanged. A **validated default palette** is the18reference instance, fully specified in `references/palette.md`. To target your19brand, read that file's structure and substitute its values — touch nothing else.2021> The single most important habit: **the color part is computable, so compute it.**22> Never eyeball whether a palette is colorblind-safe — run `scripts/validate_palette.js`.2324## The procedure — do these in order2526Color comes LAST. Most bad charts pick colors first.27281. **Pick the form.** What is the data's job — magnitude, identity, polarity, a29 single headline, change-over-time? The job picks the chart type, and sometimes30 the answer is *not a chart* (a stat tile or hero number). → `references/choosing-a-form.md`312. **Assign color by the job it does.** Categorical (identity), sequential32 (magnitude), diverging (polarity), or status (state) — each has one rule.33 Assign categorical hues in fixed order, never cycled. → `references/color-formula.md`343. **VALIDATE the palette — run the script, don't reason about ΔE.**35 `node scripts/validate_palette.js "<hex,hex,…>" --mode light` (relative to36 this skill's base directory — or load it as `<script type="module">` in the37 chart's own page, where it reads38 `data-palette` off `<body>` and logs a `console.table` report). It returns39 pass/fail on the lightness band, chroma floor, adjacent-pair CVD separation,40 the normal-vision floor, and contrast. Fix anything that FAILs before continuing. Re-run for41 `--mode dark` with that mode's surface.424. **Apply mark specs & spacers.** Thin marks, 4px rounded data-ends anchored to43 the baseline, 2px lines, ≥8px markers, a 2px surface gap between fills (stacked44 segments and adjacent bars alike) and a 2px surface ring on overlapping marks,45 selective direct labels. → `references/marks-and-anatomy.md`465. **Add the hover layer — by default.** An HTML/SVG chart *is* interactive; ship47 a crosshair+tooltip on line/area and a per-mark hover tooltip on bar/dot/cell.48 The only form that skips it is a bare stat tile with no plot. Hit targets bigger49 than the mark; filters in one row above the charts. → `references/interaction.md`506. **Final accessibility pass.** For ≥ 2 series a legend is always present and ≤ 451 are also direct-labeled (a single series needs no legend box — the title names52 it), so identity is never color-alone; a table view exists; dark mode is **selected** — its own53 steps from the same ramps, validated against the dark surface, not an automatic54 flip; texture is available for the CVD/print/forced-colors case.557. **Render it and look at it.** The validator checks color, not layout — open or56 screenshot the output and eyeball it for label collisions, geometry, and overflow57 before calling it done.5859Then check the result against **`references/anti-patterns.md`** — it is the catalog60of what goes wrong. If your chart matches an entry, it's wrong.6162## Non-negotiables (true in every design system)6364- **Assign categorical hues in fixed order, never cycled.** A 9th series is never a65 generated hue — it folds into "Other," small multiples, or composite encoding.66- **One axis.** Never a dual-axis chart (two y-scales). Two measures of different67 scale → two charts, small multiples, or indexed to a common base. *(This is the68 #1 chart mistake — see anti-patterns.)*69- **Color follows the entity, never its rank.** A filter that changes the series70 count must not repaint the survivors.71- **Sequential = one hue, light→dark. Diverging = two hues + a neutral gray72 midpoint.** Never a rainbow; never a hue at the diverging midpoint.73- **Run the validator before shipping any categorical palette.** CVD ΔE ≥ 8 is the74 target (OKLab ×100); 6–8 is a floor that is legal ONLY with secondary encoding. A75 normal-vision floor below 15 is a hard FAIL — full-color readers can't tell the76 pair apart; re-step it on the adjacent pairlist (secondary encoding does not excuse77 this one); under `--pairs all` cut series or facet instead — see check 4. A contrast WARN78 obligates visible labels or a table view — it is not dismissable.79- **Thin marks; a legend always present for ≥ 2 series (none for one), with80 selective direct labels (never a number on every point); recessive grid/axes.**81- **Text wears text tokens, never the series color** — values, labels, and legends82 stay in primary/secondary/muted ink; a colored mark beside them carries identity.83- **Status colors are reserved** (good/warning/serious/critical) and never reused84 for "series 4"; they ship with an icon + label, never color alone.8586## Plugging in a design system8788The method is invariant; only these parameters change per system. The reference89instance — every value filled in — is `references/palette.md`.9091| Parameter | What the system provides |92|---|---|93| **Ramps** | the hue scales (named steps) the palette draws from |94| **Categorical theme** | the fixed hue order (a named theme); default + alternates |95| **Sequential hue** | the default single hue for magnitude |96| **Diverging pair** | two warm/cool poles + a neutral midpoint |97| **Status palette** | good / warning / serious / critical — steps distinct from categorical |98| **Texture fill** | one directional hand-drawn fill, used at 45° / 135° |99| **Surfaces** | light & dark chart-surface colors (the validator needs these) |100| **Filter controls** | date-range & dimension controls (behavioral spec in `interaction.md`) |101102To onboard a new system: fill those rows, feed its ramps to the validator, and let103it snap each slot to the nearest passing step. Structure and rules stay as written.104105## Reference files106107| File | What it answers |108|------|-----------------|109| `references/choosing-a-form.md` | Which chart type / is it even a chart? |110| `references/color-formula.md` | The four jobs, the six checks, snap-to-passing |111| `references/marks-and-anatomy.md` | Mark specs, spacers, labels, figures, hero number |112| `references/interaction.md` | Tooltips & hover, filters & time ranges |113| `references/components.md` | The pieces a chart is made of — build each in plain HTML |114| `references/anti-patterns.md` | **What goes wrong — check every chart against this** |115| `references/palette.md` | **The reference palette instance** — every parameter, filled in; swap for your brand's |116| `scripts/validate_palette.js` | Runnable six-checks validator (run it; don't eyeball) |117118---119120**Source:** [`asgeirtj/system_prompts_leaks`](https://github.com/asgeirtj/system_prompts_leaks) → `Anthropic/Claude Code/bundled-skills/dataviz/SKILL.md`
thedixitjain