π View on GitHub: careerhackeralex/visualize
π Quick Installation
A Claude Code skill for creating stunning, self-contained HTML visualizations from natural language.
Claude Code Plugin (recommended)
# Step 1: Add the marketplace (one-time)
claude plugin marketplace add careerhackeralex/visualize
# Step 2: Install the plugin
claude plugin install visualize@careerhackeralexManual Installation
# Clone the repo
git clone https://github.com/careerhackeralex/visualize.git
# Claude Code auto-discovers plugins with .claude-plugin/plugin.json
claude plugin install --plugin-dir /path/to/visualizeβ‘ What It Does
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)π Supported Visualization Types
| 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 |
β¨ Features
Every visualization includes:
- π Dark / Light / Auto themes β toggle via hamburger menu, persisted to localStorage
- π₯ Download as PNG β 2x retina quality via html-to-image
- π¨οΈ Print / Save PDF β optimized
@media printstyles - π± Responsive β works on desktop, tablet, and mobile
- β¨οΈ Keyboard navigation β arrow keys for slide decks
- π¨ Beautiful defaults β professional typography, HSL color system, 8px spacing grid
- π¦ Single file β everything inline, zero dependencies beyond optional CDN libraries
- βΏ Accessible β semantic HTML, WCAG AA contrast
π CDN Libraries (optional)
- Chart.js β beautiful charts with zero config
- D3.js β complex custom data visualizations
- Mermaid β diagrams from text definitions
- Three.js β 3D visualizations
- Leaflet β interactive maps
- Reveal.js β full-featured slide engine
πͺ Why Visualize Over Gamma / Canva / PowerPoint?
| 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 |
π License
MIT β use it however you want.
Built by Career Hacker Alex (컀리μ΄ν΄μ»€ μλ μ€)
κΈ°μ λ‘ μ νμν₯λ ₯μ λ§λ€κ³ μΆμ΅λλ€ β Create positive impact through technology.
