[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-78890":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":15,"stars30d":16,"stars90d":14,"forks30d":14,"starsTrendScore":13,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":14,"starSnapshotCount":14,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},78890,"tufte-claude-skill","aref-vc\u002Ftufte-claude-skill","aref-vc","Claude Code skill that turns 'make me a chart' into a Tufte-compliant chart. Distilled from Edward Tufte's three foundational books.",null,"HTML",251,26,1,0,19,133,63.79,"MIT License",false,"main",true,[],"2026-06-12 04:01:24","# tufte-claude-skill\n\nA Claude Code skill that turns \"make me a chart\" into a Tufte-compliant chart. Distilled from the three foundational books by Edward R. Tufte.\n\n\u003Ctable>\n  \u003Ctr>\n    \u003Ctd align=\"center\" width=\"33%\">\u003Cimg src=\"assets\u002Fvdqi-cover.svg\" alt=\"The Visual Display of Quantitative Information\" width=\"240\"\u002F>\u003C\u002Ftd>\n    \u003Ctd align=\"center\" width=\"33%\">\u003Cimg src=\"assets\u002Fei-cover.svg\" alt=\"Envisioning Information\" width=\"240\"\u002F>\u003C\u002Ftd>\n    \u003Ctd align=\"center\" width=\"33%\">\u003Cimg src=\"assets\u002Fve-cover.svg\" alt=\"Visual Explanations\" width=\"240\"\u002F>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cb>The Visual Display of Quantitative Information\u003C\u002Fb>\u003Cbr\u002F>\u003Ci>1983 · 2nd ed. 2001\u003C\u002Fi>\u003Cbr\u002F>\u003Csub>pictures of \u003Cb>numbers\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Envisioning Information\u003C\u002Fb>\u003Cbr\u002F>\u003Ci>1990\u003C\u002Fi>\u003Cbr\u002F>\u003Csub>pictures of \u003Cb>nouns\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cb>Visual Explanations\u003C\u002Fb>\u003Cbr\u002F>\u003Ci>1997\u003C\u002Fi>\u003Cbr\u002F>\u003Csub>pictures of \u003Cb>verbs\u003C\u002Fb>\u003C\u002Fsub>\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\n---\n\n## Install\n\nClone into your Claude Code skills directory:\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Faref-vc\u002Ftufte-claude-skill.git ~\u002F.claude\u002Fskills\u002Ftufte\n```\n\nThat's it. Claude Code auto-loads the skill on next launch. To verify, run `\u002Ftufte` or ask Claude to \"make a chart of anything.\"\n\nTo update later:\n\n```bash\ncd ~\u002F.claude\u002Fskills\u002Ftufte && git pull\n```\n\nTo uninstall:\n\n```bash\nrm -rf ~\u002F.claude\u002Fskills\u002Ftufte\n```\n\n---\n\n## The three books, distilled\n\nTufte gives the three-book taxonomy himself on page 9 of *Visual Explanations*:\n\n- **VDQI** — how to depict data and enforce statistical honesty. The book that gave us *data-ink ratio*, *chartjunk*, *lie factor*, *small multiples*.\n- **EI** — how to lay out information in space. Layering, micro\u002Fmacro readings, color rules, escaping flatland.\n- **VE** — how to show motion, causality, narrative. The smallest effective difference, parallelism, visual confections.\n\nTogether they yield the ten principles this skill applies.\n\n### The ten principles\n\n1. **Show the data.** Above all else. Every other decision asks \"does this help the reader see the data?\"\n2. **Maximize the data-ink ratio.** Ink that would change if the data changed is data-ink. Everything else is overhead.\n3. **Erase non-data-ink.** Drop the frame box, drop the gridlines, drop the ticks at minor units.\n4. **Erase redundant data-ink.** Pick one encoding per quantity. A bar plus a number plus a gridline plus an axis tick all saying \"37\" is one thing said four times.\n5. **Graphical integrity.** Lie factor between 0.95 and 1.05. Bar charts start at zero. Never use area for a 1D quantity.\n6. **Small multiples.** When you have a cross-cut (region, segment, cohort), make N small charts on a shared scale instead of one chart with N lines.\n7. **Layering and separation.** Data on top, labels next, scaffolding faintest. Watch for the *1+1=3 effect* — when two heavy elements interact to create unintended visual noise.\n8. **Micro\u002Fmacro readings.** Good charts work at two scales: one shape from across the room, every data point legible up close.\n9. **The smallest effective difference.** \"Make all visual distinctions as subtle as possible, but still clear and effective.\" Gray for context, one accent for focus.\n10. **Word-data integration.** Sparklines belong in sentences. Numbers belong next to their visual. Tables are charts too.\n\nTufte's own five-line summary from VDQI p.105:\n\n> Above all else show the data.\n> Maximize the data-ink ratio.\n> Erase non-data-ink.\n> Erase redundant data-ink.\n> Revise and edit.\n\n---\n\n## How the skill works\n\nWhen you ask Claude to make, design, critique, or improve any chart, the skill activates automatically. It then:\n\n1. **Reads `principles.md`** to recall the ten rules.\n2. **Picks the chart type** from `chart-selection.md` based on your data shape and goal — not from what's familiar or what the library makes easy.\n3. **Applies `kill-list.md`** — removes the things that don't belong (3D, pie, dual-axis, rainbow scales, frame boxes, redundant legends).\n4. **Produces the chart** in your preferred stack: self-contained HTML\u002FSVG, or React (Recharts + D3).\n5. **Runs `checklist.md`** as a final pass before declaring it done.\n\nDefault strictness: Tufte by default, override per chart on request (\"I need a pie because the CFO wants one\" → comply, but note the alternative).\n\n---\n\n## The one-page cheatsheet\n\nA printable reference covering principles, lie-factor formula, chart-selection table, kill list, color rules, and the 12-item checklist. Open [`cheatsheet.html`](.\u002Fcheatsheet.html) in a browser or print [`cheatsheet.pdf`](.\u002Fcheatsheet.pdf).\n\n![One-page Tufte cheatsheet](assets\u002Fcheatsheet.png)\n\n---\n\n## Before and after\n\nNine pairs comparing typical AI\u002FBI default output (left) to Tufte-applied output (right). The full interactive gallery is at [`before-after.html`](.\u002Fbefore-after.html) — open in any browser. Six pairs inlined here:\n\n### 1. Category comparison — sales by product\n\n![Before vs after: category comparison](assets\u002Fpair-1-category.png)\n\n3D bars with a six-color rainbow legend become a sorted dot plot with direct labels. The reader ranks in two seconds instead of decoding a key.\n\n### 2. Time series — monthly active users\n\n![Before vs after: time series](assets\u002Fpair-3-timeseries.png)\n\nA line chart trapped in a frame box (with gridlines, legend, axis title, chart title) becomes a sparkline plus the current value plus two endpoint labels. Same data, ~80% less ink.\n\n### 3. Dashboard — four KPIs\n\n![Before vs after: dashboard](assets\u002Fpair-4-dashboard.png)\n\nFour KPI tiles with giant numbers and decorative icons become a compact table with value, sparkline (10-month trend), and delta-to-target. One accent color flags the metric that's off-target.\n\n### 4. Period comparison — Q2 vs Q3 by team\n\n![Before vs after: slopegraph](assets\u002Fpair-7-slopegraph.png)\n\nClustered bars (two colors, ten bars to mentally pair up) become a slopegraph. Each line's slope is the change. Steepest gainer and only decliner read instantly without decoding a legend.\n\n### 5. Conversion funnel — signup flow\n\n![Before vs after: funnel](assets\u002Fpair-8-funnel.png)\n\nA 3D tapered funnel chart (where the visual taper exaggerates the drop-off) becomes horizontal bars sized by share of stage 1, with retention percentage printed per step. The worst step is annotated.\n\n### 6. Cohort retention\n\n![Before vs after: cohort retention](assets\u002Fpair-9-cohort.png)\n\nA rainbow heatmap (where viewers guess if yellow is more than green) becomes a sequential single-hue table with numbers printed in every cell and a sparkline showing each cohort's decay shape.\n\nThe other three pairs in the gallery: part-to-whole (pie → sorted table), distribution (rainbow histogram → strip plot with quantile markers), geographic (rainbow choropleth → sequential single-hue with annotations).\n\n---\n\n## When to use the skill\n\nThe skill auto-activates on any of these:\n\n- \"Make a chart of...\", \"visualize...\", \"graph...\", \"plot...\"\n- \"Build a dashboard for...\", \"design a KPI tile...\"\n- \"Improve this chart\", \"critique this visual\"\n- \"What chart should I use for...?\"\n- Direct invocation: `\u002Ftufte` or mentioning Tufte by name\n- Any project where chart code is being added or edited\n\nIt does *not* activate for:\n\n- Logo design, illustration, or decorative graphics\n- Flowcharts, architecture diagrams, hand-drawn sketches\n- Pure typography or layout that has no quantitative data\n\n---\n\n## How to use the skill\n\n### Fast path\n\nJust ask. The skill loads automatically and produces a Tufte-compliant chart:\n\n> Make a chart of monthly revenue for the last 12 months\n\nYou'll get a sparkline with the current value, two endpoint labels, no frame box, no legend.\n\n### Stack choice\n\nTell Claude which output you want:\n\n| Say | You'll get |\n|---|---|\n| \"as inline SVG\" or no preference | Self-contained HTML\u002FSVG, single file |\n| \"in React\" or \"with Recharts\" | Recharts component with Tufte theme |\n| \"with D3\" | D3-in-React (for dot plots, slopegraphs, custom small multiples) |\n\n### Override the defaults\n\nIf you specifically need something on the kill list:\n\n> Make a pie chart of revenue mix — the CFO wants a pie\n\nClaude will produce the pie, but include a one-line comment noting the Tufte alternative (a sorted table). You stay in control.\n\n### Iterate on an existing chart\n\nPaste your chart code or screenshot and say:\n\n> Apply Tufte to this\n\nClaude will identify violations (frame box, gridlines, gradient fills, redundant legend, wrong sort), and produce a rewritten version.\n\n---\n\n## File index\n\n| File | Purpose |\n|---|---|\n| [`SKILL.md`](.\u002FSKILL.md) | Trigger description + skill index (loaded by Claude) |\n| [`principles.md`](.\u002Fprinciples.md) | The ten rules, with Tufte's exact quotes |\n| [`chart-selection.md`](.\u002Fchart-selection.md) | Data + goal → chart type decision table |\n| [`kill-list.md`](.\u002Fkill-list.md) | What to remove from any chart |\n| [`before-after.html`](.\u002Fbefore-after.html) | Nine side-by-side comparisons (open in browser) |\n| [`checklist.md`](.\u002Fchecklist.md) | 12-item pre-publish check |\n| [`cheatsheet.html`](.\u002Fcheatsheet.html) \u002F [`cheatsheet.pdf`](.\u002Fcheatsheet.pdf) | One-page printable reference |\n| [`presets\u002Fhtml-svg.md`](.\u002Fpresets\u002Fhtml-svg.md) | Style tokens + working SVG templates (sparkline, dot plot, line, small multiples, sparkline-in-table) |\n| [`presets\u002Freact.md`](.\u002Fpresets\u002Freact.md) | Recharts theme + D3-in-React patterns (slopegraph, dot plot, what-to-never-import list) |\n\n---\n\n## Requirements\n\n- [Claude Code](https:\u002F\u002Fdocs.claude.com\u002Fen\u002Fdocs\u002Fclaude-code) installed\n- Skill auto-loads from `~\u002F.claude\u002Fskills\u002F`\n- No other dependencies for the skill itself\n- The cheatsheet PDF is included, but to regenerate it from the HTML you'll need [`weasyprint`](https:\u002F\u002Fweasyprint.org\u002F) (`pip install weasyprint`)\n\n---\n\n## Contributing\n\nPull requests welcome. Useful additions:\n\n- More before\u002Fafter pairs (sankey, network, gantt, calendar heatmap, control chart)\n- Output presets for other stacks: Python (matplotlib, plotly), Observable Plot, Vega-Lite, ggplot2\n- Examples that show Tufte applied to real-world charts you've improved\n\nOpen an issue first for anything that adds a new chart type to the decision table — let's discuss the rule before adding it.\n\n---\n\n## License\n\n[MIT](.\u002FLICENSE). Use it, modify it, ship it.\n\nThe skill content is original; quotations from Tufte's books are used under fair-use for educational reference and are attributed inline.\n\n---\n\n> The principles of information design are universal — like mathematics — and are not tied to unique features of a particular language or culture.\n>\n> — Edward R. Tufte, *Envisioning Information*, p. 10\n","该项目是一个Claude Code技能，能够将“为我制作一个图表”的请求转化为符合Tufte标准的图表。核心功能是基于Edward Tufte的三本基础书籍《定量信息的视觉展示》、《信息构想》和《视觉解释》提炼出的原则自动生成高质量的数据可视化图表，特别强调数据-墨水比最大化、图形完整性以及小倍数等原则的应用。技术上主要使用HTML语言实现。适用于需要快速生成专业级数据图表且希望遵循最佳实践原则的场景，如学术研究、数据分析报告制作等领域。",2,"2026-06-11 03:57:17","CREATED_QUERY"]