claudegoodies
Skill

Data Visualization

From asgeirtj

>

Documents a procedure and validator for chart form, color assignment, marks, and interaction before generating any data visualization.

Use it when

  • Choosing chart type, colors, or layout for a dashboard/chart request
  • Assigning categorical, sequential, diverging, or status colors to a chart
  • Building stat tiles, sparklines, heatmaps, legends, or tooltips
  • Checking a palette for colorblind-safe contrast before shipping

Skip it if

  • Requires running a Node script (scripts/validate_palette.js) to validate colors
  • Ships only a placeholder palette — you must swap in your own brand values
  • Adds a documented procedure/checklist rather than generating charts itself

Facts

Repository
asgeirtj/system_prompts_leaks
Status
Actively maintained
Last commit
Source file
Anthropic/Claude Code/bundled-skills/dataviz/SKILL.md

Source preview

The instructions Claude Code reads when this skill runs.

# 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.

1. **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`
2. **Assign color by the job it does.** Categorical (identity), sequential
   (magnitude), diverging (polarity)
View full source on GitHub →

Other skills