Openchart
tryopendata/skills
Generates OpenChart (https://github.com/tryopendata/openchart) chart, table, graph, sankey, tilemap, and geo map specs from data, and guides editorial design decisions.
Turns supplied content into self-contained HTML and PNG in two modes: card for one shareable frame（知识卡、信息卡、金句卡、封面、把要点做成一张图）, report for multi-section documents（可视化报告、HTML 汇报页、PRD/计划/评审做成网页）.
Install Hai Visual Explainer
$ npx skills add hylarucoder/hai-stack --skill hai-visual-explainer -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install hylarucoder/hai-stack hai-visual-explainer --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/hylarucoder/hai-stack.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/hai-visual-explainer .claude/skills/hai-visual-explainer && 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 "hai-visual-explainer" agent skill from https://github.com/hylarucoder/hai-stack/tree/main/skills/hai-visual-explainer into .claude/skills/hai-visual-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hai-visual-explainer", 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/hylarucoder/hai-stack/tree/main/skills/hai-visual-explainerType 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 hylarucoder/hai-stack --skill hai-visual-explainer -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install hylarucoder/hai-stack hai-visual-explainer --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hylarucoder/hai-stack.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/hai-visual-explainer .agents/skills/hai-visual-explainer && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "hai-visual-explainer" agent skill from https://github.com/hylarucoder/hai-stack/tree/main/skills/hai-visual-explainer into .agents/skills/hai-visual-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hai-visual-explainer", 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 hylarucoder/hai-stack --skill hai-visual-explainer -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install hylarucoder/hai-stack hai-visual-explainer --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hylarucoder/hai-stack.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/hai-visual-explainer .cursor/skills/hai-visual-explainer && 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 "hai-visual-explainer" agent skill from https://github.com/hylarucoder/hai-stack/tree/main/skills/hai-visual-explainer into .cursor/skills/hai-visual-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hai-visual-explainer", 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/hylarucoder/hai-stack.git --path skills/hai-visual-explainer--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 hylarucoder/hai-stack --skill hai-visual-explainer -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install hylarucoder/hai-stack hai-visual-explainer --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hylarucoder/hai-stack.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/hai-visual-explainer .gemini/skills/hai-visual-explainer && 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 "hai-visual-explainer" agent skill from https://github.com/hylarucoder/hai-stack/tree/main/skills/hai-visual-explainer into .gemini/skills/hai-visual-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hai-visual-explainer", 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 hylarucoder/hai-stack hai-visual-explainerInstalls 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 hylarucoder/hai-stack --skill hai-visual-explainer -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/hylarucoder/hai-stack.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/hai-visual-explainer .github/skills/hai-visual-explainer && 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 "hai-visual-explainer" agent skill from https://github.com/hylarucoder/hai-stack/tree/main/skills/hai-visual-explainer into .github/skills/hai-visual-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hai-visual-explainer", 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 hylarucoder/hai-stack --skill hai-visual-explainer -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install hylarucoder/hai-stack hai-visual-explainer --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/hylarucoder/hai-stack.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/hai-visual-explainer .opencode/skills/hai-visual-explainer && 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 "hai-visual-explainer" agent skill from https://github.com/hylarucoder/hai-stack/tree/main/skills/hai-visual-explainer into .opencode/skills/hai-visual-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hai-visual-explainer", 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
hai-visual-explainer- GitHub stars
- 380
- Token cost
- ~2k tokens
- SKILL.md length
- 1,060 words
- Files
- 11 (incl. scripts, references, assets)
- Skills in repo
- 18
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Turns supplied content into self-contained HTML and PNG in two modes: card for one shareable frame（知识卡、信息卡、金句卡、封面、把要点做成一张图）, report for multi-section documents（可视化报告、HTML 汇报页、PRD/计划/评审做成网页）.
- Works in 8 steps: Header: title, scope, generation date. → Verdict (optional): if the source itself… → Structure Map: Mermaid or layout diagram… → …
- Tasks that involve Infographics
- SKILL.md covers Overview, Select the mode, Core Principle and Report Content Model, plus 4 more sections
- Runs JavaScript scripts from its folder; calls node
What it does
Hai Visual Explainer is an agent skill from hylarucoder/hai-stack. Turns supplied content into self-contained HTML and PNG in two modes: card for one shareable frame（知识卡、信息卡、金句卡、封面、把要点做成一张图）, report for multi-section documents（可视化报告、HTML 汇报页、PRD/计划/评审做成网页）. Preserve source meaning and use structure-appropriate typography, diagrams, matrices, and evidence. Owns presentation, not the underlying architecture or product judgment; use a frontend or document-design skill for apps or print artifacts.
Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 14 other files, including scripts, reference files and assets (for example `SKILL.zh_CN.md`, `agents/openai.yaml` and `references/card-design.md`).
It sits in Frontend & Design, covering Infographics, Diagrams and PRD writing.
When your agent uses it
- Tasks that involve Infographics
- Tasks that involve Diagrams
- Tasks that involve PRD writing
Example prompts
- “Use the hai-visual-explainer skill to turn supplied content into self-contained HTML and PNG in two modes: card for one shareable…”
- “/hai-visual-explainer”
Requirements
- Node.js
Workflow steps
8 steps, taken from the first numbered list in SKILL.md.
- Header: title, scope, generation date.
- Verdict (optional): if the source itself states a conclusion, surface it here as an entry point. Don't manufacture a condensed judgment…
- Structure Map: Mermaid or layout diagram of actors, relationships, flow, or decision path — placed near the top as the reader's coordinate…
- Core Sections: the source body carried through theme by theme, with visuals only where they
- Decision Matrix: options, risks, cost, value, or priority.
- Timeline / Phases: stages, exit proof, and next step when execution is involved.
- Risks and Proof: key risks, validation method, pass/fail signal.
- Next Move: explicit next action.
What it can do on your machine
Read from SKILL.md and the folder at commit a6c7ed2. 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 3 files in scripts/ (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
node
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
Hai Visual Explainer loads about 2k tokens when it runs, and up to ~4.3k if it reads all its reference files. Until then it costs about 113 tokens; SKILL.md has 1,060 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); the scripts in this folder are not scanned.
SKILL.md
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 1,060 words (~2,023 tokens).
“For Chinese readers, see SKILL.zh_CN.md. The English SKILL.md is the execution source of truth.”
- name
- hai-visual-explainer
Files
SKILL.md and 10 other files (scripts, references, assets) in skills/hai-visual-explainer of hylarucoder/hai-stack.
- SKILL.md
- SKILL.zh_CN.md
- agents/openai.yaml
- assets/card-template.html
- references/card-design.md
- references/card-output-template.md
- references/html-skeleton.md
- references/output-template.md
- scripts/README.md
- scripts/lint_mermaid.js
- scripts/render_report.mjs
Open the folder on GitHubat commit a6c7ed2
Compare with similar skills
Hai Visual Explainer 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 |
|---|---|---|---|---|---|---|
| Hai Visual Explainer this skillhylarucoder/hai-stack | 380 | — | ~2k | Automated safety check: Pass | Custom licence | |
| Opencharttryopendata/skills | 141 | — | ~11k | Automated safety check: Pass | MIT | |
| HTML Explainergreenfield-inc/Pane | 519 | — | ~1.6k | Automated safety check: Notes | Custom licence | |
| Concept DiagramsTommy-yw/RunbookHermes | 546 | 3 repos | ~4.3k | Automated safety check: Pass | MIT | |
| Data Viz Rendererzebbern/claude-code-guide | 4.6k | — | ~1.3k | Automated safety check: Pass | MIT | |
| Alt Text DesignOwl-Listener/inclusive-design-skills | 103 | — | ~946 | Automated safety check: Pass | MIT |
Similar skills
HTML Explainer
greenfield-inc/Pane
The house standard for any skill that renders an HTML page for a person to read, covering design tokens, typography, components, diagrams, and quality gates so every generated page shares one calm…
Concept Diagrams
Tommy-yw/RunbookHermes
Generate flat, minimal light/dark-aware SVG diagrams as standalone HTML files, using a unified educational visual language with 9 semantic color ramps, sentence-case typography, and automatic dark…
Data Viz Renderer
zebbern/claude-code-guide
Generate self-contained HTML/SVG infographics from JSON data, including stat cards, bar charts, flow diagrams, and mixed dashboards.
Alt Text Design
Owl-Listener/inclusive-design-skills
Write meaningful alternative text for images, charts, diagrams, and visual content.
- Official
Visual Design
aws-samples/sample-strands-agent-with-agentcore
Use this skill any time the user needs a visual output as an image or PDF — charts, diagrams, posters, infographics, abstract artwork, or any visual design.
More from hylarucoder/hai-stack
All 18 skills in this repoWrite Technical Acceptance Report
hylarucoder/hai-stack
Verify a defined software change against requirements and produce a proportional, evidence-backed acceptance report with specification precedence, scope boundaries, requirement-to-evidence…
Hai Ast Grep
hylarucoder/hai-stack
Produces a ready-to-run ast-grep command or reusable YAML lint/codemod rule, validated against positive and negative fixtures.
Readme Beautifier
hylarucoder/hai-stack
Reformats and restructures a README or similar Markdown project document without changing its factual content, voice, or scope, then summarizes formatting-only edits.
Code Review And Quality
hylarucoder/hai-stack
Reviews a code change for correctness, security, maintainability, architecture, performance, and verification gaps, or performs a local code-smell review.
Entity Model Auditor
hylarucoder/hai-stack
Audits an entity model field by field: what should exist, what exists now, where each value belongs (column, config, computed runtime value, or removal), and what must migrate.
Geju
hylarucoder/hai-stack
Challenges an overly conservative, incremental, or compatibility-led proposal with a bold target model, a concrete kill/merge/split list, materially different options, and a falsifiable first proof…
Related
Questions about Hai Visual Explainer
What does Hai Visual Explainer do?
Turns supplied content into self-contained HTML and PNG in two modes: card for one shareable frame（知识卡、信息卡、金句卡、封面、把要点做成一张图）, report for multi-section documents（可视化报告、HTML 汇报页、PRD/计划/评审做成网页）. Hai Visual Explainer is an agent skill from hylarucoder/hai-stack. Turns supplied content into self-contained HTML and PNG in two modes: card for one shareable frame（知识卡、信息卡、金句卡、封面、把要点做成一张图）, report for multi-section documents（可视化报告、HTML 汇报页、PRD/计划/评审做成网页）.
When should I use Hai Visual Explainer?
Hai Visual Explainer fits situations like: tasks that involve Infographics; tasks that involve Diagrams; tasks that involve PRD writing.
How do I install Hai Visual Explainer in Claude Code?
Run `npx skills add hylarucoder/hai-stack --skill hai-visual-explainer -a claude-code`. Or copy the skill folder (skills/hai-visual-explainer in hylarucoder/hai-stack) into .claude/skills/hai-visual-explainer in your project. Claude Code loads it when a task matches its description.
How do I install Hai Visual Explainer in Codex?
Run `npx skills add hylarucoder/hai-stack --skill hai-visual-explainer -a codex`. Or copy the skill folder (skills/hai-visual-explainer in hylarucoder/hai-stack) into .agents/skills/hai-visual-explainer in your project. Codex loads it when a task matches its description.
Can I use Hai Visual Explainer 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 hylarucoder/hai-stack --skill hai-visual-explainer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/hai-visual-explainer, .gemini/skills/hai-visual-explainer, .github/skills/hai-visual-explainer and .opencode/skills/hai-visual-explainer in your project.
What does Hai Visual Explainer need to run?
Going by SKILL.md and its folder, Hai Visual Explainer needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node). Our summary lists: Node.js.
Does Hai Visual Explainer 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 Hai Visual Explainer 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 Hai Visual Explainer use?
Hai Visual Explainer has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does Hai Visual Explainer use?
About 2k tokens (SKILL.md is roughly 8.1k 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.3k tokens, read only when the agent opens those files.
What are the alternatives to Hai Visual Explainer?
Skills that share tags, products or a category with Hai Visual Explainer: Openchart (tryopendata/skills, 141 stars), HTML Explainer (greenfield-inc/Pane, 519 stars), Concept Diagrams (Tommy-yw/RunbookHermes, 546 stars) and Data Viz Renderer (zebbern/claude-code-guide, 4.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Hai Visual Explainer?
hylarucoder (a GitHub user) maintains it in hylarucoder/hai-stack, which has 380 GitHub stars. The repository holds 18 skills in this directory. The repository was last updated on October 5, 2026.
Source: hylarucoder/hai-stack on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.