Tufte

Aplica las reglas de Edward Tufte a gráficos, paneles e infografías en HTML/SVG o React

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

Probado · Funciona ★ 9.2/10

Tufte — Aplica las reglas de Edward Tufte a gráficos, paneles e infografías en HTML/SVG o React

Qué hace

Convierte cualquier solicitud de gráfico, panel, mosaico KPI o infografía en un diseño compatible con Tufte, generando HTML/SVG autocontenido o React (Recharts/D3). Incluye una referencia de 10 principios, una tabla de selección de tipo de gráfico a partir de datos, una lista de eliminación de `chartjunk`, una lista de verificación previa a la publicación y preajustes SVG funcionales para gráficos de puntos, `sparklines`, gráficos de líneas y `small multiples`. Se activa con `chart`, `graph`, `dashboard`, `infographic`, `visualize`, `data viz` o `Tufte`.

Informe de la prueba

Se obtuvo SKILL.md (raíz del repositorio) más principles.md, chart-selection.md, kill-list.md, checklist.md y presets/html-svg.md — todos HTTP 200 con contenido sustantivo, no de marcador de posición y código SVG real. Para la prueba de salida, construí dos gráficos de los mismos datos de ingresos de 5 líneas de productos: una línea base (mi predeterminado) y uno siguiendo estrictamente presets/html-svg.md. La línea base usó barras verticales en el orden de entrada, una paleta cualitativa de 5 tonos, una definición de gradiente, un filtro de sombra, un cuadro de borde SVG, cinco líneas de cuadrícula, una leyenda separada y no imprimió valores. La versión de la habilidad fue un gráfico de puntos ordenado descendentemente (Pulse 560 hasta Orbit 260), paleta Tufte `ink-on-paper`, números exactos impresos junto a cada punto mediante etiquetas directas (sin leyenda), un marco de rango con una tenue línea de cuadrícula, y el único acento rojo aplicado solo al líder — coincidiendo exactamente con la `kill-list` y `keep-list` de la habilidad. No se encontraron problemas de seguridad.

Probado el: 2026-07-31 · Claude Code 2.x (agent harness)

Instalación

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.

Comandos y prompts de ejemplo

/tufteAplica las reglas de Edward Tufte a gráficos, paneles e infografías en HTML/SVG o React

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

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

Informe completo →