VisActor Skills provides chart, dashboard, data story and poster tools for Claude Code, Codex, WorkBuddy, Doubao Work and other agents that support Skills.
Website and examples · Releases · Contributing
| Skill | Tasks |
|---|---|
| chart-assistant | Business charts and composition recipes, native KPI cards, MBB analysis annotations, editable Feishu cards, transparent PNGs and document image insertion |
| chart-storytelling | Analysis reports, business briefings and data features, with chart scrollytelling and annotations, delivered as HTML stories or Web-PPT |
| creative-data-storytelling | Create interactive stories that compare quantities, trace patterns across ordered passages or events, or use familiar objects and individual records to explain data. Combine continuous reading with full-bleed stages and optional exploration. Deliver static HTML and assets. |
| unit-data-storytelling | Create interactive data stories in which each data unit represents a record or a fixed quantity. As readers scroll, particles can gather into a familiar image, then scatter and regroup by time, category, or value in a full-screen view, showing how individual records fit into a larger pattern. |
| editorial-magazine | Magazine-style visual posts (杂志风图文): HTML / PNG series for news, biographies, outfits, travel, chronological stories and explainers |
| life-chronicle | Biography posters with photo walls, center grids, photo rings and editable timelines |
| person-poster | Person-led data posters with native VChart, editable HTML and high-resolution PNG |
| visactor-light-dashboard | Compact business dashboards with metrics, filters and further analysis |
| visactor-map2d-dashboard | Interactive 2D map dashboards linking regions, metrics and records |
| visactor-chart-editor | Self-service chart editing with field drag-and-drop and live data exploration |
| visactor-map3d-dashboard | 3D globe dashboards for regional analysis and linked evidence |
Chart and table Skills are maintained in their library repositories. Install them directly from the source:
| Skill | Tasks | Repository |
|---|---|---|
| VChart Skill | Chart generation, diagnosis, image replication and React integration | VisActor/VChart |
| VTable Skill | List tables, pivot tables/charts, interactions and diagnosis | VisActor/VTable |
Each Skill can be installed separately and includes its instructions, references and scripts. The agent provides model access and runs the tools.
Send your agent the Skill URL and an installation request:
Please install the chart-storytelling Skill:
https://github.com/VisActor/skills/tree/main/skills/chart-storytelling
Download the complete Skill directory, including SKILL.md, references,
templates and scripts. Install it using a method supported by this app,
then check that the installed Skill can be discovered and invoked.
Tell me if any confirmation or import steps require my help.
For another Skill, open its entry in the table above and use the URL of the folder containing SKILL.md. After installation, start a new task and name the Skill you want to use.
If your agent cannot access GitHub or complete installation, use the manual import instructions below.
These commands install from the repository's default branch. To use the version on your current branch, install from your local checkout.
npx skills add VisActor/skills --skill chart-assistant
npx skills add VisActor/skills --skill chart-storytelling
npx skills add VisActor/skills --skill creative-data-storytelling
npx skills add VisActor/skills --skill editorial-magazine
npx skills add VisActor/skills --skill life-chronicle
npx skills add VisActor/skills --skill person-poster
npx skills add VisActor/skills --skill visactor-light-dashboard
npx skills add VisActor/skills --skill visactor-map2d-dashboard
npx skills add VisActor/skills --skill visactor-chart-editor
npx skills add VisActor/skills --skill visactor-map3d-dashboardFor chart and table tasks, install the related Skills from their owning repositories:
npx skills add VisActor/VChart --skill vchart-development-assistant
npx skills add VisActor/VTable --skill vtable-development-assistantIf you previously installed data-storytelling, remove that installed copy and install chart-storytelling to use the renamed Skill.
Follow the installer's prompts to select Codex or Claude Code. You can install each Skill independently. More installation options are documented in the Skills CLI reference.
Open GitHub Releases, choose the latest stable skills-v* release, and download the desired Skill ZIP from Assets, such as chart-storytelling.zip or visactor-light-dashboard.zip. Each ZIP contains one complete Skill. Choose the individual Skill asset, rather than the repository's Source code (zip) or just SKILL.md.
If the app asks for a folder, extract the ZIP and select the folder containing SKILL.md. Keep all bundled files.
- Open 专家·技能·连接器 → 技能 (Experts / Skills / Connectors → Skills) in the sidebar.
- Choose 添加技能 → 上传技能 (Add Skill → Upload Skill), select the downloaded Skill package, and follow the import prompts.
- Confirm that the Skill is enabled under 已安装 (Installed), then start a task with the Skill name and your data.
See the official WorkBuddy Skills guide for the UI flow.
- Open 技能·连接器·伙伴 (Skills / Connectors / Partners) and enter Skill management.
- Use the local Skill import entry (上传技能, Upload Skill). Select the ZIP or the complete extracted Skill folder as requested by the file picker, then finish importing.
- Start a work task, select the Skill through the Skill picker or name it explicitly in your request, and provide your task data.
Local Skill imports and explicit Skill selection are described in the official Feishu feature overview. Entry labels may differ between app versions; follow the current UI.
To update a manually imported Skill, download its package from a newer Release and replace the installed copy through the app’s Skill management page.
- A host agent with filesystem/shell tools and its own model access; command-line installation also requires Node.js and npm.
- A browser and network access to preview generated HTML and load external assets.
| Skill | Runtime requirements |
|---|---|
| chart-assistant | Reading resources and generating/explaining configuration need readable Skill files; bundled scripts require Node.js 18+. PNGs need HTTPS and binary file delivery; document insertion needs authorized host tools or lark-cli; editable cards need the Chart Assistant ISV app. Source sync needs the corresponding plugin, permissions and live binding. See the compatibility declaration for conditions and fallback delivery. Native KPI and card sizing require host template/protocol support |
| chart-storytelling | Python 3.10+ (standard library) and Node.js for JavaScript checks; pinned VSeed, VChart, VTable and GSAP load from unpkg |
| creative-data-storytelling | Desktop browser with native JavaScript modules; Python 3.9+ (standard library) for the bundled preview server, Node.js for JavaScript checks; optional libraries and fonts may use public CDNs |
| unit-data-storytelling | Modern browser with ES modules; Node.js for module checks; optional Python 3.9+ (standard library) for the bundled preview/audit tool. Bundled examples use local assets without a required CDN or chart library |
| editorial-magazine | Python 3.10+, dependencies in its requirements.txt, and Chromium/Chrome for PNG export; font CDN with system fallbacks |
| life-chronicle | Python 3.10+, dependencies in its requirements.txt, and Chromium/Chrome for PNG export; pinned VInfo and font CDN, see environment setup |
| person-poster | Python 3.10+, Pillow, Python Playwright/Chromium; public VChart 2.1.7 CDN or a sourced local copy; see requirements.txt and environment setup for POSIX/PowerShell installation and capability limits |
Image search, generation and cutout capabilities come from the host; follow the selected Skill's asset requirements. Magazine templates contain placeholders to replace before delivery. See the owning repositories for VChart/VTable Skill requirements.
Person Poster checks data bindings, source comparisons and image usage records before delivery. Older work bundles need migration; see the display contract, evidence guide and rendering guide. These checks do not replace source verification or visual review.
After installation, ask your agent to use the selected Skill with your data. For example:
- “Use chart-storytelling to explain retention changes in this CSV to our growth lead as a shareable HTML story.”
- “Use creative-data-storytelling to explain how these historical measurements changed, keeping earlier evidence visible as the story develops.”
- “Use editorial-magazine to turn this article and its sources into an editable HTML and PNG image series.”
- “Use life-chronicle to create a biography poster from these sourced events and photos, with editable timeline text.”
chart-storytelling generates HTML stories and Web-PPT with local scripts. Web-PPT runs in a browser; it is not a .pptx file. Image generation requires tools provided by the agent.
Generated JavaScript/HTML is executable code. Preview your own or reviewed artifacts locally; the test browser is not a sandbox for arbitrary untrusted submissions.
The example gallery includes data stories, Web-PPT, magazine layouts and posters, with prompts, inputs and results.
Creative Data Storytelling examples include historical Chinese measures, iPhone prices and annual and cumulative CO₂ emissions. Each includes a runnable page, inputs, a prompt and a preview.
Hot nights have become more frequent in Hong Kong. Do they also come in longer runs? Each square represents one summer day. Readers follow a stretch of 21 hot nights in July 2022, see where it falls in a calendar of 65 summers, then compare each summer’s longest stretch by lining them up at the same starting point. Read the Hong Kong summer story (in Chinese)
How has player height changed in the NBA? As readers scroll, the white dots that form the player silhouette in the NBA logo spread out and line up by height within each of the five positions. These players from the 1960s give readers a starting point for comparing height distributions across decades. Read the NBA height story (in Chinese)
Use develop for contributions and main for stable releases. See the contribution guide for development and release procedures.
| Path | Contents |
|---|---|
skills/<skill-name>/ |
Independently installable runtime: SKILL.md, references, templates/assets and scripts |
tests/<skill_name>/ |
Skill-specific deterministic regressions; hyphens become underscores for Python imports |
tests/test_* |
Shared tooling/installation checks and Node.js browser/Story integration tests |
examples/<skill-name>/<case-name>/ |
Curated examples with prompts, inputs, results and previews |
cases/<skill-name>/<case-name>/ |
Fixed Agent prompts, inputs and acceptance guidance |
tests/browser/cases/<skill-name>/<case-id>/ |
Fixed browser cases: configuration, inputs and expectations |
tests/browser/scripts/ |
Browser smoke builds and checks; dependencies are pinned in tests/browser/ |
.cache/skill-dev/<skill-name>/<run-name>/ |
Ignored local workspaces, outputs, screenshots and logs |
docs/ |
Contributor references; docs/migration/ contains historical migration records |
Keep each runtime Skill self-contained. It must not depend on tests/, cases/, examples/ or another Skill's local directory. See contribution conventions for adding Skills and selecting checks.
From the root of your local repository, install the working copy of a Skill:
npx skills add ./skills/chart-storytelling
npx skills add ./skills/creative-data-storytelling
npx skills add ./skills/unit-data-storytelling
npx skills add ./skills/editorial-magazine
npx skills add ./skills/life-chronicle
npx skills add ./skills/person-posterAlternatively, copy the complete Skill directory into your agent's skill directory, including its references, templates and scripts. Do not copy only SKILL.md. See the local debugging guide for Codex and Claude Code workspace setup. Refresh the installed copy after changing a Skill before retesting.
The Python maintenance environment requires Python 3.12+ and uv:
uv sync --locked
uv run pytest tests -q -m "not poster_browser"
uv run ruff check skills testsFixed browser cases live under tests/browser/cases/, with configuration, inputs and acceptance criteria together. After the browser setup in that guide, run uv run python tests/browser/scripts/smoke.py, or select --skill chart-storytelling / --case story-ppt. These checks do not call a model.
Run a fixed task or your own prompt and data in Codex, Claude Code or another agent. Keep outputs, screenshots and logs in an ignored local workspace; see local debugging. Agent tasks do not run in CI.
Fixed tasks currently cover chart-storytelling and person-poster. Browser smoke covers stories, Web-PPT and person posters; detailed cases are in the browser test guide. Editorial-magazine, life-chronicle and chart-assistant have script regressions but no fixed Agent tasks or real-host browser smoke in this repository. Creative-data-storytelling has deterministic runtime, preview and copied-installation regressions; its bundled mechanism demonstrations are implementation references. Fixed Agent tasks and automated browser smoke for this Skill are not yet included here.
Check generated results for data accuracy, readability and interactions. Automated tests do not establish the quality of an Agent-generated work. Person Poster test results and remaining limitations are recorded in the validation notes.
Skills in this repository share release tags in the form skills-vMAJOR.MINOR.PATCH. Patch versions contain compatible fixes; minor versions add Skills or capabilities; major versions cover incompatible changes. VChart and VTable Skills follow their own repositories’ versions.
Default installations follow main. To reproduce an issue, record the installed tag or commit SHA. Each Release includes one ZIP per Skill and a skills-manifest.json with content fingerprints; see the artifact format.
Maintainers declare the next version in .github/release-plan.json. Release PRs run an automatic preview; merging an approved plan into main triggers publication after CI passes. See the release procedure.
The previous VMind SDK is no longer maintained. Its code and documentation remain in historical releases.