Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →asgeirtj/Data Visualization
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, mar
Passed 19 of 23 test cases with the skill, and 12 of 23 without it.
and 10 more in the full report
8 fixed11 passed either way3 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 8 test cases the skill fixed. Same model, same prompt, with and without the skill.
When testing a brand palette for our web charts, the automated validator returned a normal-vision Delta E separation of 11.8 for series 2 and 3, triggering a test failure. A designer suggested keeping the colors as-is and relying on direct labels to pass accessibility requirements. Is this acceptable?
| Checked | Without skill | With skill |
|---|---|---|
| Rejects the palette because normal-vision Delta E is below 15. | Missed | Passed |
The instructions your model reads when the skill loads.
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.
Color comes LAST. Most bad charts pick colors first.
references/choosing-a-form.mdreferences/color-formula.mdnode 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.references/marks-and-anatomy.mdtest cases passed, vs 12 / 23 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.