VisActor/skills

Agent skills for the VisActor visualization ecosystem.

VisActor / skills – Plug‑in “Skills” for AI agents

What it is – A collection of three agent skills that let a language‑model‑backed agent (e.g., Codex, Claude Code, or any compatible tool‑enabled agent) turn raw data files into visual artefacts:

Skill What it does Typical output
vchart‑skill Generates VChart charts, diagnoses configuration problems, can replicate chart images, and provides ready‑to‑use React components. JavaScript/HTML that renders an interactive chart in a browser.
vtable‑skill Builds sortable tables, pivot tables and pivot charts, adds interactive behaviours, and can spot mis‑configurations. HTML/JS for a searchable, sortable table or a pivot chart.
data‑storytelling Performs data analysis, designs a narrative, creates scrollytelling pages and “Web‑PPT” presentations. A self‑contained HTML story or a browser‑based presentation (no .pptx file).

All three skills are purely local – they ship the necessary templates, scripts and reference files. No separate VisActor server, API key, or hosted service is required; the host agent supplies the LLM model and the ability to run shell/FS commands.

How to add a skill to your project

# pick the skill(s) you need
npx skills add VisActor/skills --skill vchart-skill
npx skills add VisActor/skills --skill vtable-skill
npx skills add VisActor/skills --skill data-storytelling

The installer asks whether you are using Codex or Claude Code and copies the skill’s directory (including its SKILL.md, templates, and Python/JS helper scripts) into your agent’s skill folder.

Prerequisites

  • Node ≥ 14 and npm (for the npx skills CLI).
  • A filesystem‑enabled agent that can call the model.
  • Python 3.9+ for VChart/VTable; Python 3.10+ and Node.js for data‑storytelling (the Python parts use only the standard library).
  • A modern browser with internet access – the generated pages pull VChart/VTable, React, Monaco, VSeed, GSAP, etc. from the public unpkg CDN.

Using a skill

After installation, simply ask your agent to run the skill with your data, e.g.:

"Use VChart to compare sales by region and quarter in this CSV. Give me the editable source and HTML."

"Use VTable to build a sortable detail table using every row in this file."

"Use data‑storytelling to explain retention changes in this CSV to our growth lead as a shareable HTML story."

The agent will:

  1. Load the CSV (or other supported file).
  2. Call the appropriate skill script, which creates the chart/table/story.
  3. Return the generated source code (HTML/JS) and, when possible, a rendered preview.

The output is executable JavaScript/HTML that you can open locally. The repository notes that the evaluation browser is not a sandbox for untrusted code – you should review any generated artefacts before running them.

Development & testing (for contributors)

  • The main branch for work is develop.
  • Local installation from a checkout uses npx skills add ./skills/<skill>.
  • Tests run on Python 3.12+ with uv (a fast package manager):
    uv sync --locked
uv run pytest tests -q
uv run ruff check skills tests evals/scripts
  • A set of browser smoke tests lives under evals/smoke/; they verify that each skill produces the expected visual output.
  • For deeper debugging you can use the optional model‑API harness (OpenAI‑compatible Chat Completion) to run a fixed case without Codex/Claude. This is meant for maintainers, not end‑users, and may incur API costs.

Release model

All three skills share a single repository version. A Git tag marks a formal release that includes the skill instructions, reference files, templates, and scripts. Individual libraries (e.g., VTable 1.26.8) are versioned separately and are referenced in the skill metadata.

License

MIT – you can freely use, modify, and redistribute the skills.

TL;DR

VisActor/skills is a real, installable toolkit that equips LLM‑powered agents with the ability to turn data files into interactive charts, tables, and narrative HTML stories, all without needing a proprietary backend. It’s targeted at developers building AI agents that need built‑in data‑visualisation and storytelling capabilities.

Related

  • Project
    Anil-matcha/Open-AI-Design-Agent

    Open AI Design Agent is an MIT‑licensed, self‑hostable AI design assistant that turns plain‑language briefs into complete visual campaigns (posters, logos, social graphics, video ads, etc.). It runs an autonomous planning loop that selects from 200+ image and video models via the Muapi.ai API, supports brand‑kit conditioning, multi‑image reference, edit mode, templates, and a visual workflow editor. Install with Node.js + FastAPI or Docker, or use the hosted web UI.

  • Project
    Alice-Marx/dsh-model-router

    A cost-aware workbench for DeepSeek Harness Desktop that enables users to plan, route, and execute complex tasks across AI models and official tools while managing budgets and permissions.

  • Project
    appautomaton/latex-arxiv-SKILL

    An agentic harness for writing verified AI/ML review papers in LaTeX, featuring a gated, issue-driven workflow that prevents citation hallucinations.

  • Project
    liliang-cn/cortexdb

    CortexDB is a pure‑Go library that provides a local AI memory store and RDF knowledge graph in a single SQLite (or PostgreSQL) file. It supports vector indexes, hybrid full‑text search, SPARQL/OWL inference, and can be shared via a lightweight gRPC server. Plugins let Claude Code, Codex and other assistants use `/remember` and `/recall` commands, while an optional UI mod adds automatic recall previews and idle‑capture of conversation snippets. Install with `go get`, run the optional `cortexdb-grpc` server for multi‑agent sharing, and configure embeddings via environment variables. MIT‑licensed.