Dashboard Builder
QwenLM/qwen-code-examples
Build full-stack dashboard applications using React/Next.js + shadcn/ui + Tailwind CSS + Recharts + Express with customizable data sources.
Apply Edward Tufte's principles to any data visualization, chart, dashboard, or infographic.
Install Tufte
$ npx skills add aref-vc/tufte-claude-skill --skill tufte -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install aref-vc/tufte-claude-skill tufte --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "tufte" agent skill from https://github.com/aref-vc/tufte-claude-skill/tree/main into .claude/skills/tufte/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tufte", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add aref-vc/tufte-claude-skill --skill tufte -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install aref-vc/tufte-claude-skill tufte --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "tufte" agent skill from https://github.com/aref-vc/tufte-claude-skill/tree/main into .agents/skills/tufte/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tufte", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add aref-vc/tufte-claude-skill --skill tufte -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install aref-vc/tufte-claude-skill tufte --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "tufte" agent skill from https://github.com/aref-vc/tufte-claude-skill/tree/main into .cursor/skills/tufte/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tufte", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add aref-vc/tufte-claude-skill --skill tufte -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install aref-vc/tufte-claude-skill tufte --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "tufte" agent skill from https://github.com/aref-vc/tufte-claude-skill/tree/main into .gemini/skills/tufte/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tufte", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install aref-vc/tufte-claude-skill tufteInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add aref-vc/tufte-claude-skill --skill tufte -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "tufte" agent skill from https://github.com/aref-vc/tufte-claude-skill/tree/main into .github/skills/tufte/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tufte", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add aref-vc/tufte-claude-skill --skill tufte -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install aref-vc/tufte-claude-skill tufte --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "tufte" agent skill from https://github.com/aref-vc/tufte-claude-skill/tree/main into .opencode/skills/tufte/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "tufte", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
tufte- GitHub stars
- 307
- Token cost
- ~1.3k tokens
- SKILL.md length
- 643 words
- Files
- 26 (incl. assets)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
Apply Edward Tufte's principles to any data visualization, chart, dashboard, or infographic.
- Works in 2 steps: Self-contained HTML/SVG — single file,… → React (Recharts + D3 fallback) — for…
- The user asks to produce
- SKILL.md covers What this skill produces, How to use this skill, Default behavior and Prose around the chart, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Tufte is an agent skill from aref-vc/tufte-claude-skill. 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…
Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 26 other files, including assets (for example `README.md`, `chart-selection.md` and `checklist.md`).
It sits in Data & Analytics, covering Data visualization, Infographics and OKRs and executive reporting. It works with React. The repository describes itself as: Claude Code skill that turns 'make me a chart' into a Tufte-compliant chart. Distilled from Edward Tufte's three foundational books. The licence is MIT.
When your agent uses it
- The user asks to produce
- Improve a chart
- Table-with-data
- Distribution plot
Example prompts
- “visualize”
- “data viz”
- “dashboard”
- “/tufte”
Workflow steps
2 steps, taken from the first numbered list in SKILL.md.
- 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…
What it can do on your machine
Read from SKILL.md and the folder at commit a145acf. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Tufte loads about 1.3k tokens when it runs. Until then it costs about 156 tokens; SKILL.md has 643 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from aref-vc/tufte-claude-skill at commit a145acf, republished under its MIT licence (© aref-vc). 643 words, ~1,270 tokens.
Download SKILL.mdSave it as
.claude/skills/tufte/SKILL.md (or your agent's skills folder). This skill also uses 25 other files; get the full folder from GitHub.- 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:
- 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.mdto 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.mdbefore rendering — strip the things that don't belong in any Tufte-compliant chart. - Check
before-after.htmlwhen the user wants to see the difference. Six side-by-side examples covering the cases AI tools default to badly. - Read
report-voice.mdwhen 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.mdbefore 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.
Show full SKILL.md (292 more words)Show less
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 (
--accentred), 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 |
© aref-vc, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 25 other files (assets) in the repository root of aref-vc/tufte-claude-skill.
- SKILL.md
- .gitignore
- LICENSE
- README.md
- assets/cheatsheet.png
- assets/ei-cover.svg
- assets/gallery-full.png
- assets/pair-1-category.png
- assets/pair-3-timeseries.png
- assets/pair-4-dashboard.png
- assets/pair-7-slopegraph.png
- assets/pair-8-funnel.png
- assets/pair-9-cohort.png
- assets/vdqi-cover.svg
- assets/ve-cover.svg
- before-after.html
- chart-selection.md
- cheatsheet.html
- cheatsheet.pdf
- checklist.md
- … and 6 more
Open the folder on GitHubat commit a145acf
Compare with similar skills
Tufte next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Tufte this skillaref-vc/tufte-claude-skill | 307 | — | ~1.3k | Automated safety check: Pass | MIT | |
| Dashboard BuilderQwenLM/qwen-code-examples | 143 | — | ~3.3k | Automated safety check: Pass | None | |
| D3 Vizcalesthio/OpenMontage | 66k | 3 repos | ~5.4k | Automated safety check: Pass | AGPL-3.0 | |
| Data Visualizationvivy-yi/xiaohongshu-skills | 478 | — | ~7.5k | Automated safety check: Pass | None | |
| Microsim Generatordmccreary/ibook-skills | 105 | — | ~11k | Automated safety check: Pass | None | |
| Lieflat Chartslarashero3-dotcom/lieflat-charts | 6k | 1 repos | ~4.5k | Automated safety check: Pass | CC-BY-NC-4.0 |
Similar skills
D3 Viz
calesthio/OpenMontage
Creating interactive data visualisations using d3.js. An agent skill from calesthio/OpenMontage.
Data Visualization
vivy-yi/xiaohongshu-skills
A skill your agent uses when presenting data insights, creating infographics, or making complex information visual
Microsim Generator
dmccreary/ibook-skills
Creates interactive educational MicroSims, routing to the best-matched generator - p5.js, Chart.js, Plotly, Mermaid, vis-network, timelines, maps, Venn, causal-loop/feedback-loop diagrams (CLD)…
Lieflat Charts
larashero3-dotcom/lieflat-charts
Generates single-file HTML charts and full-page reports from real gallery templates, using a grayscale base with optional color presets.
Highcharts React
highcharts/highcharts-react
A skill your agent uses to implement, configure, and troubleshoot Highcharts in React projects.
Related
Works with
Categories
Questions about Tufte
What does Tufte do?
Apply Edward Tufte's principles to any data visualization, chart, dashboard, or infographic. Tufte is an agent skill from aref-vc/tufte-claude-skill. Apply Edward Tufte's principles to any data visualization, chart, dashboard, or infographic.
When should I use Tufte?
Tufte fits situations like: the user asks to produce; improve a chart; table-with-data; distribution plot.
How do I install Tufte in Claude Code?
Run `npx skills add aref-vc/tufte-claude-skill --skill tufte -a claude-code`. Or copy the skill folder (the aref-vc/tufte-claude-skill repository) into .claude/skills/tufte in your project. Claude Code loads it when a task matches its description.
How do I install Tufte in Codex?
Run `npx skills add aref-vc/tufte-claude-skill --skill tufte -a codex`. Or copy the skill folder (the aref-vc/tufte-claude-skill repository) into .agents/skills/tufte in your project. Codex loads it when a task matches its description.
Can I use Tufte in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add aref-vc/tufte-claude-skill --skill tufte -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/tufte, .gemini/skills/tufte, .github/skills/tufte and .opencode/skills/tufte in your project.
What does Tufte need to run?
SKILL.md names no scripts, command-line tools or credentials: Tufte is instructions for the agent only.
Does Tufte access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Tufte safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Tufte use?
Tufte is published under the MIT licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Tufte use?
About 1.3k tokens (SKILL.md is roughly 5.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Tufte?
Skills that share tags, products or a category with Tufte: Dashboard Builder (QwenLM/qwen-code-examples, 143 stars), D3 Viz (calesthio/OpenMontage, 66k stars), Data Visualization (vivy-yi/xiaohongshu-skills, 478 stars) and Microsim Generator (dmccreary/ibook-skills, 105 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Tufte?
aref-vc (a GitHub user) maintains it in aref-vc/tufte-claude-skill, which has 307 GitHub stars. The repository was last updated on June 15, 2026.
Source: aref-vc/tufte-claude-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.