data-viz-renderer
data-viz-renderer is a skill in zebbern/claude-code-guide, last changed 31 May 2026. It can run shell commands, name web addresses and bundle scripts. Our pattern check flagged nothing at commit b50a31a on 27 Oct 2026.
Pattern check: nothing flagged · commit b50a31a · 27 Oct 2026
InstallGenerate self-contained HTML/SVG infographics from JSON data, including stat cards, bar charts, flow diagrams, and mixed dashboards. Offers 8 color palettes and built-in icons with no external dependencies. Triggered when users request data visualization, infographics, charts, or dashboards.
- Licence
- MIT
- Repo stars
- 4.7k
- Folder last changed
- 31 May 2026 (opens in a new tab)
- Publisher
- zebbern
- Files
- 3 files
- Checked
- b50a31a (opens in a new tab) · 27 Oct 2026
Install
Each tab says whether it installs commit b50a31a, the one we checked, or the latest version.
No tab for your agent? Use Any agent for OpenCode, Goose, Windsurf (Devin Desktop), Zed, Roo Code, Factory Droid, Junie, Amp and Antigravity, and Claude Code for Cline. Kiro needs the folder copied by hand.
Pinned to commit b50a31a, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&
git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/zebbern/claude-code-guide.git "$tmp" &&
git -C "$tmp" fetch -q --depth 1 origin b50a31ad52510d148709b1eb61406952a02c3d19 &&
git -C "$tmp" sparse-checkout set -- skills/data-viz-renderer &&
git -C "$tmp" checkout -q b50a31ad52510d148709b1eb61406952a02c3d19 &&
mkdir -p .claude/skills &&
mkdir .claude/skills/data-viz-renderer &&
cp -R "$tmp"/skills/data-viz-renderer/. .claude/skills/data-viz-renderer/ &&
rm -rf "$tmp"If Claude Code was already running and this created the skills folder, run /reload-skills.
Pinned to commit b50a31a, the one we checked.
Skills in the Claude apps belong to your account rather than to a project.
Make data-viz-renderer.zip, with the skill folder at the top level:
tmp="$(mktemp -d)" &&
git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/zebbern/claude-code-guide.git "$tmp" &&
git -C "$tmp" fetch -q --depth 1 origin b50a31ad52510d148709b1eb61406952a02c3d19 &&
git -C "$tmp" sparse-checkout set -- skills/data-viz-renderer &&
git -C "$tmp" checkout -q b50a31ad52510d148709b1eb61406952a02c3d19 &&
out="$(mktemp -d)" &&
cp -R "$tmp"/skills/data-viz-renderer "$out"/data-viz-renderer &&
(cd "$out" && zip -qr - data-viz-renderer) > data-viz-renderer.zip &&
rm -rf "$tmp" "$out"In Claude, open Customize > Skills, select +, then + Create skill > Upload a skill, and choose data-viz-renderer.zip.
On Free, Pro and Max plans, turn on Code execution and file creation (Create and edit files in newer settings) under Settings > Capabilities.
Pinned to commit b50a31a, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&
git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/zebbern/claude-code-guide.git "$tmp" &&
git -C "$tmp" fetch -q --depth 1 origin b50a31ad52510d148709b1eb61406952a02c3d19 &&
git -C "$tmp" sparse-checkout set -- skills/data-viz-renderer &&
git -C "$tmp" checkout -q b50a31ad52510d148709b1eb61406952a02c3d19 &&
mkdir -p .agents/skills &&
mkdir .agents/skills/data-viz-renderer &&
cp -R "$tmp"/skills/data-viz-renderer/. .agents/skills/data-viz-renderer/ &&
rm -rf "$tmp"Codex picks up new skills on its own; restart it if this one does not appear.
Pinned to commit b50a31a, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&
git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/zebbern/claude-code-guide.git "$tmp" &&
git -C "$tmp" fetch -q --depth 1 origin b50a31ad52510d148709b1eb61406952a02c3d19 &&
git -C "$tmp" sparse-checkout set -- skills/data-viz-renderer &&
git -C "$tmp" checkout -q b50a31ad52510d148709b1eb61406952a02c3d19 &&
mkdir -p .cursor/skills &&
mkdir .cursor/skills/data-viz-renderer &&
cp -R "$tmp"/skills/data-viz-renderer/. .cursor/skills/data-viz-renderer/ &&
rm -rf "$tmp"Pinned to commit b50a31a, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&
git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/zebbern/claude-code-guide.git "$tmp" &&
git -C "$tmp" fetch -q --depth 1 origin b50a31ad52510d148709b1eb61406952a02c3d19 &&
git -C "$tmp" sparse-checkout set -- skills/data-viz-renderer &&
git -C "$tmp" checkout -q b50a31ad52510d148709b1eb61406952a02c3d19 &&
mkdir -p .github/skills &&
mkdir .github/skills/data-viz-renderer &&
cp -R "$tmp"/skills/data-viz-renderer/. .github/skills/data-viz-renderer/ &&
rm -rf "$tmp"In a running Copilot CLI session, run /skills reload.
Or install it with gh skill, which also installs the commit we checked. Needs GitHub CLI 2.90 or later.
gh skill install zebbern/claude-code-guide skills/data-viz-renderer/SKILL.md@b50a31ad52510d148709b1eb61406952a02c3d19 --agent github-copilot --scope projectPinned to commit b50a31a, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&
git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/zebbern/claude-code-guide.git "$tmp" &&
git -C "$tmp" fetch -q --depth 1 origin b50a31ad52510d148709b1eb61406952a02c3d19 &&
git -C "$tmp" sparse-checkout set -- skills/data-viz-renderer &&
git -C "$tmp" checkout -q b50a31ad52510d148709b1eb61406952a02c3d19 &&
mkdir -p .gemini/skills &&
mkdir .gemini/skills/data-viz-renderer &&
cp -R "$tmp"/skills/data-viz-renderer/. .gemini/skills/data-viz-renderer/ &&
rm -rf "$tmp"In a running session, run /skills reload.
Or use Gemini CLI’s own installer. Installs the latest version, not the one we checked.
gemini skills install https://github.com/zebbern/claude-code-guide.git --path skills/data-viz-renderer --scope workspacePinned to commit b50a31a, the one we checked.
Codex, Cursor, Copilot, VS Code, Gemini CLI, OpenCode, Goose, Amp and Zed all read .agents/skills; Claude Code and Kiro list only their own folders.
From your project's root folder:
tmp="$(mktemp -d)" &&
git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/zebbern/claude-code-guide.git "$tmp" &&
git -C "$tmp" fetch -q --depth 1 origin b50a31ad52510d148709b1eb61406952a02c3d19 &&
git -C "$tmp" sparse-checkout set -- skills/data-viz-renderer &&
git -C "$tmp" checkout -q b50a31ad52510d148709b1eb61406952a02c3d19 &&
mkdir -p .agents/skills &&
mkdir .agents/skills/data-viz-renderer &&
cp -R "$tmp"/skills/data-viz-renderer/. .agents/skills/data-viz-renderer/ &&
rm -rf "$tmp"Or use the skills CLI from skills.sh. Installs the latest version, not the one we checked. The skills CLI reports installs to skills.sh unless you set DISABLE_TELEMETRY=1.
npx skills@1.7.4 add zebbern/claude-code-guide --skill data-viz-rendererWhat it can touch
From the files and frontmatter at commit b50a31a. This is how much a skill can do, not whether it is risky.
What it can touch: Scripts or outside hosts
Runs shell commands
Its instructions or files give the agent commands to run on your computer.
Names web addresses
It mentions outside web addresses the agent may visit. We list them but don't follow them.
Bundles scripts
The folder holds code files the agent may run.
Pattern check
Pattern check: nothing flagged · commit b50a31a · 27 Oct 2026
We checked every text file in this skill, at commit b50a31a on 27 Oct 2026, against 45 published patterns such as download-and-run commands, hidden text and credential access. We don't run the skill, we don't read the web pages it points to, and we can't judge everything its instructions might lead an agent to do. In published tests, pattern checks like this one missed most malicious skills. Read the skill before you install it — especially anything it asks you to download or run.
How the check worksReport an incorrect finding
Outside links we did not follow
- http://www.w3.org/2000/svg
Format check
Each agent reads SKILL.md a little differently. We check the file against each one's published rules; we don't run the skill in any agent.
Agent Skills specPasses with warnings
The open format from agentskills.io, held to what the strictest agents enforce, so one folder loads everywhere.
- Warning
The frontmatter uses [ ] or { } values. Most agents accept them, but the spec's validator (skills-ref) rejects the file. F4
Fix: Write lists as "- item" lines and maps as indented key: value lines, without anchors or tags.
- Warning
Fields outside the spec: type and tags. Uploads to the Claude apps and API, and the spec's validator, reject the file; most agents ignore these fields. O1
Fix: Delete them for a portable skill, or keep them if you only target the agents that read them.
- Warning
Claude CodePasses
Claude Code reads its own extra fields, ignores unknown ones, and still loads a skill whose frontmatter is broken, without its fields.
- Note
Claude Code ignores fields it doesn't know: type and tags. O1
Fix: Check the spelling against Claude Code's field list, or delete them.
- Note
Claude apps & API uploadFails
Uploading to claude.ai or the Claude API, or packaging with Anthropic's script, accepts only the six spec fields and stops on anything else.
- Error
Upload and packaging fail on fields outside the spec: type and tags. O1
Fix: Delete them, and keep your own data under metadata as text values.
- Note
The description is 292 characters. The claude.ai Help Center says 200 at most, though Anthropic's API docs and validator allow 1,024. D4
Fix: If the claude.ai upload refuses it, trim the description to 200 characters.
- Error
OpenAI (Codex & API)Passes with warnings
Codex finds SKILL.md by its exact name and needs a description; OpenAI's Skills API checks the frontmatter against the spec and caps uploads.
- Warning
Fields outside the spec: type and tags. Codex ignores them; OpenAI doesn't say whether its upload accepts them. O1
Fix: Delete them, or move your own data under metadata as text values.
- Warning
VS Code & CopilotPasses
VS Code reads skills one folder below .github/skills, .claude/skills or .agents/skills and falls back to the folder name when the name is missing or differs; GitHub's Copilot docs require the exact name SKILL.md.
- Note
VS Code ignores fields it doesn't support: type and tags. O1
Fix: Delete them unless another agent you target reads them.
- Note
SKILL.md
Files
3 files
| Path | Size |
|---|---|
| LICENSE (opens in a new tab) | 1.1 KB |
| SKILL.md (opens in a new tab) | 5.2 KB |
| scripts/build_infographic.py (opens in a new tab) | 26.6 KB |
More from zebbern/claude-code-guide
academic-paper-reviewer
zebbern/claude-code-guide
Simulates academic peer review, evaluating papers across Originality, Methodology, Results, and Writing to provide Major/Minor Revision recommendations with actionable feedback. Triggers when a user asks to "review my paper," "simulate peer review," or "give my paper a peer review.
- Instructions only
Pattern check: Nothing flaggedMIT · 4.7k repo stars · Updated 31 May 2026
active-directory-attacks
zebbern/claude-code-guide
This skill should be used when the user asks to "attack Active Directory", "exploit AD", "Kerberoasting", "DCSync", "pass-the-hash", "BloodHound enumeration", "Golden Ticket", "Silver Ticket", "AS-REP roasting", "NTLM relay", or needs guidance on Windows domain penetration testing.
- Touches credentials
- Runs shell commands
- +1 more
Pattern check: Nothing flaggedMIT · 4.7k repo stars · Updated 31 May 2026
api-fuzzing-bug-bounty
zebbern/claude-code-guide
This skill should be used when the user asks to "test API security", "fuzz APIs", "find IDOR vulnerabilities", "test REST API", "test GraphQL", "API penetration testing", "bug bounty API testing", or needs guidance on API security assessment techniques.
- Runs shell commands
- Reaches the network
- +1 more
Pattern check: Nothing flaggedMIT · 4.7k repo stars · Updated 31 May 2026
api-shape-explorer
zebbern/claude-code-guide
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
- Instructions only
Pattern check: Nothing flaggedMIT · 4.7k repo stars · Updated 31 May 2026
audit-flow
zebbern/claude-code-guide
Interactive system flow tracing across CODE, API, AUTH, DATA, NETWORK layers with SQLite persistence and Mermaid export. Use for security audits, compliance documentation, flow tracing, feature ideation, brainstorming, debugging, architecture reviews, or incident post-mortems. Triggers on audit, trace flow, document flow, security review, debug flow, brainstorm, architecture review, post-mortem, incident review.
- Runs shell commands
- Reaches the network
- +1 more
Pattern check: Nothing flaggedMIT · 4.7k repo stars · Updated 31 May 2026
authentication-patterns
zebbern/claude-code-guide
Authentication patterns: session vs JWT vs OAuth comparison, provider selection (NextAuth, Clerk, Supabase Auth), security checklist, and common mistakes. Use when implementing auth, reviewing auth flows, or choosing auth providers.
- Instructions only
Pattern check: Nothing flaggedMIT · 4.7k repo stars · Updated 31 May 2026