New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Dataviz Craft

by QinghongLin in QinghongLin/data2story-skill

A shared reference library for editorial-grade data-visualization craft — Vega-Lite-first with a D3 fallback for charts Vega-Lite can't express.

MITAuto-check passedData & Analytics

Install Dataviz Craft

skills CLI
$ npx skills add QinghongLin/data2story-skill --skill dataviz-craft -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install QinghongLin/data2story-skill dataviz-craft --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/QinghongLin/data2story-skill.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/dataviz-craft .claude/skills/dataviz-craft && rm -rf skills-src

Use ~/.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/

Facts

Skill name
dataviz-craft
GitHub stars
155
Token cost
~1.9k tokens
SKILL.md length
701 words
Files
7 (incl. references)
Skills in repo
31
Repo updated
First seen
Licence
MIT

At a glance

A shared reference library for editorial-grade data-visualization craft — Vega-Lite-first with a D3 fallback for charts Vega-Lite can't express.

  • Works in 6 steps: Vega-Lite-first. Build every chart… → One chart, one idea. Each chart answers… → Annotate the key datum. The reader… → …
  • Tasks that involve Data visualization
  • SKILL.md covers When to use, Core principles and References
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Dataviz Craft is an agent skill from QinghongLin/data2story-skill. A shared reference library for editorial-grade data-visualization craft — Vega-Lite-first with a D3 fallback for charts Vega-Lite can't express. Read by the Designer at chart selection (intent → ranked chart type), the Programmer at implementation (editorial Vega-Lite recipes, annotation layers, axis/label de-clutter, encoding craft), and the Auditor/Critic for chart-quality review. It encodes the FT Visual Vocabulary intent taxonomy, the Cleveland–McGill channel-accuracy ordering, the BBC bbplot de-clutter…

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 7 other files, including reference files (for example `references/annotation_layers.json`, `references/axis_label_polish.json` and `references/chart_chooser.json`).

It sits in Data & Analytics, covering Data visualization. The repository describes itself as: Data Journalist Agent: Transforming Data into Verifiable Multimodal Story. The licence is MIT.

When your agent uses it

  • Tasks that involve Data visualization

Example prompts

  • “/dataviz-craft”

Requirements

  • Pre-approved tools (allowed-tools): Read

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Vega-Lite-first. Build every chart Vega-Lite can express as a Vega-Lite spec via Vega-Embed (CDN). Reach for D3 only for types Vega-Lite…
  2. One chart, one idea. Each chart answers one question. If a chart needs two sentences to explain, split it. Pick the chart type from the…
  3. Annotate the key datum. The reader should see the point being made without hunting. Label the line end, draw the threshold/reference line…
  4. De-clutter the frame. Remove what doesn't carry information: minor gridlines, redundant axis lines/ticks/titles, legends when a direct…
  5. Right channel for the intent. Prefer the most accurate visual channel the data allows: position > length > angle > area > color…
  6. Color is borrowed, never reinvented. Use the story's --accent for the highlighted datum and mute the rest. For…

What it can do on your machine

Read from SKILL.md and the folder at commit 63a55c1. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Read

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    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

Dataviz Craft loads about 1.9k tokens when it runs, and up to ~18k if it reads all its reference files. Until then it costs about 158 tokens; SKILL.md has 701 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~158
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~18k

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 QinghongLin/data2story-skill at commit 63a55c1, republished under its MIT licence (© QinghongLin). 701 words, ~1,926 tokens.

Download SKILL.mdSave it as .claude/skills/dataviz-craft/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.
name
dataviz-craft
description
A shared reference library for editorial-grade data-visualization craft — Vega-Lite-first with a D3 fallback for charts Vega-Lite can't express. Read by the Designer at chart selection (intent → ranked chart type), the Programmer at implementation (editorial Vega-Lite recipes, annotation layers, axis/label de-clutter, encoding craft), and the Auditor/Critic for chart-quality review. It encodes the FT Visual Vocabulary intent taxonomy, the Cleveland–McGill channel-accuracy ordering, the BBC bbplot de-clutter ruleset, and colorblind-safe encoding rules. Not a pipeline stage — a craft source, like frontend-design.
allowed-tools
Read

Dataviz Craft

A shared library for choosing and building charts that carry one idea cleanly. This is not a pipeline stage; it is a reference the Designer reads to pick the right chart type for the message, the Programmer reads to build it as an editorial Vega-Lite spec, and the Auditor/Critic reads to judge whether a chart is honest and legible.

It is the chart-craft counterpart to frontend-design (page/visual identity). For color scales it does not redefine anything — it cross-references frontend-design/references/design_tokens.json data_color_scales. For Vega-Lite mechanics (mount/centering/width:container/scale.zero/labelExpr) it extends data2story-pro/programmer/references/component_implementations.json, it does not duplicate it.

When to use

  • Designer: before writing a chart_spec per section, name the message's intent (deviation / correlation / ranking / distribution / change-over-time / part-to-whole / magnitude / spatial / flow) and pick a ranked candidate from references/chart_chooser.json. Record the chart type + intent + what to highlight in designer.json. If the chosen type is tagged vega_lite_native: false, flag it for the D3 fallback.
  • Programmer: implement the chosen type from references/vega_recipes.json (editorial Vega-Lite skeleton), add reference/threshold/label layers from references/annotation_layers.json, apply the de-clutter config from references/axis_label_polish.json, and obey references/encoding_craft.json (area-not-radius, sort-by-value, no dual-axis, colorblind-safe). For a native:false type use references/d3_fallback_recipes.json.
  • Auditor / Critic: review a chart against the same files — is the chart type right for the stated intent (chart_chooser), does the baseline lie (axis_label_polish zero-baseline rule), is the key datum annotated (annotation_layers), is the encoding accurate and colorblind-safe (encoding_craft, Cleveland–McGill ordering)?

Core principles

  1. Vega-Lite-first. Build every chart Vega-Lite can express as a Vega-Lite spec via Vega-Embed (CDN). Reach for D3 only for types Vega-Lite cannot express (sankey, treemap, chord, sunburst, force-network) — see references/d3_fallback_recipes.json. D3 is an allowed CDN, not the default.
  2. One chart, one idea. Each chart answers one question. If a chart needs two sentences to explain, split it. Pick the chart type from the message intent, not from what looks impressive — references/chart_chooser.json.
  3. Annotate the key datum. The reader should see the point being made without hunting. Label the line end, draw the threshold/reference line, highlight the one bar that matters with the accent — references/annotation_layers.json.
  4. De-clutter the frame. Remove what doesn't carry information: minor gridlines, redundant axis lines/ticks/titles, legends when a direct label is clearer — references/axis_label_polish.json.
  5. Right channel for the intent. Prefer the most accurate visual channel the data allows: position > length > angle > area > color (Cleveland–McGill). Encode the key variable in the strongest available channel — references/encoding_craft.json, references/chart_chooser.json.
  6. Color is borrowed, never reinvented. Use the story's --accent for the highlighted datum and mute the rest. For sequential/diverging/categorical scales, cross-reference frontend-design/references/design_tokens.json data_color_scales — the same value means the same color across map, bars and callouts. Colorblind-safe rules live in references/encoding_craft.json.
Show full SKILL.md (274 more words)Show less

References

  • references/chart_chooser.json — the decision core: 9 message intents → ranked chart candidates, each tagged vega_lite_native; the purpose-first frame (comparison/composition/distribution/relationship/trend → narrow intent) and the Cleveland–McGill channel-accuracy hierarchy.
  • references/vega_recipes.json — per-type editorial Vega-Lite recipe skeletons for every native type (bar/grouped/stacked, line/area/layered, slope, dot/lollipop, facet small-multiples, heatmap, strip/beeswarm, connected-scatter, scatter/bubble, choropleth): mark, key encoding notes, highlight, editorial defaults.
  • references/annotation_layers.json — Vega-Lite annotation techniques: rule marks for threshold/reference lines and range bands, text + argmax for line-end labels instead of a legend, in-chart callout boxes, conditional highlight of the key datum.
  • references/axis_label_polish.json — the BBC bbplot de-clutter ruleset as Vega-Lite config: gridline/tick/axis-line/title removal, legend on top, tick format/labelExpr ($/%/abbreviated, Vega-expr not JS), the zero-baseline rule, log-scale domain.
  • references/encoding_craft.json — beyond color: bubble area-not-radius, sort-by-value, the dual-axis warning, colorblind-safe palettes and redundant encoding. Cross-refs design_tokens.json data_color_scales for the actual scales.
  • references/d3_fallback_recipes.json — ONLY the non-native types (sankey, treemap, chord, sunburst, force-network): when to reach for D3, a recipe outline (D3 module + layout generator), and the SVG-mark performance ceiling.
  • ../frontend-design/references/design_tokens.json — (cross-reference, not owned here) data_color_scales for sequential/diverging/categorical color.

A chart is well-crafted when its type matches the message intent, the baseline is honest, the one datum that matters is annotated, the frame carries no decoration, the strongest available channel encodes the key variable, and the colors mean the same thing everywhere and survive color blindness.

_license_note: This file encodes uncopyrightable methods and re-authored principles. Taxonomy and intent → chart mapping derive from the Financial Times Visual Vocabulary (method, re-authored — not FT prose). Channel-accuracy ordering from Cleveland & McGill (1984). De-clutter rules adapted from the BBC bbplot R package (MIT). Purpose-first framing and several encoding facts re-authored from rohitg00/data-visualization and chrisvoncsefalvay data-viz references. Vega-Lite mechanics extend the project's own component_implementations.json.

© QinghongLin, 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 6 other files (references) in skills/dataviz-craft of QinghongLin/data2story-skill.

  • SKILL.md
  • references/annotation_layers.json
  • references/axis_label_polish.json
  • references/chart_chooser.json
  • references/d3_fallback_recipes.json
  • references/encoding_craft.json
  • references/vega_recipes.json

Open the folder on GitHubat commit 63a55c1

Compare with similar skills

Dataviz Craft 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.

Dataviz Craft compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Dataviz Craft this skillQinghongLin/data2story-skill155—~1.9kAutomated safety check: PassMIT
MatplotlibzLanqing/codex-claude-academic-skills4.7k17 repos~2.9kAutomated safety check: PassMIT
Chart Visualizationbytedance/deer-flow84k1 repos~840Automated safety check: PassMIT
Scientific Visualizationmims-harvard/OptimusKG14719 repos~6.3kAutomated safety check: PassMIT
SeabornzLanqing/codex-claude-academic-skills4.7k15 repos~4.9kAutomated safety check: PassBSD-3-Clause
Plot From DataTrae1ounG/paper-plot-skills8721 repos~583Automated safety check: PassNone

Similar skills

  • Matplotlib

    zLanqing/codex-claude-academic-skills

    Low-level plotting library for full customization. An agent skill from zLanqing/codex-claude-academic-skills.

    4.7k GitHub starsUsed in 17 repos~2.9k tokens
    Data & AnalyticsAuto-check passed

  • Chart Visualization

    bytedance/deer-flow

    Picks a suitable chart type from 26 options for your data, maps the data to that chart's parameters and generates a chart image through a JavaScript script.

    84k GitHub starsUsed in 1 repo~840 tokens
    Data & AnalyticsAuto-check passed

  • Scientific Visualization

    mims-harvard/OptimusKG

    Create publication figures with matplotlib/seaborn/plotly. An agent skill from mims-harvard/OptimusKG.

    147 GitHub starsUsed in 19 repos~6.3k tokens
    Data & AnalyticsAuto-check passed

  • Seaborn

    zLanqing/codex-claude-academic-skills

    Statistical visualization with pandas integration. An agent skill from zLanqing/codex-claude-academic-skills.

    4.7k GitHub starsUsed in 15 repos~4.9k tokens
    Data & AnalyticsAuto-check passed

  • Plot From Data

    Trae1ounG/paper-plot-skills

    Generate publication-quality matplotlib figures by selecting a pre-built paper style and substituting user data.

    872 GitHub starsUsed in 1 repo~583 tokens
    Data & AnalyticsAuto-check passed

  • Scientific Figure Making

    ChenLiu-1996/figures4papers

    Covers publication-ready matplotlib figures for academic papers, slides, and reports—bars, trends, scatter, heatmaps, and multi-panel layouts—with this…

    8.3k GitHub stars~557 tokensUpdated yesterday
    Data & AnalyticsAuto-check passed

More from QinghongLin/data2story-skill

All 31 skills in this repo

  • Inspector

    QinghongLin/data2story-skill

    Run sentence-level traceability verification on a Data2Story blog (verify.py - verifier.json), then emit the in-page Inspector panel (the reader-facing runnable verifier) + the verify/ artifacts…

    155 GitHub stars~3.1k tokensUpdated 3 mo ago
    Auto-check: notes

  • Auditor

    QinghongLin/data2story-skill

    Audit a generated Data2Story blog for build correctness across ALL modalities by ACTUALLY RENDERING it in a real headless browser (when available) — catching blank/0-width charts, broken/oversized…

    155 GitHub stars~6.4k tokensUpdated 3 mo ago
    Auto-check: notes

  • Critic

    QinghongLin/data2story-skill

    Review a finished Data2Story blog against the 5 quality rubric dimensions (visualdesign, narrativepacing, datamethodtransparency, claimdataalignment, insightvalue), score each 1-7 with on-page…

    155 GitHub stars~4.7k tokensUpdated 3 mo ago
    Auto-check: notes

  • Detective

    QinghongLin/data2story-skill

    Research external context for a dataset — domain background, history, related studies, and why this data matters.

    155 GitHub stars~2.4k tokensUpdated 3 mo ago
    Auto-check: notes

  • Inspector

    QinghongLin/data2story-skill

    Run sentence-level traceability verification on a blog, then generate viewer.html with interactive evidence panel.

    155 GitHub stars~697 tokensUpdated 3 mo ago
    Auto-check: notes

  • Data2story Pro

    QinghongLin/data2story-skill

    A skill your agent uses to turn a dataset into a verifiable multimedia blog (a data story / data-driven article / interactive dashboard from a dataset).

    155 GitHub stars~14k tokensUpdated 3 mo ago
    Auto-check: notes

Categories

Questions about Dataviz Craft

What does Dataviz Craft do?

A shared reference library for editorial-grade data-visualization craft — Vega-Lite-first with a D3 fallback for charts Vega-Lite can't express. Dataviz Craft is an agent skill from QinghongLin/data2story-skill. A shared reference library for editorial-grade data-visualization craft — Vega-Lite-first with a D3 fallback for charts Vega-Lite can't express.

When should I use Dataviz Craft?

Dataviz Craft fits situations like: tasks that involve Data visualization.

How do I install Dataviz Craft in Claude Code?

Run `npx skills add QinghongLin/data2story-skill --skill dataviz-craft -a claude-code`. Or copy the skill folder (skills/dataviz-craft in QinghongLin/data2story-skill) into .claude/skills/dataviz-craft in your project. Claude Code loads it when a task matches its description.

How do I install Dataviz Craft in Codex?

Run `npx skills add QinghongLin/data2story-skill --skill dataviz-craft -a codex`. Or copy the skill folder (skills/dataviz-craft in QinghongLin/data2story-skill) into .agents/skills/dataviz-craft in your project. Codex loads it when a task matches its description.

Can I use Dataviz Craft 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 QinghongLin/data2story-skill --skill dataviz-craft -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/dataviz-craft, .gemini/skills/dataviz-craft, .github/skills/dataviz-craft and .opencode/skills/dataviz-craft in your project.

What does Dataviz Craft need to run?

SKILL.md names no scripts, command-line tools or credentials: Dataviz Craft is instructions for the agent only. Its frontmatter pre-approves these tools: Read.

Does Dataviz Craft 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 Dataviz Craft 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 Dataviz Craft use?

Dataviz Craft 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 Dataviz Craft use?

About 1.9k tokens (SKILL.md is roughly 7.7k 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 17k tokens, read only when the agent opens those files.

What are the alternatives to Dataviz Craft?

Skills that share tags, products or a category with Dataviz Craft: Matplotlib (zLanqing/codex-claude-academic-skills, 4.7k stars), Chart Visualization (bytedance/deer-flow, 84k 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 Dataviz Craft?

QinghongLin (a GitHub user) maintains it in QinghongLin/data2story-skill, which has 155 GitHub stars. The repository holds 31 skills in this directory. The repository was last updated on July 5, 2026.

Source: QinghongLin/data2story-skill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.