What is the data-visualization-mastery skill?
The data-visualization-mastery skill is a SKILL.md in phazurlabs/sumi for designing charts, dashboards and data-dense screens. Your AI coding agent gets selection criteria for 50+ chart types, KPI card rules, an anti-pattern table, dataviz tokens and a quality checklist.
The data-visualization-mastery skill covers 50+ chart types with selection criteria, dashboard composition, data tables, KPI cards, sparklines, heatmaps and accessible data presentation, with React code using Recharts, D3 and Nivo plus data-viz tokens.
It opens with foundational principles: Tufte's data-ink ratio with a target above 0.8, a lie factor that should stay between 0.95 and 1.05, chartjunk, small multiples, and an encoding hierarchy from Bertin and Cleveland-McGill.
Layout, color and motion
- Color rules include never using red and green as the only differentiator, since 8% of males have red-green deficiency.
- The grid uses a 1440px container, 12 columns and a 24px gutter, with a chart minimum height of 240px on desktop and 180px on mobile.
- Animation tokens use 150ms for hover highlights and a 200ms tooltip delay.
- A density spectrum runs from glanceable at 3 to 7 items to explorable at 30 to 200.
Anti-patterns and the quality checklist
An anti-pattern table flags a truncated Y-axis, pie charts over 5 slices and rainbow color scales, each with a fix. A final quality checklist covers data integrity, visual design, accessibility, responsiveness and states, and the skill also includes print CSS.
Who the data-visualization-mastery skill is for
Best for
- Designing charts, dashboards or any data-dense screen.
- Making an existing chart accessible, or building a data table.
- Implementing charts in React with Recharts, with D3 and Nivo also covered.
Not for
- Building React and Vite dashboards from Stitch screens with TanStack Query, which the stitch-react-vite-dashboard skill covers.
- Converting Google Stitch screens into modular Vite and React components with typed props, which the stitch-react-components skill covers.
- Exact CSS and Tailwind values for spacing, type, color and dark mode, which the absolute-ui skill covers.
How to install Data Visualization Mastery Skill: Charts and Dashboards
/plugin marketplace add phazurlabs/sumi
/plugin install sumi@sumi-marketplacegit clone https://github.com/phazurlabs/sumi.git && claude --plugin-dir ./sumi.Check the requirement
You need the Claude Code CLI, authenticated. The core is markdown with zero config, and it works offline.
Add the marketplace and install
Run the two commands above to add the phazurlabs/sumi marketplace and install the sumi plugin.
Pick a scope
Choose the scope when you install: user for all your projects, project shared through .claude/settings.json, or local, which is yours and gitignored.
Start
Run
/sumi:start, which asks what you are working on in plain words and picks the play. Ask for a chart, a dashboard, an accessible chart or a data table.
Check that it loaded
After installing, run /sumi:start in your agent. If /plugin is not recognised, update Claude Code.
Key features
- 50+ chart typesChart types are organized by purpose, with when to use and when to avoid each, covering comparison, trend, distribution, relationship, part-to-whole, flow, geo and hierarchy.
- Chart selection by purposeA table pairs each purpose with recommended charts and charts to avoid, such as line, area and sparkline for trends and a stacked bar, treemap or donut for part-to-whole.
- Foundational principlesTufte's data-ink ratio target above 0.8, lie factor limits of 0.95 to 1.05, chartjunk, small multiples, and the encoding hierarchy from Bertin and Cleveland-McGill.
- Color and accessibility rulesNever use red and green as the only differentiator, add lightness variation alongside hue, and keep to a maximum of 8 categorical colors.
- Grid and sizingA 1440px centered container, a 12 column grid with a 24px gutter, a chart minimum height of 240px desktop and 180px mobile, and a KPI card height of about 120px.
- Animation tokensTransition tokens of 150ms, 300ms and 500ms, a 200ms tooltip delay and interaction patterns such as the hover tooltip that shows the exact value.
- KPI cardsSeven rules and delta formatting for KPI cards, alongside sparklines, heatmaps and data tables.
- Density spectrumGlanceable at 3 to 7, scannable at 8 to 30, explorable at 30 to 200 and dense at 200 to 1000+, with progressive disclosure levels 0 to 4 and information scent.
- Anti-pattern tableTruncated Y-axis, dual axis, pie over 5 slices, 3D effects and rainbow scales, each with a fix, plus nine common developer mistakes.
- Dataviz tokens and quality checklistTokens with dark mode overrides and print CSS, then a checklist covering data integrity, visual design, accessibility, responsiveness and states.
Frequently asked questions
What is the data-visualization-mastery skill?
It is a SKILL.md in the phazurlabs/sumi repository for designing charts, dashboards and data-dense screens. Your AI coding agent gets selection criteria for 50+ chart types, KPI card rules, an anti-pattern table, dataviz tokens and a quality checklist, with React code using Recharts, D3 and Nivo.
How do I install data-visualization-mastery?
Run /plugin marketplace add phazurlabs/sumi, then /plugin install sumi@sumi-marketplace, and start with /sumi:start. Pick the scope when you install: user for all your projects, project through .claude/settings.json, or local and gitignored. The core is markdown with zero config. If /plugin is not recognised, update your agent.
How does it help choose a chart?
It organizes 50+ chart types by purpose, data shape and audience. A selection table pairs each purpose with recommended charts and charts to avoid, for example line, area or sparkline for trends over time, and treemap or 100% stacked bar for part-to-whole, with pie flagged above 5 slices.
What does it say about dashboards and density?
It sets a grid of 12 columns with a 24px gutter inside a 1440px container, and a KPI card height of about 120px. A density spectrum runs from glanceable at 3 to 7 items to dense at 200 to 1000+, with progressive disclosure levels 0 to 4.
Which anti-patterns does it flag?
An anti-pattern table lists a truncated Y-axis, which exaggerates differences in bar charts, pie charts with more than 5 slices, which are hard to read, and rainbow color scales, which are not perceptually uniform. Each comes with a fix, such as always starting bar charts at 0.
Which agent do I need and does it work offline?
You need the Claude Code CLI, authenticated. The core of the plugin is markdown with zero config, and it works offline. Run /sumi:start after installing and it asks what you are working on in plain words, then picks the play, so you never have to learn skill names.