Visualization skills for Claude Code
npx claudepluginhub careerhackeralex/visualizeCreate beautiful, self-contained HTML visualizations from any content or idea. Use for slide decks, dashboards, infographics, flowcharts, timelines, cheat sheets, posters, and more.
Share bugs, ideas, or general feedback.
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.