tufte

Tufte — visual display, by the book

This skill turns "make me a chart" into a Tufte-compliant chart. Distilled from The Visual Display of Quantitative Information (1983/2001), Envisioning Information (1990), and Visual Explanations (1997).

What this skill produces

Two output stacks, selected by the user's project context:

Self-contained HTML/SVG — single file, inline SVG, no external deps. For one-offs, embeds, screenshots, slide decks.
React (Recharts + D3 fallback) — for projects that already use React. Recharts where the chart type fits; raw D3-in-React where it doesn't (slopegraph, sparkline-in-table, small multiples).

How to use this skill

When invoked, work through these in order:

Read principles.md — 10 rules, one paragraph each. The whole frame.
Use chart-selection.md to pick the chart type from the user's data and goal. Don't reach for a chart you know; reach for the one this table prescribes.
Apply kill-list.md before rendering — strip the things that don't belong in any Tufte-compliant chart.
Check before-after.html when the user wants to see the difference. Six side-by-side examples covering the cases AI tools default to badly.
Read report-voice.md when the output is a report, recap, or slide with prose around the chart. The writing can ruin a clean chart. Plain business English, no em-dashes, no AI slop.
Run checklist.md before declaring the chart done. Twenty items, takes 30 seconds.

For a quick lookup, cheatsheet.html (and cheatsheet.pdf) is the one-page reference.

Default behavior

Tufte rules apply by default. If the user explicitly requests something on the kill list ("I need a pie chart for this board deck because the CFO wants one"), comply, but note the Tufte alternative in a one-line comment in the code or the response.

Prose around the chart

When the output is a report, recap, or slide, the text matters as much as the chart. Write plain business English: no em-dashes, no drama or theatrics, no hype verbs, no AI-slop jargon. Name every label and caption for the specific case, not a placeholder. First the number, then what it means. See report-voice.md for the full kill/keep list. A clean chart wrapped in slop reads as slop.

The kill list, summarized

These are not in any Tufte-compliant chart unless the user explicitly overrides:

3D effects on any 2D quantity
Pie charts (use a sorted bar or a small table)
Dual-axis charts (use two small multiples instead)
Rainbow color scales for ordered data (use sequential single-hue)
Heavy gridlines, frame boxes, tick marks at every minor unit
Drop shadows, gradient fills, bevels, glow, "ducks"
Legends placed away from data (label data directly)
Moiré patterns, cross-hatching, dense stippling
Redundant data-ink (bar plus number plus axis plus gridline all showing the same quantity)
KPI cards with giant numbers and no context

The keep list

These belong in most Tufte charts:

Direct labels on data (no legends)
Sparklines next to numbers
Small multiples for any cross-cut
Range frames (axes only span where data exists)
Subtle gridlines (white-on-light, or omit)
A single accent color (--accent red), actually applied to the focal data point — not declared and left unused. Minimal ink is not the same as no signal. If nothing carries the accent, the chart is flat; pick the point the reader should look at and color it.
Data marks where they aid reading: dots on line endpoints, dot plots in place of bare bars
Sorted categories (rarely alphabetical, almost never as-input)
Tables when n ≤ ~20 and exact values matter

File index

File	Purpose
`principles.md`	Tufte's 10 rules with practical interpretation
`chart-selection.md`	Data + goal → chart type decision table
`kill-list.md`	What to remove from any chart
`before-after.html`	Six side-by-side comparisons (open in browser)
`report-voice.md`	Prose rules for reports/recaps/slides (no slop, no em-dashes)
`checklist.md`	20-item pre-publish check
`cheatsheet.html`	One-page printable reference
`cheatsheet.pdf`	Same, as PDF
`presets/html-svg.md`	Style tokens + a working SVG bar chart, line chart, sparkline, small multiple
`presets/react.md`	Recharts theme + D3 patterns for slopegraph, sparkline-in-table, small multiples