Dataviz
Use this skill whenever you are about to create ANY chart, graph, plot, dashboard, or...
Install
npx skills add JimLiu/baoyu-design --skill dataviz -g -a claude-code -y- Repository
- JimLiu/baoyu-design5.8k
- Category
- Design
- Updated
- 3d ago
- License
- See repository
- Context cost
- Mediumabout 1,722 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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.
