Tufte

Anvender Edward Tuftes regler på diagrammer, dashboards og infografik i HTML/SVG eller React

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

Testet · Virker ★ 9.2/10

Tufte — Anvender Edward Tuftes regler på diagrammer, dashboards og infografik i HTML/SVG eller React

Hvad det gør

Omdanner enhver anmodning om et diagram, dashboard, KPI-flise eller infografik til et Tufte-kompatibelt design, der udsender selvstændig HTML/SVG eller React (Recharts/D3). Indeholder en 10-princippers reference, en data-til-diagramtype-udvælgelsestabel, en chartjunk-kill-liste, en pre-publish tjekliste og fungerende SVG-forudindstillinger for punktplot, sparklines, linjediagrammer og små multipla. Udløses på diagram, graf, dashboard, infografik, visualiser, data viz eller Tufte.

Testrapport

Hentede SKILL.md (repo root) plus principles.md, chart-selection.md, kill-list.md, checklist.md og presets/html-svg.md — alle HTTP 200 med substantielt, ikke-placeholder indhold og ægte SVG-kode. Til output-testen byggede jeg to diagrammer af de samme 5-produktlinjers omsætningsdata: en baseline (min standard) og en, der strengt fulgte presets/html-svg.md. Baseline brugte lodrette søjler i inputrækkefølge, en 5-nuance kvalitativ palet, en gradientdef, et drop-shadow filter, en SVG-ramme, fem gitterlinjer, en separat legende og udskrev ingen værdier. Skill-versionen var et punktplot sorteret faldende (Pulse 560 ned til Orbit 260), Tufte blæk-på-papir palet, nøjagtige tal udskrevet ved siden af hver prik via direkte etiketter (ingen legende), en rammekasse med én svag gitterlinje og den enkelte røde accent anvendt kun på lederen — matchende skill'ens kill-list og keep-list nøjagtigt. Ingen sikkerhedsbrister fundet.

Testet: 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.

Kommandoer og eksempelprompter

  • /tufteAnvender Edward Tuftes regler på diagrammer, dashboards og infografik i HTML/SVG eller React

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

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