Turn any idea into a beautiful HTML visualization — with one prompt. A Claude Code skill.
# Add to your Claude Code skills
git clone https://github.com/careerhackeralex/visualizeGuides for using ide extensions skills like visualize.
Last scanned: 5/30/2026
{
"issues": [],
"status": "PASSED",
"scannedAt": "2026-05-30T16:32:29.068Z",
"npmAuditRan": true,
"pipAuditRan": true
}visualize is an open-source ide extensions skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by careerhackeralex. Turn any idea into a beautiful HTML visualization — with one prompt. A Claude Code skill. It has 115 GitHub stars.
Yes. visualize passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.
Clone the repository with "git clone https://github.com/careerhackeralex/visualize" and add it to your Claude Code skills directory (see the Installation section above).
visualize is primarily written in JavaScript. It is open-source under careerhackeralex on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other IDE Extensions skills you can browse and compare side by side. Open the IDE Extensions category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh visualize against similar tools.
No comments yet. Be the first to share your thoughts!
Top skills in this category by stars
Based on votes and bookmarks from developers who liked this skill
Turn any idea into a beautiful HTML visualization — with one prompt.
A Claude Code plugin that creates stunning, self-contained HTML visualizations from natural language. Slide decks, dashboards, infographics, flowcharts, timelines, and more — all as single HTML files you can open anywhere.
HTML is not a "website." It's a visualization tool. Code is cheap. Everyone should feel empowered to visualize anything.
Describe what you want to visualize → get a production-quality HTML file.
You: "Create a pitch deck for my AI startup"
→ pitch-deck.html (interactive slides, dark/light themes, keyboard nav, export to PNG/PDF)
You: "Visualize this CSV data as a dashboard"
→ sales-dashboard.html (KPI cards, Chart.js graphs, responsive grid)
You: "Make an infographic about remote work trends"
→ remote-work-infographic.html (big stats, scroll animations, print-ready)
| Type | Description |
|---|---|
| 🎯 Slide Deck | Presentations with keyboard nav, transitions, speaker notes |
| 📊 Dashboard | KPI cards, charts, metrics — Chart.js powered |
| 📈 Infographic | Scrollable visual storytelling with animations |
| 🔀 Flowchart | Process diagrams, decision trees, architecture diagrams |
| 📅 Timeline | Chronological events, roadmaps, milestones |
| ⚖️ Comparison | Side-by-side features, pros/cons matrices |
| 📉 Data Viz | Bar, line, pie, radar charts from raw data |
| 📄 One-Pager | Landing pages, summaries, briefs |
| 🧠 Mind Map | Concept relationships, brainstorming visuals |
| 📋 Kanban | Status boards, categorized item tracking |
| Gamma/Canva | PowerPoint | Visualize | |
|---|---|---|---|
| Cost | $10-40/mo | $100+ license | Free |
| Output | Proprietary | .pptx | Standard HTML |
| Customization | Template-limited | Manual | Infinite |
| Interactivity | Limited | None | Full HTML/CSS/JS |
| AI-native | Bolted-on | Copilot add-on | Core workflow |
| Offline | No | Yes | Yes |
| Version control | No | Barely | Yes (it's text) |
| File size | N/A | 10MB+ | ~20KB |
Every visualization includes:
@media print styles# Step 1: Add the marketplace (one-time)
claude plugin marketplace add careerhackeralex/visualize
# Step 2: Install the plugin
claude plugin install visualize@careerhackeralex
To update later:
claude plugin update visualize@careerhackeralex
# Clone the repo
git clone https://github.com/careerhackeralex/visualize.git
# Claude Code auto-discovers plugins with .claude-plugin/plugin.json
# Just open Claude Code in the cloned directory, or add it as a plugin dir:
claude plugin install --plugin-dir /path/to/visualize
Once installed, just ask Claude Code to visualize anything:
"Create a presentation about our Q4 results"
"Visualize this data as a dashboard: [paste CSV/JSON]"
"Make an infographic summarizing this article: [paste URL]"
"Show me a flowchart of our deployment process"
"Create a timeline of AI milestones"
The skill triggers automatically on visualization-related requests.
See the examples/ directory for sample outputs.
visualize/
├── .claude-plugin/
│ └── plugin.json # Plugin manifest
├── skills/
│ └── visualize/
│ ├── SKILL.md # Core skill instructions
│ └── references/ # Design system, skeleton, patterns
├── examples/ # 15 sample HTML outputs
├── eval/ # Quality assurance & eval loop
├── research/ # Design research notes
├── CLAUDE.md # Claude Code context file
├── README.md # This file
└── LICENSE # MIT
.html file with inline CSS/JSThe skill encodes professional design knowledge (typography scales, color theory, spacing rhythm, animation best practices) so every output looks polished without manual design work.
We use a systematic evaluation loop to improve quality:
eval/stress-tests.mdSKILL.md or references (not individual outputs)See eval/LOOP.md for the full methodology.
We aim to produce visualizations that people would:
The bar is not "good for AI-generated." The bar is "good, period."
MIT — use it however you want.
Built by Career Hacker Alex (커리어해커 알렉스)
기술로 선한영향력을 만들고 싶습니다 — Create positive impact through technology.