VisActor Skills: charts, dashboards and posters
VisActor Skills
Nine VisActor skills: business charts, data stories, map dashboards and posters, all assembled by your agent
- 473 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Python and Node.js scripts run on your machine, and the pages pull libraries and fonts from a CDN
- Posters about people are assembled from photos and facts: the author must check image rights and data accuracy
Install
- Works in
Manual install
npx skills add VisActor/skills --skill chart-assistantReplace `chart-assistant` with the skill you need and pick Claude Code in the installer prompts.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Python and Node.js scripts run on your machine, and the pages pull libraries and fonts from a CDN
- Posters about people are assembled from photos and facts: the author must check image rights and data accuracy
This is third-party code. Review the repository files before installing.
What it does
A set of nine skills from the VisActor team for Claude Code, Codex and other agents that support skills. Each skill installs separately and brings its own instructions, references and scripts. For analytics there is `chart-assistant` (business charts with annotations and transparent PNGs), `chart-storytelling` (a report or briefing as an HTML story or a Web-PPT with scrolling and highlighted data) and three dashboards: a compact `visactor-light-dashboard`, one with a 2D map and one with a 3D globe. `visactor-chart-editor` adds a chart editor with field drag-and-drop. For publications there are `editorial-magazine` (a magazine-style post series, HTML and PNG), `life-chronicle` (a biography poster with a timeline) and `person-poster` (a poster about a person with VChart charts). The skills for the VChart and VTable libraries live in the repositories of those libraries.
Who it is for. Analysts, product managers and editors who turn a table or an article into a report, a dashboard or publication images without hand layout.
Good fit when
- You have a CSV with retention trends and a growth lead needs an HTML story with commentary on every chart
- Regional data should appear on an interactive map with metrics and records alongside
- An article with sources should become a magazine-style image series that stays editable
- The report is needed as a Web-PPT that opens in a browser
Not a fit when
- A `.pptx` file is required: the Web-PPT from `chart-storytelling` runs only in a browser
- The data is confidential and cannot go through pages that load libraries from a CDN: they fetch VChart, VTable, GSAP and fonts from the network
- You need charts for the VChart library in your own code: separate skills for that live in the VChart and VTable repositories
Example request
Use chart-storytelling to explain retention changes in this CSV and build an HTML story for the growth leadLimitations
An agent with file and shell access and its own model access is required; command-line installation also needs Node.js and npm. The agent searches for, generates and cuts out images, the skills have no such tools.
Requirements differ by skill. `chart-assistant` needs Node.js 18 or newer, `chart-storytelling` needs Python 3.10 and Node.js. `editorial-magazine` and `life-chronicle` need Python 3.10, the dependencies from `requirements.txt` and Chromium or Chrome for PNG export. `person-poster` needs Pillow and Playwright.
Generated HTML and JavaScript run as code. Review third-party material before opening it in a browser.
How to disable. Delete the folder of the skill you need from the agent's skills directory, for example `.claude/skills/chart-storytelling`. The generated results sit separately in the project and stay.
FAQ
How do I install the VisActor skills in Claude Code?
In the project folder run `npx skills add VisActor/skills --skill chart-assistant`, replacing the name with the skill you need, and pick Claude Code or Codex in the installer prompts. Each skill installs separately.
What does chart-storytelling do?
It turns data analysis into an HTML story or a Web-PPT. First the skill prepares a plan in `plan.md` and you approve it, then the artifact is built: a scrolling page with chart annotations and commentary.
Can I install a skill without the command line?
Yes. Download the skill's ZIP from GitHub Releases (an asset such as `chart-storytelling.zip`, not the source archive) and import it into WorkBuddy or Doubao Work through skill management.
Where are the skills for VChart and VTable?
In the `VisActor/VChart` and `VisActor/VTable` repositories. The commands are `npx skills add VisActor/VChart --skill vchart-development-assistant` and `npx skills add VisActor/VTable --skill vtable-development-assistant`.
Do I need API keys?
The skills ask for no keys themselves. Model access, search and image generation come from the agent the skill runs in.
Discussion
No questions or reviews yet.
Related
SkillsAntV Chart Visualization Skills
chart-visualization-skills
Data visualization skills from AntV: choosing a chart type and building it. The repository accepts only AI code. The antv CLI
A skill that picks a scientific chart from nearly 100 templates for CSV or Excel data and outputs PNG, SVG, PDF and Python code.
A data visualization skill for agents: turns data into polished interactive HTML charts and full reports with one visual language
SciPilot Figure
scipilot-figure-skill
A scientific visualization advisor skill: it profiles the data and picks a chart for the argument first, then renders it to journal-grade quality
A Claude Code and Codex skill that plots your data in the style of a figure from a scientific paper
A skill for scientific figures to Nature, Cell and Science standards: 29 figure types, data checks and vector PDF output.
README in short
The project page lists the nine skills with their tasks, three installation methods (through the agent, `npx skills add` and a ZIP from Releases), environment requirements and sample requests. An example gallery shows inputs and results. MIT license.
README badge
Original SKILL.md
---
name: chart-storytelling
description: >
将数据分析转化为图文结合、便于分享的 HTML 数据故事或 Web-PPT。
适用于制作分析报告、业务简报和数据专题，尤其适合图表滚动叙事：随滚动逐步呈现数据与解读，
配合图表标注突出关键数据、变化和结论，帮助受众理解趋势、差异与构成；也支持网页演示。
---
# 图表叙事（Chart Storytelling）
以图表组织证据，使用预设章节模式将数据分析转化为 HTML 故事或 Web-PPT，先产出可跨产物复用的 `plan.md`，再由对应的 build 模块生成具体产物。核心架构：**共享叙事设计（Phase 1-3）+ 按产物执行 Build（Phase 4）**。
## 核心定义
Data Story = **Data**（洞察证据）+ **Narrative**（认知路径）+ **Visuals**（视觉呈现）
数据叙事不是"把分析结果视觉化"，而是把三者组合成一个让特定受众更快理解、更容易决策的产品。
真正的数据故事必须同时回答：
1. 读者最关心什么问题？
2. 哪些证据足以回答这个问题？
3. 页面如何安排顺序，让读者几乎不需要"自我翻译"就能看懂？
---
## 架构概览
```
Phase 1-3（共享叙事核心）
理解 → 数据分析 → 叙事设计
↓
plan.md
故事元信息 + 证据骨架 + 章节基础结构 + 样式选择
↓
用户确认 plan.md
↓
Phase 4: Build（按目标产物加载对应 build 模块）
↓
build-html/ | build-ppt/
↓