Tufte

Past Edward Tufte's regels toe op grafieken, dashboards en infographics in HTML/SVG of React

Door aref-vc · aref-vc/tufte-claude-skill

Getest · Werkt ★ 9.2/10

Tufte — Past Edward Tufte's regels toe op grafieken, dashboards en infographics in HTML/SVG of React

Wat het doet

Zet elk verzoek voor een grafiek, dashboard, KPI-tegel of infographic om in een Tufte-compatibel ontwerp, met uitvoer van zelfstandige HTML/SVG of React (Recharts/D3). Bundelt een 10-principes referentie, een data-naar-grafiektype selectietabel, een chartjunk kill-list, een pre-publicatie checklist, en werkende SVG-presets voor dot plots, sparklines, lijngrafieken en small multiples. Activeert bij chart, graph, dashboard, infographic, visualize, data viz, of Tufte.

Testrapport

SKILL.md (repo root) plus principles.md, chart-selection.md, kill-list.md, checklist.md, en presets/html-svg.md opgehaald — allemaal HTTP 200 met substantiële, niet-placeholder inhoud en echte SVG-code. Voor de uitvoer-test bouwde ik twee grafieken van dezelfde omzetgegevens van 5 productlijnen: een baseline (mijn standaard) en één die strikt presets/html-svg.md volgde. Baseline gebruikte verticale balken in de volgorde van invoer, een 5-kleuren kwalitatief palet, een gradiëntdefinitie, een drop-shadow filter, een SVG-randvak, vijf rasterlijnen, een aparte legenda, en drukte geen waarden af. De skill-versie was een dot plot gesorteerd aflopend (Pulse 560 tot Orbit 260), Tufte inkt-op-papier palet, exacte nummers afgedrukt naast elke dot via directe labels (geen legenda), een range frame met één vage rasterlijn, en het enkele rode accent alleen toegepast op de leider — precies overeenkomend met de kill-list en keep-list van de skill. Geen beveiligingsrisico's gevonden.

Getest op: 2026-07-31 · Claude Code 2.x (agent harness)

Installatie

git clone --depth 1 https://github.com/aref-vc/tufte-claude-skill.git /tmp/tufte-src
mkdir -p ~/.claude/skills/tufte
cp -R /tmp/tufte-src/. ~/.claude/skills/tufte/
# SKILL.md is at the repo root; the copy above places it at ~/.claude/skills/tufte/SKILL.md
# No external deps, API keys, or scripts. Reference files (principles.md, chart-selection.md,
# kill-list.md, checklist.md, presets/*.md) and assets are read on demand by the skill body.

Commando's en voorbeeldprompts

/tuftePast Edward Tufte's regels toe op grafieken, dashboards en infographics in HTML/SVG of React

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

Critique this chart using Tufte's principles
Redesign this dashboard to cut chartjunk
Build a Tufte-style sparkline table

Volledig rapport (Engels) →