Tufte

Wendet Edward Tuftes Regeln auf Diagramme, Dashboards und Infografiken in HTML/SVG oder React an

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

Getestet · Funktioniert ★ 9.2/10

Tufte — Wendet Edward Tuftes Regeln auf Diagramme, Dashboards und Infografiken in HTML/SVG oder React an

Was es kann

Wandelt jede Anfrage für ein Diagramm, Dashboard, KPI-Kachel oder Infografik in ein Tufte-konformes Design um, das eigenständiges HTML/SVG oder React (Recharts/D3) ausgibt. Bündelt eine 10-Prinzipien-Referenz, eine Datentyp-zu-Diagrammtyp-Auswahltabelle, eine Chartjunk-Kill-Liste, eine Pre-Publish-Checkliste und funktionierende SVG-Presets für Punktediagramme, Sparklines, Liniendiagramme und Small Multiples. Wird ausgelöst bei chart, graph, dashboard, infographic, visualize, data viz oder Tufte.

Testbericht

SKILL.md (Repo-Root) sowie principles.md, chart-selection.md, kill-list.md, checklist.md und presets/html-svg.md abgerufen – alle HTTP 200 mit substanziellem, nicht-Platzhalter-Inhalt und echtem SVG-Code. Für den Ausgabe-Test erstellte ich zwei Diagramme derselben Umsatzdaten von 5 Produktlinien: eine Baseline (meine Standardeinstellung) und eine, die strikt presets/html-svg.md folgte. Die Baseline verwendete vertikale Balken in der Eingabereihenfolge, eine 5-Farbton-Qualitätspalette, eine Gradientendefinition, einen Schlagschattenfilter, eine SVG-Rahmenbox, fünf Gitterlinien, eine separate Legende und druckte keine Werte. Die Skill-Version war ein Punktdiagramm, absteigend sortiert (Pulse 560 bis Orbit 260), Tufte-Tinte-auf-Papier-Palette, exakte Zahlen neben jedem Punkt über direkte Beschriftungen (keine Legende), ein Bereichsrahmen mit einer schwachen Gitterlinie und der einzelne rote Akzent nur auf den Spitzenreiter angewendet – genau passend zur Kill-Liste und Keep-Liste des Skills. Keine Sicherheitsmängel gefunden.

Getestet am: 2026-07-31 · Claude Code 2.x (agent harness)

Installation

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.

Befehle & Beispiel-Prompts

/tufteWendet Edward Tuftes Regeln auf Diagramme, Dashboards und Infografiken in HTML/SVG oder React an

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

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

Vollständiger Testbericht (Englisch) →