# Dataviz

Use this skill whenever you are about to create ANY chart, graph, plot, dashboard, or...

- Repository: https://github.com/JimLiu/baoyu-design (5752 stars)
- Category: Design
- License: see repository
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add JimLiu/baoyu-design --skill dataviz -g -a claude-code -y`
Codex: `npx skills add JimLiu/baoyu-design --skill dataviz -g -a codex -y`
Cursor: `npx skills add JimLiu/baoyu-design --skill dataviz -g -a cursor -y`
Gemini CLI: `npx skills add JimLiu/baoyu-design --skill dataviz -g -a gemini-cli -y`

## Description

Use this skill whenever you are about to create ANY chart, graph, plot, dashboard, or data visualization, in ANY output medium (HTML/React artifact, inline SVG, matplotlib/plotly/d3/Recharts, PNG). Read it BEFORE writing the first line of chart code, choosing chart colors, building a stat tile / KPI row, or laying out a dashboard. Teaches a design-system-agnostic method - form heuristic, color formula with a runnable validator, mark specs, interaction rules. Default palette in references/palette.md.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

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

The rest: https://github.com/JimLiu/baoyu-design/blob/HEAD/skills/dataviz/SKILL.md