tufte

name: tufte description: Apply Edward Tufte's principles to any data visualization, chart, dashboard, or infographic. Use when the user asks to produce, design, critique, or improve a chart, graph, dashboard, KPI tile, table-with-data, sparkline, small multiple, time series, distribution plot, choropleth, or any other visual that communicates quantitative or categorical information. Also triggers on words like "visualize", "viz", "data viz", "chart", "graph", "dashboard", "infographic", "Tufte". Outputs Tufte-compliant designs in either self-contained HTML/SVG or React (Recharts/D3). Defaults to Tufte rules; user can opt out per chart.

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. Run checklist.md before declaring the chart done. Twelve 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.

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, used to signal not to decorate
• Sorted categories (rarely alphabetical, almost never as-input)
• Tables when n ≤ ~20 and exact values matter

File index