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:

1. Self-contained HTML/SVG — single file, inline SVG, no external deps. For one-offs, embeds, screenshots, slide decks.
2. 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:

1. Read principles.md — 10 rules, one paragraph each. The whole frame.
2. 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.
3. Apply kill-list.md before rendering — strip the things that don't belong in any Tufte-compliant chart.
4. 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.
5. 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.
6. 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