Brand and Design Toolkit
nextlevelbuilder/ui-ux-pro-max-skill
Bundles design tasks behind one skill: brand identity, tokens, UI styling, logos, corporate identity mockups, slides, banners, icons and social images.
创建适用于图表渲染插件的 Chart.js 图表。当用户要求把数据做成图表、可视化趋势、比较分类或展示占比时使用. An agent skill from openvetta/open-vetta.
Apache-2.0Auto-check passed
Install Chart Renderer
$ npx skills add openvetta/open-vetta --skill chart-renderer -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install openvetta/open-vetta chart-renderer --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/openvetta/open-vetta.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/plugins/presets/chart-renderer/skills/chart-renderer .claude/skills/chart-renderer && rm -rf skills-srcUse ~/.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/
Install the "chart-renderer" agent skill from https://github.com/openvetta/open-vetta/tree/main/packages/plugins/presets/chart-renderer/skills/chart-renderer into .claude/skills/chart-renderer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-renderer", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/openvetta/open-vetta/tree/main/packages/plugins/presets/chart-renderer/skills/chart-rendererType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add openvetta/open-vetta --skill chart-renderer -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install openvetta/open-vetta chart-renderer --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openvetta/open-vetta.git skills-src && mkdir -p .agents/skills && cp -r skills-src/packages/plugins/presets/chart-renderer/skills/chart-renderer .agents/skills/chart-renderer && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "chart-renderer" agent skill from https://github.com/openvetta/open-vetta/tree/main/packages/plugins/presets/chart-renderer/skills/chart-renderer into .agents/skills/chart-renderer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-renderer", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add openvetta/open-vetta --skill chart-renderer -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install openvetta/open-vetta chart-renderer --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openvetta/open-vetta.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/packages/plugins/presets/chart-renderer/skills/chart-renderer .cursor/skills/chart-renderer && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "chart-renderer" agent skill from https://github.com/openvetta/open-vetta/tree/main/packages/plugins/presets/chart-renderer/skills/chart-renderer into .cursor/skills/chart-renderer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-renderer", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/openvetta/open-vetta.git --path packages/plugins/presets/chart-renderer/skills/chart-renderer--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add openvetta/open-vetta --skill chart-renderer -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install openvetta/open-vetta chart-renderer --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openvetta/open-vetta.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/packages/plugins/presets/chart-renderer/skills/chart-renderer .gemini/skills/chart-renderer && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "chart-renderer" agent skill from https://github.com/openvetta/open-vetta/tree/main/packages/plugins/presets/chart-renderer/skills/chart-renderer into .gemini/skills/chart-renderer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-renderer", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install openvetta/open-vetta chart-rendererInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add openvetta/open-vetta --skill chart-renderer -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/openvetta/open-vetta.git skills-src && mkdir -p .github/skills && cp -r skills-src/packages/plugins/presets/chart-renderer/skills/chart-renderer .github/skills/chart-renderer && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "chart-renderer" agent skill from https://github.com/openvetta/open-vetta/tree/main/packages/plugins/presets/chart-renderer/skills/chart-renderer into .github/skills/chart-renderer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-renderer", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add openvetta/open-vetta --skill chart-renderer -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install openvetta/open-vetta chart-renderer --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/openvetta/open-vetta.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/packages/plugins/presets/chart-renderer/skills/chart-renderer .opencode/skills/chart-renderer && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "chart-renderer" agent skill from https://github.com/openvetta/open-vetta/tree/main/packages/plugins/presets/chart-renderer/skills/chart-renderer into .opencode/skills/chart-renderer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chart-renderer", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
chart-renderer- GitHub stars
- 291
- Token cost
- ~428 tokens
- SKILL.md length
- 118 words
- Files
- 1
- Skills in repo
- 21
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
创建适用于图表渲染插件的 Chart.js 图表。当用户要求把数据做成图表、可视化趋势、比较分类或展示占比时使用. An agent skill from openvetta/open-vetta.
- Works in 7 steps: 只传 JSON 可序列化值，不传函数、Date、undefined、DOM… → charts 数量必须在 1 到 4 之间；每个图表都必须有合法的 type 和… → labels 和 datasets[].data… → …
- SKILL.md covers 目标, 工具参数, 布局规则 and 数据格式, plus 2 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Chart Renderer is an agent skill from openvetta/open-vetta. 创建适用于图表渲染插件的 Chart.js 图表。当用户要求把数据做成图表、可视化趋势、比较分类或展示占比时使用。
Its SKILL.md is about 430 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It works with Chart.js. The repository describes itself as: Open-source, local-first AI agent for coding and real work. BYOK models, MCP, skills, plugins, workflows, and private knowledge bases. The licence is Apache-2.0.
Example prompts
- “/chart-renderer”
Workflow steps
7 steps, taken from the first numbered list in SKILL.md.
- 只传 JSON 可序列化值，不传函数、Date、undefined、DOM 节点或自定义类实例。
- charts 数量必须在 1 到 4 之间；每个图表都必须有合法的 type 和 data。
- labels 和 datasets[].data 的长度应一致；不要混用中文标签和缺失数据。
- 数值缺失时使用 null，不要使用 NaN 或字符串数字。
- 工具调用失败时，读取返回的 error 和 retryable 字段，立即修正参数并重试一次；不要结束当前任务。
- 多图表需求只调用一次工具，使用 charts 数组，不要为每个图表分别调用工具。
- 如果用户没有提供足够数据，先说明缺少哪些字段，不要编造数值。
What it can do on your machine
Read from SKILL.md and the folder at commit a2d314a. 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
No scripts in the folder and no shell commands in SKILL.md (its code samples are json).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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
Chart Renderer loads about 428 tokens when it runs. Until then it costs about 18 tokens; SKILL.md has 118 words of instructions outside code blocks.
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); files beside SKILL.md are not scanned.
SKILL.md
The full file from openvetta/open-vetta at commit a2d314a, republished under its Apache-2.0 licence (© openvetta). 118 words, ~428 tokens.
Download SKILL.mdSave it as
.claude/skills/chart-renderer/SKILL.md (or your agent's skills folder).- name
- chart-renderer
- description
- 创建适用于图表渲染插件的 Chart.js 图表。当用户要求把数据做成图表、可视化趋势、比较分类或展示占比时使用。
Chart.js 图表渲染
目标
把用户提供的数据整理成一次 render_chart 工具调用，让图表出现在当前 MessageList 消息下方。不要只输出 Markdown 表格来替代图表。
工具参数
必须传：
type:line、bar、pie、doughnut、polarArea、radar、scatter或bubbledata: 标准 Chart.js data 对象
可选传：
options: 标准 Chart.js options 对象title: 简短中文标题description: 一句话说明统计口径或时间范围height: 180 到 560 之间的数字，默认 300charts: 可选的图表数组，最多 4 个；使用charts时每一项都必须包含自己的type和data
优先使用一次 render_chart 调用中的 charts 数组生成多图表。单图表也可以继续直接传 type 和 data，以兼容旧调用。
如果用户同一轮需要多个图表，必须尽量合并到一次工具调用中，不要连续调用多次 render_chart。最多 4 个图表，超过 4 个时按用户最重要的指标合并或分批，并先说明限制。
布局规则
- 每个图表都占满整行宽度，单列自上而下排列，顺序即传入顺序
- 不要为了排版重复图表
- 多个指标需要分别展示时，使用一个
charts数组调用，不要连续调用工具
数据格式
分类图表使用：
{
"labels": ["一月", "二月", "三月"],
"datasets": [
{
"label": "销售额",
"data": [120, 180, 240],
"backgroundColor": "#2563eb",
"borderColor": "#2563eb"
}
]
}折线图和柱状图可以有多个 datasets。饼图和环形图通常使用一个 dataset：
{
"labels": ["华东", "华南", "华北"],
"datasets": [{
"label": "订单占比",
"data": [45, 30, 25],
"backgroundColor": ["#2563eb", "#16a34a", "#f59e0b"]
}]
}选择图表类型
- 时间趋势：
line - 分类对比：
bar - 构成占比：
doughnut或pie - 多维指标：
radar - 两个数值变量关系：
scatter - 三个数值变量关系：
bubble
约束
- 只传 JSON 可序列化值，不传函数、Date、undefined、DOM 节点或自定义类实例。
charts数量必须在 1 到 4 之间；每个图表都必须有合法的type和data。labels和datasets[].data的长度应一致；不要混用中文标签和缺失数据。- 数值缺失时使用
null，不要使用 NaN 或字符串数字。 - 工具调用失败时，读取返回的
error和retryable字段，立即修正参数并重试一次；不要结束当前任务。 - 多图表需求只调用一次工具，使用
charts数组，不要为每个图表分别调用工具。 - 如果用户没有提供足够数据，先说明缺少哪些字段，不要编造数值。
© openvetta, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in packages/plugins/presets/chart-renderer/skills/chart-renderer of openvetta/open-vetta.
Open the folder on GitHubat commit a2d314a
Compare with similar skills
Chart Renderer 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Chart Renderer this skillopenvetta/open-vetta | 291 | — | ~428 | Automated safety check: Pass | Apache-2.0 | |
| Brand and Design Toolkitnextlevelbuilder/ui-ux-pro-max-skill | 134k | 1 repos | ~3.5k | Automated safety check: Pass | MIT | |
| Lieflat Chartslarashero3-dotcom/lieflat-charts | 6k | 1 repos | ~4.5k | Automated safety check: Pass | CC-BY-NC-4.0 | |
| DesignOhh-889/skyroc | 795 | 9 repos | ~3.1k | Automated safety check: Pass | MIT | |
| Web Designcountbot-ai/CountBot | 782 | — | ~1k | Automated safety check: Pass | MIT | |
| Tufte Data Vizcaylent/tufte-data-viz | 223 | — | ~3.5k | Automated safety check: Pass | MIT |
Similar skills
Lieflat Charts
larashero3-dotcom/lieflat-charts
Generates single-file HTML charts and full-page reports from real gallery templates, using a grayscale base with optional color presets.
Design
Ohh-889/skyroc
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations…
Web Design
countbot-ai/CountBot
网页设计与部署。生成精美的单页 HTML 网页（报告、落地页、数据可视化等），支持一键部署到 Cloudflare Pages。使用 Tailwind CSS + Chart.js + Font Awesome 技术栈。当用户要求制作网页、生成报告页面、创建落地页、数据可视化展示、部署网页到线上时使用。
Tufte Data Viz
caylent/tufte-data-viz
A skill your agent uses when creating, reviewing, or styling charts, graphs, dashboards, sparklines, or any data visualization.
Coot Inline Graphs
pemsley/coot
Create interactive inline Chart.js graphs directly in the chat from live Coot data.
More from openvetta/open-vetta
All 21 skills in this repoMobile Android Design
openvetta/open-vetta
Master Material Design 3 and Jetpack Compose patterns for building native Android apps.
Publish Ability
openvetta/open-vetta
Publish a skill, scene, MCP server, plugin, or bundle to the Vetta ability marketplace.
Plugin Workbench
openvetta/open-vetta
Create, implement, build, pack, install, reload, and manage Vetta desktop plugins for non-developers.
Create Skill
openvetta/open-vetta
Create or update Vetta-compatible Agent Skills. An agent skill from openvetta/open-vetta.
Mobile UI Design
openvetta/open-vetta
Design mobile-style HTML pages (iOS / Android) for preview in the Mobile UI Preview panel.
Remotion Video
openvetta/open-vetta
Create, modify, and render Remotion React video projects in the current Vetta conversation workspace.
Related
Works with
Questions about Chart Renderer
What does Chart Renderer do?
创建适用于图表渲染插件的 Chart.js 图表。当用户要求把数据做成图表、可视化趋势、比较分类或展示占比时使用. An agent skill from openvetta/open-vetta. Chart Renderer is an agent skill from openvetta/open-vetta.
How do I install Chart Renderer in Claude Code?
Run `npx skills add openvetta/open-vetta --skill chart-renderer -a claude-code`. Or copy the skill folder (packages/plugins/presets/chart-renderer/skills/chart-renderer in openvetta/open-vetta) into .claude/skills/chart-renderer in your project. Claude Code loads it when a task matches its description.
How do I install Chart Renderer in Codex?
Run `npx skills add openvetta/open-vetta --skill chart-renderer -a codex`. Or copy the skill folder (packages/plugins/presets/chart-renderer/skills/chart-renderer in openvetta/open-vetta) into .agents/skills/chart-renderer in your project. Codex loads it when a task matches its description.
Can I use Chart Renderer 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 openvetta/open-vetta --skill chart-renderer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/chart-renderer, .gemini/skills/chart-renderer, .github/skills/chart-renderer and .opencode/skills/chart-renderer in your project.
What does Chart Renderer need to run?
SKILL.md names no scripts, command-line tools or credentials: Chart Renderer is instructions for the agent only.
Does Chart Renderer access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Chart Renderer 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. Review the folder before installing.
What licence does Chart Renderer use?
Chart Renderer is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Chart Renderer use?
About 428 tokens (SKILL.md is roughly 1.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Chart Renderer?
Skills that share tags, products or a category with Chart Renderer: Brand and Design Toolkit (nextlevelbuilder/ui-ux-pro-max-skill, 134k stars), Lieflat Charts (larashero3-dotcom/lieflat-charts, 6k stars), Design (Ohh-889/skyroc, 795 stars) and Web Design (countbot-ai/CountBot, 782 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Chart Renderer?
openvetta (a GitHub organization) maintains it in openvetta/open-vetta, which has 291 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on October 8, 2026.
Source: openvetta/open-vetta on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.