Tufte Data Viz
caylent/tufte-data-viz
A skill your agent uses when creating, reviewing, or styling charts, graphs, dashboards, sparklines, or any data visualization.
Create, review, and restyle data visualizations using Edward Tufte principles: high data-ink ratio, direct labels, range-frame axes, small multiples, accessible color, responsive charts, and honest…
Install Chart Clarity
$ npx skills add Mathews-Tom/armory --skill chart-clarity -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install Mathews-Tom/armory chart-clarity --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/Mathews-Tom/armory.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/chart-clarity .claude/skills/chart-clarity && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "chart-clarity" agent skill from https://github.com/Mathews-Tom/armory/tree/main/skills/chart-clarity into .claude/skills/chart-clarity/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-clarity", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/Mathews-Tom/armory/tree/main/skills/chart-clarityType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add Mathews-Tom/armory --skill chart-clarity -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install Mathews-Tom/armory chart-clarity --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Mathews-Tom/armory.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/chart-clarity .agents/skills/chart-clarity && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "chart-clarity" agent skill from https://github.com/Mathews-Tom/armory/tree/main/skills/chart-clarity into .agents/skills/chart-clarity/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-clarity", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Mathews-Tom/armory --skill chart-clarity -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install Mathews-Tom/armory chart-clarity --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Mathews-Tom/armory.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/chart-clarity .cursor/skills/chart-clarity && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "chart-clarity" agent skill from https://github.com/Mathews-Tom/armory/tree/main/skills/chart-clarity into .cursor/skills/chart-clarity/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-clarity", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/Mathews-Tom/armory.git --path skills/chart-clarity--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add Mathews-Tom/armory --skill chart-clarity -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install Mathews-Tom/armory chart-clarity --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Mathews-Tom/armory.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/chart-clarity .gemini/skills/chart-clarity && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "chart-clarity" agent skill from https://github.com/Mathews-Tom/armory/tree/main/skills/chart-clarity into .gemini/skills/chart-clarity/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-clarity", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install Mathews-Tom/armory chart-clarityInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add Mathews-Tom/armory --skill chart-clarity -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/Mathews-Tom/armory.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/chart-clarity .github/skills/chart-clarity && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "chart-clarity" agent skill from https://github.com/Mathews-Tom/armory/tree/main/skills/chart-clarity into .github/skills/chart-clarity/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-clarity", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add Mathews-Tom/armory --skill chart-clarity -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install Mathews-Tom/armory chart-clarity --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/Mathews-Tom/armory.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/chart-clarity .opencode/skills/chart-clarity && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "chart-clarity" agent skill from https://github.com/Mathews-Tom/armory/tree/main/skills/chart-clarity into .opencode/skills/chart-clarity/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-clarity", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
chart-clarity- GitHub stars
- 329
- Token cost
- ~2.5k tokens
- SKILL.md length
- 1,175 words
- Files
- 35 (incl. references, assets)
- Skills in repo
- 80
- Repo updated
- First seen
- Licence
- MIT
At a glance
Create, review, and restyle data visualizations using Edward Tufte principles: high data-ink ratio, direct labels, range-frame axes, small multiples, accessible color, responsive charts, and honest…
- Works in 6 steps: Identify the message. Determine the… → Identify comparison context. Add a… → Choose the chart type. Use the data… → …
- : create a chart
- SKILL.md covers When to Use, Trigger Families, Workflow and Universal Rules, plus 3 more sections
- Runs JavaScript, TypeScript and Python scripts from its folder
What it does
Chart Clarity is an agent skill from Mathews-Tom/armory. Create, review, and restyle data visualizations using Edward Tufte principles: high data-ink ratio, direct labels, range-frame axes, small multiples, accessible color, responsive charts, and honest comparisons. Triggers on: "create a chart", "style this chart", "review this graph", "Tufte chart", "data visualization", "Recharts", "Plotly", "matplotlib", "Chart.js", "ECharts", "D3". Use when generating or critiquing charts, dashboards, sparklines, and data tables.
Its SKILL.md is about 2.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 39 other files, including reference files and assets (for example `evals/cases.yaml`, `references/examples/chartjs-tufte-plugin.js` and `references/examples/echarts-tufte-theme.ts`).
It sits in Data & Analytics, covering Data visualization. It works with Chart.js, Matplotlib and Plotly. The repository describes itself as: Curated, production-grade skills for AI coding agents. Battle-tested workflows for developers who use AI seriously. The licence is MIT.
When your agent uses it
- : create a chart
- Style this chart
- Review this graph
- Data visualization
Example prompts
- “create a chart”
- “style this chart”
- “review this graph”
- “/chart-clarity”
Requirements
- Python 3
- Node.js
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Identify the message. Determine the finding the chart needs to make visible. A useful title states the finding: "Revenue Beat Target by…
- Identify comparison context. Add a baseline, prior period, target, average, peer group, or distribution. A number without comparison…
- Choose the chart type. Use the data shape to select line, horizontal bar, scatter, small multiple, sparkline, slopegraph, heatmap, or…
- Apply the universal rules. Remove decorative ink, direct-label series, use gray-first color, annotate notable features, format numbers for…
- Read one library reference. For implementation code, read exactly one matching library file from references/rules/ unless the task…
- Validate before presenting. Run the checklist at the end of this file against the final chart or review output.
What it can do on your machine
Read from SKILL.md and the folder at commit 4594fb7. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships script files (JavaScript, TypeScript and Python, from the files we listed), which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Chart Clarity loads about 2.5k tokens when it runs, and up to ~41k if it reads all its reference files. Until then it costs about 120 tokens; SKILL.md has 1,175 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from Mathews-Tom/armory at commit 4594fb7, republished under its MIT licence (© Mathews-Tom). 1,175 words, ~2,454 tokens.
Download SKILL.mdSave it as
.claude/skills/chart-clarity/SKILL.md (or your agent's skills folder). This skill also uses 34 other files; get the full folder from GitHub.- name
- chart-clarity
- description
- Create, review, and restyle data visualizations using Edward Tufte principles: high data-ink ratio, direct labels, range-frame axes, small multiples, accessible color, responsive charts, and honest comparisons. Triggers on: "create a chart", "style this chart", "review this graph", "Tufte chart", "data visualization", "Recharts", "Plotly", "matplotlib", "Chart.js", "ECharts", "D3". Use when generating or critiquing charts, dashboards, sparklines, and data tables.
- metadata.version
- 1.0.0
- metadata.category
- visualization
- metadata.tags
- charts, data-viz, tufte, accessibility, visualization
- metadata.difficulty
- intermediate
- metadata.complements
- static-web-artifacts-builder, ux-expert
Chart Clarity
Create and critique charts that make quantitative comparisons obvious without decorative chartjunk. This skill adapts Caylent's MIT-licensed tufte-data-viz skill into armory under the broader chart-clarity name. It applies Edward Tufte's core data visualization principles and adds screen-first requirements for accessibility, responsiveness, dark mode, progressive disclosure, and human-readable numbers.
Use this skill whenever the user asks for a chart, graph, plot, dashboard visualization, sparkline, slopegraph, data table, or visualization review. It covers Recharts, ECharts, Chart.js, matplotlib, Plotly, seaborn, D3.js, SVG, and HTML.
When to Use
| User need | Use chart-clarity | Use instead |
|---|---|---|
| Generate chart code in Recharts, Plotly, matplotlib, Chart.js, ECharts, D3, SVG, or HTML | Yes | — |
| Review an existing chart for misleading design, clutter, accessibility, or readability | Yes | — |
| Restyle dashboard charts while keeping the dashboard structure unchanged | Yes | ux-expert for broader dashboard UX |
| Build a static infographic or rich HTML artifact around charts | No | static-web-artifacts-builder |
| Design a slide deck or presentation using charts | No | html-presentation, marp-slides, or pptx |
| Design logos, posters, icons, or non-data visuals | No | concept-to-image or canvas-design |
Trigger Families
- Chart creation: "create a chart", "plot this data", "make a graph", "build a sparkline", "generate a slopegraph".
- Chart review: "review this visualization", "what is wrong with this graph", "make this chart clearer", "remove chartjunk".
- Tufte-specific: "Tufte chart", "high data-ink ratio", "range-frame axes", "small multiples", "direct labels".
- Library-specific: "Recharts", "ECharts", "Chart.js", "matplotlib", "seaborn", "Plotly", "D3", "SVG chart".
Workflow
Follow this order for every chart task.
- Identify the message. Determine the finding the chart needs to make visible. A useful title states the finding: "Revenue Beat Target by 24% in Q2", not "Revenue by Month".
- Identify comparison context. Add a baseline, prior period, target, average, peer group, or distribution. A number without comparison context is weak evidence.
- Choose the chart type. Use the data shape to select line, horizontal bar, scatter, small multiple, sparkline, slopegraph, heatmap, or table. Refuse pie charts by default; use sorted horizontal bars unless the user explicitly asks for a pie chart.
- Apply the universal rules. Remove decorative ink, direct-label series, use gray-first color, annotate notable features, format numbers for humans, and ensure the chart earns its space.
- Read one library reference. For implementation code, read exactly one matching library file from
references/rules/unless the task compares multiple libraries. - Validate before presenting. Run the checklist at the end of this file against the final chart or review output.
Universal Rules
- Remove top and right borders, spines, frames, and plot boxes.
- Use direct labels instead of legends. Remove legend components unless the user explicitly requires one.
- Remove gridlines by default. If precision reading requires gridlines, use horizontal-only rules at 8-12% opacity.
- Use range-frame axes where the axis spans the data range rather than arbitrary empty space.
- Use two-dimensional marks only. No 3D, shadows, bevels, gradients, or perspective effects.
- Avoid pie charts. If explicitly requested, use no more than four slices, direct percentage labels, and 2D rendering only.
- Aim for an aspect ratio near 1.5:1 for ordinary charts. Sparklines and small multiples are exceptions.
- Start with gray data marks and one accent color for the key point, line, or series. Use no more than four distinct colors.
- Use off-white light backgrounds (
#fffff8) and intentional dark backgrounds (#151515). Avoid pure white and pure black. - Use serif fonts for titles, labels, annotations, and data values. Small axis ticks can use system sans-serif.
- Do not use dual y-axes. Use small multiples with shared x-axis or shared scales.
- Annotate peaks, troughs, inflection points, event boundaries, and outliers directly on the chart.
- Show comparison context with a reference line, target, prior-period series, shaded band, or peer group.
- Keep tooltips plain: label, value, unit, and minimal context. No shadows, arrows, decorative panels, or color blocks.
- Use progressive disclosure. Keep the overview clean and reveal details through hover, focus, tap, or click.
- Make charts accessible: 3:1 contrast for chart elements, 4.5:1 for text, text alternatives, keyboard access, and no color-only encoding.
- Make charts responsive by changing layout, tick density, or chart type across viewport widths. Do not merely shrink dense desktop charts.
- Animate data transformations only. Respect
prefers-reduced-motion. - Treat dark mode as a separate palette. Never invert colors mechanically.
- Make titles assert findings, not describe axes.
- Format numbers for humans:
$1.2M,12,450, consistent precision, units stated once. - Do not chart one or two numbers. Use a sentence or table when that communicates more clearly.
Show full SKILL.md (429 more words)Show less
Library Quick Reference
Read one matching reference file for concrete implementation details:
| Library | Reference | Essential defaults |
|---|---|---|
| Recharts | references/rules/recharts.md | Hide grid, remove <Legend />, direct labels, no top/right axes, minimal tooltip |
| ECharts | references/rules/echarts.md | splitLine.show: false, legend.show: false, grid.show: false, endLabel |
| Chart.js | references/rules/chartjs.md | grid.display: false, plugins.legend.display: false, direct labels plugin |
| matplotlib/seaborn | references/rules/matplotlib.md | Hide top/right spines, set spine bounds, serif fonts, off-white figure background |
| Plotly | references/rules/plotly.md | showgrid=False, showlegend=False, plot_bgcolor='#fffff8', zeroline=False |
| D3/SVG/HTML | references/rules/svg-html.md | Minimal domains, no plot backgrounds, direct SVG text labels, accessible roles |
Cross-cutting references:
| Topic | Reference |
|---|---|
| Anti-pattern detection and one-line fixes | references/rules/anti-patterns.md |
| Accessibility, responsiveness, animation, dark mode | references/rules/interactive-and-accessible.md |
| Full palettes, font stacks, numeric typography | references/rules/typography-and-color.md |
| Small multiples, sparklines, slopegraphs | references/rules/small-multiples-sparklines.md |
| Working examples | references/examples/ |
| Interactive before/after demo, CDN-backed and reference-only | references/interactive-demo.html |
| Upstream license and provenance | references/upstream/ |
Chart Type Guidance
| Type | Default treatment |
|---|---|
| Line | 1.5-2px stroke, no dots unless fewer than seven points, direct label at endpoint, annotate notable events |
| Bar | Prefer horizontal bars for categories, sort descending, label values directly, use gray with one accent |
| Scatter | Small gray dots, highlight key cluster or outlier, add regression line only when analytically justified |
| Time series | Label events on the chart, compare against target or prior period, avoid dual axes |
| Small multiples | Same scale across panels, shared labels, no panel borders, direct panel titles |
| Sparkline | Word-sized, no axes or labels, min/max dots, endpoint value when useful |
| Table | Whitespace and thin rules, right-aligned numbers, no zebra striping, highlight meaningful outlier only |
| Slopegraph | Before/after endpoints labeled with names and values, gray slopes plus one highlight |
| Heatmap | Sequential or diverging palette, cell values where readable, companion table for accessibility |
Review Checklist
Before presenting code or critique, verify:
- No top or right border/spine/frame.
- No legend where direct labels work.
- Gridlines are absent or horizontal-only at opacity no greater than 0.12.
- Aspect ratio fits the data and target viewport.
- Background uses
#fffff8or an intentional dark palette, not pure white or black. - Data labels and titles use a serif font stack.
- Default series color is gray; accent color is selective.
- No 3D, decorative gradients, shadows, gauges, or chartjunk.
- No dual y-axis.
- The chart includes comparison context.
- The most important peak, trough, outlier, event, or inflection point is annotated.
- Tooltips are plain and accessible.
- Hover details have tap or focus alternatives.
- Text alternatives exist through
aria-label, nearby summary text, or data table. - Colors meet contrast requirements and are not the sole encoding.
- Animation is purposeful and respects reduced motion.
- The chart remains usable at narrow and wide viewports.
- The title states a finding.
- Numbers use readable units and consistent precision.
- The chart is warranted; a sentence or table would not communicate better.
© Mathews-Tom, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 34 other files (references, assets) in skills/chart-clarity of Mathews-Tom/armory.
- SKILL.md
- assets/showcase/before-after-animated.gif
- assets/showcase/before-after.png
- assets/showcase/small-multiples.png
- assets/showcase/tufte-accessible-scatter.png
- assets/showcase/tufte-bar-chart.png
- assets/showcase/tufte-dark-mode.png
- assets/showcase/tufte-data-table.png
- assets/showcase/tufte-light-dark.png
- assets/showcase/tufte-line-chart.png
- assets/showcase/tufte-slopegraph.png
- assets/showcase/tufte-sparklines.png
- evals/cases.yaml
- references/examples/chartjs-tufte-plugin.js
- references/examples/echarts-tufte-theme.ts
- references/examples/matplotlib-tufte-annotated.py
- … and 19 more
Open the folder on GitHubat commit 4594fb7
Compare with similar skills
Chart Clarity next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Chart Clarity this skillMathews-Tom/armory | 329 | — | ~2.5k | Automated safety check: Pass | MIT | |
| Tufte Data Vizcaylent/tufte-data-viz | 223 | — | ~3.5k | Automated safety check: Pass | MIT | |
| MatplotlibzLanqing/codex-claude-academic-skills | 4.7k | 17 repos | ~2.9k | Automated safety check: Pass | MIT | |
| Scientific Visualizationmims-harvard/OptimusKG | 147 | 19 repos | ~6.3k | Automated safety check: Pass | MIT | |
| SeabornzLanqing/codex-claude-academic-skills | 4.7k | 15 repos | ~4.9k | Automated safety check: Pass | BSD-3-Clause | |
| Paper FiguresEvoScientist/EvoSkills | 478 | 1 repos | ~4.4k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Matplotlib
zLanqing/codex-claude-academic-skills
Low-level plotting library for full customization. An agent skill from zLanqing/codex-claude-academic-skills.
Scientific Visualization
mims-harvard/OptimusKG
Create publication figures with matplotlib/seaborn/plotly. An agent skill from mims-harvard/OptimusKG.
Seaborn
zLanqing/codex-claude-academic-skills
Statistical visualization with pandas integration. An agent skill from zLanqing/codex-claude-academic-skills.
Paper Figures
EvoScientist/EvoSkills
A skill your agent uses to produce standalone, publication-ready PNG graphics and reproducible matplotlib scripts from tabular data (CSVs or DataFrames).
CJK Font Setup for Plots
xjtulyc/MedgeClaw
Detects a usable Chinese, Japanese or Korean font and configures matplotlib so chart labels, titles and legends render instead of showing empty boxes.
More from Mathews-Tom/armory
All 80 skills in this repoArchitecture Reviewer
Mathews-Tom/armory
Architecture reviews across 7 dimensions (structural, scalability, enterprise readiness, performance, security, ops, data) with scored reports.
Concept To Image
Mathews-Tom/armory
Turn concepts into static HTML visuals exported as PNG or SVG files via HTML/CSS/SVG.
Watch
Mathews-Tom/armory
A skill your agent uses when analyzing an existing video URL or local recording: "watch this video", "analyze youtube video", "summarize this video", "youtube transcript", "find this moment", "what…
Code Refiner
Mathews-Tom/armory
Deep code simplification and refactoring preserving behavior across Python, Go, TypeScript, Rust.
Concept To Video
Mathews-Tom/armory
Turn concepts into animated explainer videos using Manim (Python) with MP4/GIF output, audio overlay, multi-scene composition.
Decision Map
Mathews-Tom/armory
Maps the unresolved architecture, policy, and scope decisions that must be answered before planning can start: one durable decision ticket per question on the issue tracker, typed and blocker-linked…
Related
Works with
Categories
Questions about Chart Clarity
What does Chart Clarity do?
Create, review, and restyle data visualizations using Edward Tufte principles: high data-ink ratio, direct labels, range-frame axes, small multiples, accessible color, responsive charts, and honest…. Chart Clarity is an agent skill from Mathews-Tom/armory. Create, review, and restyle data visualizations using Edward Tufte principles: high data-ink ratio, direct labels, range-frame axes, small multiples, accessible color, responsive charts, and honest comparisons.
When should I use Chart Clarity?
Chart Clarity fits situations like: : create a chart; style this chart; review this graph; data visualization.
How do I install Chart Clarity in Claude Code?
Run `npx skills add Mathews-Tom/armory --skill chart-clarity -a claude-code`. Or copy the skill folder (skills/chart-clarity in Mathews-Tom/armory) into .claude/skills/chart-clarity in your project. Claude Code loads it when a task matches its description.
How do I install Chart Clarity in Codex?
Run `npx skills add Mathews-Tom/armory --skill chart-clarity -a codex`. Or copy the skill folder (skills/chart-clarity in Mathews-Tom/armory) into .agents/skills/chart-clarity in your project. Codex loads it when a task matches its description.
Can I use Chart Clarity in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Mathews-Tom/armory --skill chart-clarity -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/chart-clarity, .gemini/skills/chart-clarity, .github/skills/chart-clarity and .opencode/skills/chart-clarity in your project.
What does Chart Clarity need to run?
Going by SKILL.md and its folder, Chart Clarity needs JavaScript, TypeScript and Python for the scripts in its folder. Our summary lists: Python 3; Node.js.
Does Chart Clarity access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Chart Clarity safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Chart Clarity use?
Chart Clarity is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Chart Clarity use?
About 2.5k tokens (SKILL.md is roughly 9.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 39k tokens, read only when the agent opens those files.
What are the alternatives to Chart Clarity?
Skills that share tags, products or a category with Chart Clarity: Tufte Data Viz (caylent/tufte-data-viz, 223 stars), Matplotlib (zLanqing/codex-claude-academic-skills, 4.7k stars), Scientific Visualization (mims-harvard/OptimusKG, 147 stars) and Seaborn (zLanqing/codex-claude-academic-skills, 4.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Chart Clarity?
Mathews-Tom (a GitHub user) maintains it in Mathews-Tom/armory, which has 329 GitHub stars. The repository holds 80 skills in this directory. The repository was last updated on October 6, 2026.
Source: Mathews-Tom/armory on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.