Agent skill

Visualizer

by Pinvou in Pinvou/pinvou-agent

当用户要求数据可视化、做图表、生成看板、数据仪表盘、可视化报告、Excel/CSV 转图表、预算/销售/运营等指标分析页面、Chart.js 可视化时使用。只处理数据可视化任务;纯网页、banner、海报、简历等非数据图表设计任务应交给 visual-design。数据报告页以图表为主体归本技能;以文案排版为主体的静态报告页归 visual-design。

MITAuto-check passedDocuments & Office

Install Visualizer

skills CLI
$ npx skills add Pinvou/pinvou-agent --skill visualizer -a claude-code

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

GitHub CLI
$ gh skill install Pinvou/pinvou-agent visualizer --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/Pinvou/pinvou-agent.git skills-src && mkdir -p .claude/skills && cp -r skills-src/pinvou3-app/src-tauri/resources/common/skill-marketplace/visualizer .claude/skills/visualizer && 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
visualizer
GitHub stars
2.4k
Token cost
~933 tokens
SKILL.md length
265 words
Files
3 (incl. scripts, references)
Skills in repo
29
Repo updated
First seen
Licence
MIT

At a glance

当用户要求数据可视化、做图表、生成看板、数据仪表盘、可视化报告、Excel/CSV 转图表、预算/销售/运营等指标分析页面、Chart.js 可视化时使用。只处理数据可视化任务;纯网页、banner、海报、简历等非数据图表设计任务应交给 visual-design。数据报告页以图表为主体归本技能;以文案排版为主体的静态报告页归 visual-design。

  • Works in 5 steps: 用 write 写出一个 .html 文件,文件内容可以是完整可打开… → 用 bash 运行本技能目录下的校验器 → 如果校验失败,读取错误列表,重写 .html,再次运行校验器;不要展示失败产物。 → …
  • Tasks that involve UI design
  • SKILL.md covers 成功判定, 失败判定, 必须先读 and 交付方式, plus 4 more sections
  • Runs Python scripts from its folder; calls python; reaches cdnjs.cloudflare.com

What it does

Visualizer is an agent skill from Pinvou/pinvou-agent. 当用户要求数据可视化、做图表、生成看板、数据仪表盘、可视化报告、Excel/CSV 转图表、预算/销售/运营等指标分析页面、Chart.js 可视化时使用。只处理数据可视化任务;纯网页、banner、海报、简历等非数据图表设计任务应交给 visual-design。数据报告页以图表为主体归本技能;以文案排版为主体的静态报告页归 visual-design。

Its SKILL.md is about 930 tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including scripts and reference files (for example `references/visualizer-design-system.md` and `scripts/validate_visualizer_html.py`).

It sits in Documents & Office, covering UI design, Excel spreadsheets and CSV and tabular files. It works with Chart.js, Microsoft Excel and Model Context Protocol. The repository describes itself as: Open-source desktop AI agent for tools, files, knowledge, workflows, and real deliverables. The licence is MIT.

When your agent uses it

  • Tasks that involve UI design
  • Tasks that involve Excel spreadsheets
  • Tasks that involve CSV and tabular files

Example prompts

  • “/visualizer”

Requirements

  • Python 3

Workflow steps

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

  1. 用 write 写出一个 .html 文件,文件内容可以是完整可打开 HTML,必须包含可执行的 Chart.js 脚本。
  2. 用 bash 运行本技能目录下的校验器
  3. 如果校验失败,读取错误列表,重写 .html,再次运行校验器;不要展示失败产物。
  4. 只有校验通过后,才能调用 mcp_pinvou3_present_artifact(path, title) 展示产物卡(内置 MCP 工具默认延迟加载:工具列表里没有它时先 tool_search 激活;tool_search 返回 mcp_boot…
  5. 普通回复只保留简短说明,不重复粘贴整段 HTML。

What it can do on your machine

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

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • python

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • cdnjs.cloudflare.com

    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

Visualizer loads about 933 tokens when it runs, and up to ~3.9k if it reads all its reference files. Until then it costs about 48 tokens; SKILL.md has 265 words of instructions outside code blocks.

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

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); the scripts in this folder are not scanned.

SKILL.md

The full file from Pinvou/pinvou-agent at commit 76cb1db, republished under its MIT licence (© Pinvou). 265 words, ~933 tokens.

Download SKILL.mdSave it as .claude/skills/visualizer/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
visualizer
description
当用户要求数据可视化、做图表、生成看板、数据仪表盘、可视化报告、Excel/CSV 转图表、预算/销售/运营等指标分析页面、Chart.js 可视化时使用。只处理数据可视化任务;纯网页、banner、海报、简历等非数据图表设计任务应交给 visual-design。数据报告页以图表为主体归本技能;以文案排版为主体的静态报告页归 visual-design。

数据分析可视化

把结构化数据、表格汇总、业务指标或用户描述的数据口径转成可交付的 HTML 数据可视化仪表盘。

成功判定

一次合格交付必须同时满足:

  • 已读取 references/visualizer-design-system.md。
  • 已用 write 写出 .html 文件。
  • 已用本技能目录下的 scripts/validate_visualizer_html.py 校验最终 .html,且结果为通过。
  • 已调用 mcp_pinvou3_present_artifact(path, title) 展示产物卡(内置 MCP 工具默认延迟加载:工具列表里没有它时先 tool_search 激活;tool_search 返回 mcp_boot connecting(MCP 服务仍在启动)就等待数秒重试,connecting 消失后仍搜不到,才算产物卡后端本轮不可用——在回复里说明即可)。
  • HTML 使用 Chart.js UMD:https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js。
  • 每个 <canvas> 都有 role="img"、描述性 aria-label 和 fallback text。
  • Chart.js 默认 legend 关闭,并使用自定义 HTML legend。
  • 数据先聚合再入图,展示数字经过合理四舍五入。
  • 图表关键数值常驻显示,不只依赖 hover tooltip;数据密集时显示首尾、峰值、谷值或 Top N 等关键标签。

失败判定

如果发生以下任一情况,必须重写产物再交付:

  • 使用 ECharts、Plotly、Vega、D3 伪地图或任何非 Chart.js 图表库,除非用户明确点名要求。
  • HTML 中出现 echarts、Plotly、cdn.plot.ly、cdn.jsdelivr.net/npm/echarts。
  • 直接在聊天正文粘贴完整 HTML,而没有写 .html 文件和展示 artifact。
  • <canvas> 缺少 role="img"、aria-label 或 fallback text。
  • 使用默认 Chart.js legend,而没有自定义 HTML legend。
  • 图表数值只出现在 hover tooltip 中,画布上没有常驻数值标签。
  • 使用彩虹渐变 KPI、重阴影、发光、深色 hero、emoji 或营销页式大标题。
  • HTML/CSS/JS 中出现 <!-- comments -->、/* comments */ 或独立行 // comments。
  • scripts/validate_visualizer_html.py 返回失败。

必须先读

在执行任务前读取 references/visualizer-design-system.md,并遵守其中的 Chart.js、布局、配色、无障碍和流式输出规则。若任务很小,也至少遵守本文件的硬性规则。

交付方式

Pinvou 的聊天正文会转义或清理 <script>,所以不要把带 Chart.js 的 HTML 直接贴在普通回复正文里当最终成品。

必须按以下流程交付:

  1. 用 write 写出一个 .html 文件,文件内容可以是完整可打开 HTML,必须包含可执行的 Chart.js 脚本。
  2. 用 bash 运行本技能目录下的校验器: python <visualizer-skill-dir>/scripts/validate_visualizer_html.py <artifact.html> --json 其中 <visualizer-skill-dir> 是 load_skill 返回的 Source 所在目录。
  3. 如果校验失败,读取错误列表,重写 .html,再次运行校验器;不要展示失败产物。
  4. 只有校验通过后,才能调用 mcp_pinvou3_present_artifact(path, title) 展示产物卡(内置 MCP 工具默认延迟加载:工具列表里没有它时先 tool_search 激活;tool_search 返回 mcp_boot connecting(MCP 服务仍在启动)就等待数秒重试,connecting 消失后仍搜不到,才算产物卡后端本轮不可用——在回复里说明即可)。
  5. 普通回复只保留简短说明,不重复粘贴整段 HTML。

触发边界

使用本技能:

  • Excel/CSV/JSON/表格数据转图表、转看板、转可视化报告。
  • 用户说“做数据可视化”“做图表”“生成看板”“数据仪表盘”“可视化图表”。
  • 数据分析仪表盘、指标看板、可视化报告。
  • 柱状图、折线图、组合图、散点图、热力图、图表卡片。
  • 用户明确提到 Chart.js、canvas、数据可视化。

不使用本技能:

  • 落地页、品牌页、banner、海报、简历、作品集等以视觉表达为主、没有数据图表核心诉求的任务。
  • 需要真实地图但没有真实拓扑数据的任务;不要手绘伪地图。
  • 需要在线查询最新数据但用户没有提供数据时,先说明需要数据源或使用可用查询工具获取数据。

数据纪律

  • 不要编造真实业务数据。缺数据时先询问,或明确生成空模板/示例模板。
  • 用户给出 Excel、CSV、JSON、表格或明细数据时,先做必要聚合,再写入图表。
  • 所有展示数字都要四舍五入到合理精度。
  • 图表解释写在普通回复中;HTML 产物内部只放视觉元素、必要标题、图例和简短标签。

HTML 产物硬规则

  • 输出 .html 文件,不输出 Markdown 包裹的 HTML。
  • 使用 Chart.js UMD:https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js。
  • 每个 <canvas> 必须有 role="img"、描述性 aria-label 和 fallback text。
  • 默认 legend 必须关闭,使用自定义 HTML legend。
  • 默认在图表关键数据点上常驻显示数值标签,不只依赖 hover tooltip;柱状图显示在柱体末端或顶部,折线图显示在关键节点附近,饼图/环图显示分类占比。数据密集时只显示首尾、峰值、谷值或 Top N 等关键标签,避免重叠;完整数值保留在图例或 KPI 卡中。
  • canvas 外层 wrapper 设置高度,canvas 本身不直接设置高度。
  • Chart.js 配置里使用硬编码 hex,不使用 CSS 变量。
  • 页面视觉要扁平、紧凑、无渐变背景、无阴影、无深色外层容器。
  • 不写 HTML 注释、CSS/JS 块注释或行内叙事注释。
  • 不写独立行 // 注释;生成脚本内也不要把解释性注释复制进最终 HTML。
  • 不使用 emoji;需要图形标识时用 CSS 小色块或简洁 SVG。
  • 字号保持紧凑:h1 15px、h2 14px、h3 13px、正文 13px;只使用 400 和 500 字重。
  • 推荐结构:2-4 个 KPI 卡片、1 个宽趋势图、1-2 个辅助对比图、每个图表上方放自定义 legend。
  • HTML 内只放视觉元素、标题、图例和必要标签;详细分析写在普通回复中。
  • 若引用完整规范与本文件冲突,以本文件的交付方式为准。

交付前机器校验

本技能自带校验器 scripts/validate_visualizer_html.py,用于拦截常见违规项,包括注释残留、ECharts/Plotly、缺失 Chart.js UMD、canvas 无障碍缺失、默认 legend 未关闭、缺少自定义 legend、渐变/阴影/模糊/发光、异常字重、过小字号和 emoji。

校验器失败时必须按错误逐项修复并重跑,直到输出 ok: true 或文本 OK visualizer artifact。不要把“校验失败但看起来可用”的 HTML 交付给用户。

© Pinvou, 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 2 other files (scripts, references) in pinvou3-app/src-tauri/resources/common/skill-marketplace/visualizer of Pinvou/pinvou-agent.

  • SKILL.md
  • references/visualizer-design-system.md
  • scripts/validate_visualizer_html.py

Open the folder on GitHubat commit 76cb1db

Compare with similar skills

Visualizer 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.

Visualizer compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Visualizer this skillPinvou/pinvou-agent2.4k—~933Automated safety check: PassMIT
DatalionHybridAIOne/hybridclaw158—~2.8kAutomated safety check: PassMIT
Jinshujuinfometa/workbuddyskills342—~2kAutomated safety check: PassMIT
Jinshuju Tableinfometa/workbuddyskills342—~2.1kAutomated safety check: PassMIT
Screaming Frog Toolgarrettjsmith/localseoskills112—~2kAutomated safety check: PassMIT
Mindsdb MCP SkillLeoYeAI/openclaw-master-skills2.2k—~2.5kAutomated safety check: PassMIT

Similar skills

  • Datalion

    HybridAIOne/hybridclaw

    A skill your agent uses for DataLion workflows such as listing, reading, creating, or editing projects, inspecting data sources, importing Excel or CSV data, working with reports and report tabs and…

    158 GitHub stars~2.8k tokensUpdated yesterday
    Documents & OfficeAuto-check passed
  • Jinshuju

    infometa/workbuddyskills

    通过金数据(Jinshuju,jinshuju.net)MCP 操作用户托管在金数据平台上的在线表单:创建 / 复制 / 编辑表单与主题,含自动判分的考试表单、选项计分的测评表单;查询、新增(单条或批量)、更新、删除、批量修改数据;用上传凭证上传本地图片或文件;查询账户套餐额度与团队成员。仅在用户操作其金数据平台数据时使用——触发信号:提到 金数据 / Jinshuju /…

    342 GitHub stars~2k tokensUpdated yesterday
    Documents & OfficeAuto-check passed
  • Jinshuju Table

    infometa/workbuddyskills

    通过金数据(Jinshuju,jinshuju.net)MCP 操作用户托管在金数据平台上的数据表格:创建 / 编辑数据表与列(含自动计算的公式列);查询、新增(单条或批量)、更新、批量更新、删除行数据;用上传凭证把本地文件写入附件列;查询账户套餐额度与团队成员。仅在用户操作其金数据数据表时使用——触发信号:提到 金数据表格 / Jinshuju 表格 /…

    342 GitHub stars~2.1k tokensUpdated yesterday
    Documents & OfficeAuto-check passed
  • Screaming Frog Tool

    garrettjsmith/localseoskills

    When the user wants a technical site audit, crawl data analysis, location page quality checks, duplicate content detection, schema validation at scale, or internal linking analysis.

    112 GitHub stars~2k tokensUpdated 1 mo ago
    Marketing & SEOAuto-check passed
  • Mindsdb MCP Skill

    LeoYeAI/openclaw-master-skills

    MindsDB MCP服务器交互技能,用于通过自然语言查询和操作200+企业级数据源。当用户需要查询数据库、分析数据、创建AI模型、连接数据源(MySQL、PostgreSQL、MongoDB、Excel、CSV、Gmail、Slack等)、执行SQL查询、进行数据预测、构建知识库(RAG)、智能问答、文档检索或任何与数据库交互的任务时使用此技能。即使没有明确提到MindsDB,只要涉及数据库操…

    2.2k GitHub stars~2.5k tokensUpdated 2 mo ago
    DatabasesAuto-check passed
  • XLSX

    rvdbreemen/OTGW-firmware

    Use this skill any time a spreadsheet file is the primary input or output.

    207 GitHub starsUsed in 35 repos~2.9k tokens
    Documents & OfficeAuto-check passed

More from Pinvou/pinvou-agent

All 29 skills in this repo
  • Tmeet Skill

    Pinvou/pinvou-agent

    何时用:用户明确要通过命令行操作腾讯会议(tmeet),或 Agent 遇到工具缺失/调用失败/能力不足想反馈平台时。OAuth 登录/登出/状态、会议管理(创建/更新/取消/查询/搜索/受邀者)、录制管理(列表/播放地址/智能纪要/转写/权限申请)、元宝纪要(按关键词/时间搜索、稳态/瞬态详情)、会议报告(参会人/等候室/导出明细/异步任务)、通讯录(仅限会议邀请/呼叫入会前置解析,严禁单独查…

    2.4k GitHub stars~4.8k tokensUpdated today
    Auto-check passed
  • Wecomcli Doc

    Pinvou/pinvou-agent

    何时用:仅当用户明确指定 doc/docx/word/在线文档/office文档或提供 doc.weixin.qq.com/doc/ 链接时使用;泛指「做个文档/写文档/整理成文档」默认走 wecomcli-smartpage 或本地工具,本技能不得抢占。doc 内容操作:新建、导入(.doc/.docx/.txt)、读取、追加、覆盖写入;结构化数据需求改用智能文档/智能表格;公共管理走…

    2.4k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Dws

    Pinvou/pinvou-agent

    【何时用:仅当用户明确指向钉钉/DingTalk(钉钉文档、钉钉日程等)时使用;泛指做文档/表格/待办/审批默认走本地工具,不要误用钉钉】用 dws CLI 管理钉钉:AI表格/AI搜问(找人首选)/目标管理(Agoal)/组织大脑/日历/通讯录/群聊与机器人消息/待办/审批/考勤/日志(日报周报)/DING消息/钉钉文档/云盘/Markdown文件/AI听记/邮箱/在线电子表格(axls)/知…

    2.4k GitHub stars~5.3k tokensUpdated today
    Auto-check passed
  • Lark Im

    Pinvou/pinvou-agent

    【何时用:仅当用户明确指向飞书/Lark(发到飞书、飞书文档等)时使用;泛指做个文档或PPT或表格或方案默认走本地工具,不要误用飞书】飞书即时通讯:收发消息和管理群聊。发送和回复消息、搜索聊天记录、管理群聊成员、上传下载图片和文件、管理表情回复、发送应用内/短信/电话加急、发送和处理交互卡片(Interactive…

    2.4k GitHub stars~5.9k tokensUpdated today
    Auto-check passed
  • Lark Sheets

    Pinvou/pinvou-agent

    【何时用:仅当用户明确指向飞书/Lark 电子表格;泛指做表格默认走本地工具】创建/操作飞书电子表格:工作表与行列结构、读写单元格(值/公式/样式/批注/图片)、查找替换、批量更新、图表/透视表/条件格式/筛选/迷你图/浮动图片。按名称搜索云空间表格文件改用 lark-drive 的 drive +search。doubao.com 的 /sheets/ URL 也走本 skill。不适用本地…

    2.4k GitHub stars~6.5k tokensUpdated today
    Auto-check passed
  • Lark Base

    Pinvou/pinvou-agent

    【何时用:仅当用户明确指向飞书/Lark(发到飞书、飞书文档等)时使用;泛指做个文档或PPT或表格或方案默认走本地工具,不要误用飞书】飞书多维表格(Base)操作:建表、字段、记录、视图、统计、公式/lookup、表单、仪表盘、BaseApp 应用模式(页面与组件)、Workspace 目录、workflow、角色权限、模板中心(模板分类/列表/搜索);遇到…

    2.4k GitHub stars~4k tokensUpdated today
    Auto-check passed

Questions about Visualizer

What does Visualizer do?

当用户要求数据可视化、做图表、生成看板、数据仪表盘、可视化报告、Excel/CSV 转图表、预算/销售/运营等指标分析页面、Chart.js 可视化时使用。只处理数据可视化任务;纯网页、banner、海报、简历等非数据图表设计任务应交给 visual-design。数据报告页以图表为主体归本技能;以文案排版为主体的静态报告页归 visual-design。. Visualizer is an agent skill from Pinvou/pinvou-agent.

When should I use Visualizer?

Visualizer fits situations like: tasks that involve UI design; tasks that involve Excel spreadsheets; tasks that involve CSV and tabular files.

How do I install Visualizer in Claude Code?

Run `npx skills add Pinvou/pinvou-agent --skill visualizer -a claude-code`. Or copy the skill folder (pinvou3-app/src-tauri/resources/common/skill-marketplace/visualizer in Pinvou/pinvou-agent) into .claude/skills/visualizer in your project. Claude Code loads it when a task matches its description.

How do I install Visualizer in Codex?

Run `npx skills add Pinvou/pinvou-agent --skill visualizer -a codex`. Or copy the skill folder (pinvou3-app/src-tauri/resources/common/skill-marketplace/visualizer in Pinvou/pinvou-agent) into .agents/skills/visualizer in your project. Codex loads it when a task matches its description.

Can I use Visualizer 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 Pinvou/pinvou-agent --skill visualizer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/visualizer, .gemini/skills/visualizer, .github/skills/visualizer and .opencode/skills/visualizer in your project.

What does Visualizer need to run?

Going by SKILL.md and its folder, Visualizer needs Python for the scripts in its folder and the command-line tools its instructions call (python). Our summary lists: Python 3.

Does Visualizer access the network?

SKILL.md names 1 domain. In commands or code: cdnjs.cloudflare.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Visualizer 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Visualizer use?

Visualizer 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 Visualizer use?

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

What are the alternatives to Visualizer?

Skills that share tags, products or a category with Visualizer: Datalion (HybridAIOne/hybridclaw, 158 stars), Jinshuju (infometa/workbuddyskills, 342 stars), Jinshuju Table (infometa/workbuddyskills, 342 stars) and Screaming Frog Tool (garrettjsmith/localseoskills, 112 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Visualizer?

Pinvou (a GitHub organization) maintains it in Pinvou/pinvou-agent, which has 2,361 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on October 7, 2026.

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