Tufte

Tillämpar Edward Tuftes regler på diagram, dashboards och infografik i HTML/SVG eller React

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

Testad · Fungerar ★ 9.2/10

Tufte — Tillämpar Edward Tuftes regler på diagram, dashboards och infografik i HTML/SVG eller React

Vad den gör

Förvandlar alla förfrågningar om diagram, dashboards, KPI-rutor eller infografik till en Tufte-kompatibel design, som producerar självständiga HTML/SVG eller React (Recharts/D3). Paketerar en 10-principerreferens, en datatill-diagramtyp-urvalstabell, en chartjunk-dödslista, en checklista före publicering och fungerande SVG-förinställningar för punktplottar, sparklines, linjediagram och små multiplar. Utlöses på chart, graph, dashboard, infographic, visualize, data viz, eller Tufte.

Testrapport

Hämtade SKILL.md (repo root) plus principles.md, chart-selection.md, kill-list.md, checklist.md och presets/html-svg.md – alla HTTP 200 med substantiellt, icke-platshållarinnehåll och verklig SVG-kod. För utdata-testet byggde jag två diagram över samma intäktsdata för 5 produktlinjer: en baseline (min standard) och en som strikt följde presets/html-svg.md. Baseline använde vertikala staplar i inmatningsordning, en 5-nyansers kvalitativ palett, en gradientdef, ett skuggfilter, en SVG-ram, fem rutnätlinjer, en separat legend och skrev inte ut några värden. Förmågeversionen var en punktplott sorterad fallande (Pulse 560 ner till Orbit 260), Tufte bläck-på-papper-palett, exakta siffror utskrivna bredvid varje punkt via direkta etiketter (ingen legend), en intervallram med en svag rutnätlinje, och den enda röda accenten tillämpades endast på ledaren – matchande förmågens kill-list och keep-list exakt. Inga säkerhetsbrister hittades.

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

Kommandon och exempelprompter

  • /tufteTillämpar Edward Tuftes regler på diagram, dashboards och infografik i HTML/SVG eller React

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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