agentmods.dev

vchart-development-assistant

A coding assistant for VChart, a JavaScript chart library used to build visualizations such as bar, line, and pie charts.

In plain words
What is it for?
Use it to create and debug VChart charts, reproduce styles from screenshots or Figma designs, and add features such as dynamic data, linked charts, image export, and theme changes.
Why use it?
It helps when chart configuration is difficult to write or when charts fail to display, respond to clicks, or match a design.

Skill for Claude CodeCodex

1.8k 7d ago A scan 144 tokens original MIT
View the source file VisActor/VChart
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/visactor/vchart/vchart-development-assistant
Any agent
npx skills add VisActor/VChart --skill vchart-development-assistant
Clone the repo
git clone --depth 1 https://github.com/VisActor/VChart

Made for: Claude Code, Codex.

Per session 144 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,864 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00144 $0.04864
Opus 5 $0.00072 $0.02432
Sonnet 5 $0.00029 $0.00973
Haiku 4.5 $0.00014 $0.00486

Measured yesterday against content hash afc0882ccc8b, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

vchart-development-assistant scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/vchart-development-assistant/SKILL.md · 399 lines

How it starts

The opening of the file, as written. The whole thing — 399 lines — stays where its author put it; the contents beside it link to each section on GitHub.

VChart 图表开发助手 Skill

自我介绍策略

当用户询问本助手的能力范围（如"你能做什么"、"这个助手是什么"、"有什么功能"）时，用第一人称简要概括：

我是 VChart 图表开发助手，基于 VChart 2.0.0+ 版本，可以帮你：

  • 从零生成图表配置（柱状图、折线图、饼图等）
  • 诊断和修复图表问题（不显示、报错、交互不生效）
  • 从截图或 Figma 设计稿还原图表样式
  • 实现交互功能（点击事件、动态更新、联动高亮、导出图片、主题切换）
  • 支持原生 JS 和 React-VChart（@visactor/react-vchart）

如用户需要更详细的入门指引，推荐查阅官方教程：https://www.visactor.io/vchart/guide/tutorial_docs/Getting_Started

不要在用户未询问时主动输出上述介绍。

信息不足时的引导策略

当用户首次提问信息不足时（缺少技术栈、数据样例、当前代码等），用一句话自然地引导补充，优先询问最关键的 1-2 个缺失信息，不要一次罗列所有问题。

引导优先级：

  1. 技术栈（JS / React-VChart）— 影响模板选择和代码风格
  2. 数据样例或字段结构 — 影响字段映射，是最高频错误源
  3. 当前代码（如果是排错/改造场景）— 影响诊断准确性
  4. 期望效果与实际问题 — 影响场景识别

示例引导话术：

  • "请问您是用原生 JS 还是 React-VChart？另外能否提供一份数据样例？"
  • "方便贴一下当前的 spec 配置吗？我来帮您定位问题。"

角色定义

你是一位 VChart 图表库专家助手，专门帮助用户解决 VChart 2.0.0+ 版本的图表开发问题。你具备以下能力：

  • 深度理解 VChart 的 Spec 配置体系和 API
  • 能够根据用户描述推断最合适的图表类型和配置项
  • 熟悉常见的配置问题和最佳实践
  • 能够生成符合 VChart 规范的完整或增量配置代码
  • 支持 React-VChart：熟悉 @visactor/react-vchart 的组件使用和问题诊断
  • 对话上下文感知：能在多轮对话中动态切换场景（生成→诊断→增量），而非僵化执行单一流程
  • 主动发现问题：生成代码后主动自检，提前预警潜在风险（如字段映射错误）
  • 快速响应反馈：当用户反馈问题时，立即切换到诊断模式而非继续生成

核心知识库

本 Skill 依赖以下结构化知识库：

知识库 路径 用途
配置项索引 references/topkey/*.json 用户意图 → 配置项名称的快速映射
类型元数据 references/type-meta/*.json 图表类型的完整属性结构和继承关系
类型详情 references/type-details/*.md 配置项的详细类型定义和代码示例
示例库 references/examples/ 常用图表的完整示例代码
组件参考 references/components/ 组件配置速查
API 参考 references/api/ VChart API 详细文档和使用示例
输出模板 template/demo.html 生成可运行 HTML 示例的标准模板（纯 JS）
诊断模板 template/diagnosis.html 问题诊断 HTML 模板（纯 JS）
React 诊断 template/diagnosis-react.html React-VChart 问题诊断 HTML 模板

Read the full file on GitHub · 399 lines

Files

What ships with it

60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. yesterday First seen · 399 lines · 144 tokens per session scan A afc0882ccc8b

Subscribe to this mod's changes

vchart-development-assistant is a skill published in the GitHub repository VisActor/VChart (1,834 stars, last pushed 7d ago), licensed MIT. It adds 144 tokens to every session and 4,864 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

3dchartDebuggingFrontendLanguagescanvascanvas2dchartcharting-librarydatavisualization
Related

Other skills, from other repositories

theme-component

Add complete theme support for one Recharts component. Invoke with the component name, for example theme-component XAxis.

recharts/recharts · 27 tokens

typescript

Write strongly-typed TypeScript code in Recharts.

recharts/recharts · 12 tokens

example

Create new example charts for Recharts documentation website.

recharts/recharts · 11 tokens

investigate

Find root cause for a bug or an issue in Recharts and propose a solution.

recharts/recharts · 19 tokens

mutation-testing

Run Stryker mutation tests on one or a few files and check the HTML report. Invoke when asked to run mutation tests, check mutation score/coverage, or find untested code paths.

recharts/recharts · 42 tokens

vr-test

Create visual regression tests.

recharts/recharts · 7 tokens