Picking the wrong chart type is the most common visualization mistake. The single number gets a line chart with one dot. The category breakdown gets a stacked bar that nobody can read. The trend with seven categories gets a line chart with seven indistinguishable lines. Each is technically a chart and operationally useless. The right type follows from the question: single value gets a big number, trend gets a line, comparison gets a bar, distribution gets a histogram or violin, sequential conversion gets a funnel.
The /prism-chart skill selects the right chart type and library for the question, with accessibility grade, interaction level (hover, drill, none), data volume threshold (Recharts handles 1k points; D3 handles 100k), color guidance, and an accessibility fallback (text-equivalent, table for screen readers).
How /prism-chart works
The skill takes the question the chart answers, the data shape, the volume, and the audience. It picks the chart type, the library (Recharts, Chart.js, D3, ECharts, Visx), and the configuration. It produces the component with accessibility attributes, the screen-reader fallback (data table representation), and the color palette calibrated to the team's brand.
Color is the most overlooked accessibility issue in charts. /prism-chart picks palettes that work for the most common color-blindness types and provides a non-color-only encoding (texture, label) for the categorical axis.
Tonone's /prism-chart skill selects chart type and library calibrated to question, data, and audience, with accessibility fallback.
Related skills
Install
/prism-chart ships with the Prism agent in Tonone for Claude Code.
1. Add to marketplace
2. Install Prism
Frequently asked questions
- What does /prism-chart do?
- It selects chart type and library calibrated to question, data, and audience, and produces the accessible component with screen-reader fallback.
- How do I install /prism-chart?
- Install Tonone for Claude Code via tonone.ai/get-started.