/tufte-data-viz
Use when creating, reviewing, or styling charts, graphs, dashboards, sparklines, or any data visualization. Applies to Recharts, ECharts, Chart.js, matplotlib, Plotly, seaborn, D3.js, and SVG. Enforces Tufte principles (data-ink ratio, direct labeling, range-frame axes) plus
$ npx -y skills add caylent/tufte-data-viz --skill tufte-data-viz --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/tufte-data-viz
Context preview
The summary Claude sees to decide when to auto-load this skill.
Use when creating, reviewing, or styling charts, graphs, dashboards, sparklines, or any data visualization. Applies to Recharts, ECharts, Chart.js, matplotlib, Plotly, seaborn, D3.js, and SVG. Enforces Tufte principles (data-ink ratio, direct labeling, range-frame axes) plus
SKILL.md
tufte-data-viz.SKILL.mdname: tufte-data-viz
description: >-
Use when creating, reviewing, or styling charts, graphs, dashboards,
sparklines, or any data visualization. Applies to Recharts, ECharts,
Chart.js, matplotlib, Plotly, seaborn, D3.js, and SVG. Enforces Tufte
principles (data-ink ratio, direct labeling, range-frame axes) plus
modern screen-first standards (accessibility, responsive, dark mode).
allowed-tools: Read, Glob, Grep
Tufte Data Visualization
Apply Edward Tufte's principles whenever generating or reviewing code that renders data visually. This skill covers chart generation, not slide/presentation design.
Workflow
Follow these steps in order when creating any chart:
Step 1: Identify the message
Before writing code, determine: 1. The key finding or trend the chart must make visible. 2. The comparison context — a baseline, prior period, target, or peer group. A number without context is meaningless. 3. The chart type that best fits the data structure (see Chart type guidance below).
Step 2: Apply universal rules
Review the rules below. Every rule is a default — deviate only when the user explicitly requests otherwise.
Step 3: Apply library-specific config
Use the Library quick reference table to find the essential overrides for the target library. For complete code examples and helper functions, read ONE rule file from `rules/` matching the library.
Step 4: Validate
Run through the validation checklist at the bottom of this file before presenting the chart.
---
Universal rules
Rules 1–14 cover static principles; 15–19 extend them for screens; 20–22 address content and formatting.
1. Remove top and right borders
No chart should have top or right axis lines, borders, or spines. The bottom and left axes are sufficient. Top and right lines are pure chartjunk.
2. Direct labels, not legends
Label each data series directly — at the endpoint of a line, on or beside a bar, next to a cluster. Remove the `<Legend>` component entirely. If there is only one series, the chart title provides that context; no label is needed.
3. No gridlines by default
The default is zero gridlines. For static charts where users need to read precise values, add horizontal-only gridlines at very low opacity (0.08–0.12). For interactive charts, prefer a contextual crosshair on hover instead (see rule 15). Never add vertical gridlines.
4. Range-frame axes
Axis lines should span only the range of the data, not from zero to some arbitrary maximum. The axis starts at (or near) the minimum data value and ends at the maximum.
5. No 3D effects
No perspective, no depth, no shadows on chart elements. Two-dimensional data gets two-dimensional representation.
6. No pie charts unless explicitly requested
Default to a horizontal bar chart sorted by value. If the user explicitly asks for a pie chart: maximum 4 slices, 2D only, start at 12 o'clock, direct percentage labels on each slice.
7. Aspect ratio ~1.5:1
Charts should be approximately 50% wider than tall. Standard sizes: 600x400, 750x500, 900x600. Exception: sparklines and small multiples may be more compact.
8. Gray first, highlight selectively
The default data series color is medium gray (`#666`). Use a single accent color to highlight the most important series or data point. Never use more than 4 distinct colors. Choose the right palette type: **categorical** (4-color muted) for unordered groups, **sequential** (single-hue ramp) for ordered magnitude, **diverging** (two-hue from center) for deviation from a midpoint. See `rules/typography-and-color.md` for hex values.
9. Off-white background
Light mode: `#fffff8`. Dark mode: `#151515`. Never use pure white (`#ffffff`) or pure black (`#000000`).
10. Serif fonts for data
Use serif fonts for data labels, annotations, and chart titles: `"ET Book", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif`. Sans-serif (system-ui, sans-serif) is acceptable only for small axis tick labels (11-12px).
11. No dual y-axes
Two y-axes on one chart create false implied correlations. Use small multiples instead — two charts stacked vertically with shared x-axis.
12. Annotate the notable
If the data contains a peak, trough, inflection point, or event boundary, add a text annotation pointing to it directly on the chart. Place annotations in the nearest clear space — offset from the data point with a short leader line if needed. When multiple annotations compete for space, keep only the most important; move others to a footnote or tooltip.
13. Show comparison context
Include at least one reference element: a reference line (average, target, prior period), a shaded band, or a second series. A chart showing one line with no context fails the "Compared to what?" test.
14. Minimal tooltips
Tooltips should be plain text with the data value and label. No colored background, no border, no arrow pointer, no shadow.
15. Progressive disclosure over static density
Default to the Tufte-clean overview — high data-ink, minimal chrome. Layer details through hover, tap, and click (values, annotations, comparisons). Don't frontload everything onto a single static view. A contextual crosshair on hover replaces permanent gridlines.
16. Accessible by default
3:1 contrast ratio minimum for chart elements against their background; 4.5:1 for text in charts. Never use color as the sole differentiator — pair with shape, pattern, or direct label. Provide a text alternative for every chart (`aria-label` with key finding, or companion data table). Interactive charts must be keyboard-navigable.
17. Responsive, not just resized
Charts must have a responsive strategy — fluid (percentage width + viewBox), adaptive (breakpoint-based layout changes), or hybrid. At narrow viewports, change chart type or layout (horizontal bars for categories, reduced tick density, abbreviated labels), don't just shrink.
18. Animate to explai
Read more
name: tufte-data-viz description: >- Use when creating, reviewing, or styling charts, graphs, dashboards, sparklines, or any data visualization. Applies to Recharts, ECharts, Chart.js, matplotlib, Plotly, seaborn, D3.js, and SVG. Enforces Tufte principles (data-ink ratio, direct labeling, range-frame axes) plus modern screen-first standards (accessibility, responsive, dark mode). allowed-tools: Read, Glob, Grep
Tufte Data Visualization
Apply Edward Tufte's principles whenever generating or reviewing code that renders data visually. This skill covers chart generation, not slide/presentation design.
Workflow
Follow these steps in order when creating any chart:
Step 1: Identify the message
Before writing code, determine: 1. The key finding or trend the chart must make visible. 2. The comparison context — a baseline, prior period, target, or peer group. A number without context is meaningless. 3. The chart type that best fits the data structure (see Chart type guidance below).
Step 2: Apply universal rules
Review the rules below. Every rule is a default — deviate only when the user explicitly requests otherwise.
Step 3: Apply library-specific config
Use the Library quick reference table to find the essential overrides for the target library. For complete code examples and helper functions, read ONE rule file from `rules/` matching the library.
Step 4: Validate
Run through the validation checklist at the bottom of this file before presenting the chart.
---
Universal rules
Rules 1–14 cover static principles; 15–19 extend them for screens; 20–22 address content and formatting.
1. Remove top and right borders
No chart should have top or right axis lines, borders, or spines. The bottom and left axes are sufficient. Top and right lines are pure chartjunk.
2. Direct labels, not legends
Label each data series directly — at the endpoint of a line, on or beside a bar, next to a cluster. Remove the `<Legend>` component entirely. If there is only one series, the chart title provides that context; no label is needed.
3. No gridlines by default
The default is zero gridlines. For static charts where users need to read precise values, add horizontal-only gridlines at very low opacity (0.08–0.12). For interactive charts, prefer a contextual crosshair on hover instead (see rule 15). Never add vertical gridlines.
4. Range-frame axes
Axis lines should span only the range of the data, not from zero to some arbitrary maximum. The axis starts at (or near) the minimum data value and ends at the maximum.
5. No 3D effects
No perspective, no depth, no shadows on chart elements. Two-dimensional data gets two-dimensional representation.
6. No pie charts unless explicitly requested
Default to a horizontal bar chart sorted by value. If the user explicitly asks for a pie chart: maximum 4 slices, 2D only, start at 12 o'clock, direct percentage labels on each slice.
7. Aspect ratio ~1.5:1
Charts should be approximately 50% wider than tall. Standard sizes: 600x400, 750x500, 900x600. Exception: sparklines and small multiples may be more compact.
8. Gray first, highlight selectively
The default data series color is medium gray (`#666`). Use a single accent color to highlight the most important series or data point. Never use more than 4 distinct colors. Choose the right palette type: **categorical** (4-color muted) for unordered groups, **sequential** (single-hue ramp) for ordered magnitude, **diverging** (two-hue from center) for deviation from a midpoint. See `rules/typography-and-color.md` for hex values.
9. Off-white background
Light mode: `#fffff8`. Dark mode: `#151515`. Never use pure white (`#ffffff`) or pure black (`#000000`).
10. Serif fonts for data
Use serif fonts for data labels, annotations, and chart titles: `"ET Book", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif`. Sans-serif (system-ui, sans-serif) is acceptable only for small axis tick labels (11-12px).
11. No dual y-axes
Two y-axes on one chart create false implied correlations. Use small multiples instead — two charts stacked vertically with shared x-axis.
12. Annotate the notable
If the data contains a peak, trough, inflection point, or event boundary, add a text annotation pointing to it directly on the chart. Place annotations in the nearest clear space — offset from the data point with a short leader line if needed. When multiple annotations compete for space, keep only the most important; move others to a footnote or tooltip.
13. Show comparison context
Include at least one reference element: a reference line (average, target, prior period), a shaded band, or a second series. A chart showing one line with no context fails the "Compared to what?" test.
14. Minimal tooltips
Tooltips should be plain text with the data value and label. No colored background, no border, no arrow pointer, no shadow.
15. Progressive disclosure over static density
Default to the Tufte-clean overview — high data-ink, minimal chrome. Layer details through hover, tap, and click (values, annotations, comparisons). Don't frontload everything onto a single static view. A contextual crosshair on hover replaces permanent gridlines.
16. Accessible by default
3:1 contrast ratio minimum for chart elements against their background; 4.5:1 for text in charts. Never use color as the sole differentiator — pair with shape, pattern, or direct label. Provide a text alternative for every chart (`aria-label` with key finding, or companion data table). Interactive charts must be keyboard-navigable.
17. Responsive, not just resized
Charts must have a responsive strategy — fluid (percentage width + viewBox), adaptive (breakpoint-based layout changes), or hybrid. At narrow viewports, change chart type or layout (horizontal bars for categories, reduced tick density, abbreviated labels), don't just shrink.
18. Animate to explai
An agent skill that applies Edward Tufte's data visualization principles when generating charts, plots, and graphs.
Repo: caylent/tufte-data-viz