visualize

name visualize description Create beautiful, self-contained HTML visualizations from any content or idea. Use for: slide decks, presentations, infographics, dashboards, flowcharts, diagrams, timelines, comparison tables, data visualizations, landing pages, one-pagers, org charts, mind maps, process flows, kanban boards, report summaries, or any visual that helps humans digest information faster. Trigger on requests like "visualize this," "make a deck," "create a slide," "build an infographic," "show me a dashboard," "make this visual," or any request to present information in a visual HTML format. license MIT metadata {"author":"careerhackeralex","version":"0.3.0","category":"document-creation","tags":["visualization","html","slides","dashboard","infographic"]} Visualize Turn any idea, data, or content into a stunning single-file HTML visualization. After Creating a File Always do BOTH of these after writing the HTML file: Auto-open in browser: Run open <filename>.html (macOS) or xdg-open <filename>.html (Linux) so the user sees it immediately Return the file path as a clickable URL: Include file://<absolute-path> in your response so the user can click to open it Example response after creation: Created your visualization! Opening in browser now... 📄 file:///Users/you/project/my-dashboard.html Critical Requirements (NON-NEGOTIABLE) ⚠️ EVALUATION FAILURE GUARANTEED WITHOUT THESE 8 ELEMENTS ⚠️ EVERY file MUST start from the skeleton template in references/skeleton.md — copy the ENTIRE template, then add your content. CSS Custom Properties: Exact names required: --bg, --surface, --surface-hover, --border, --text, --text-secondary, --accent, --accent-secondary, --positive, --negative, --warning — NO other names (not --bg-primary, not --text-primary). CRITICAL: These exact property names are required for evaluation system compatibility. Utility Menu System (MANDATORY): Complete .viz-menu element with .viz-menu-toggle button, .viz-menu-dropdown container, download PNG button ( onclick="downloadImage()" ), print button ( onclick="window.print()" ), and html-to-image CDN script ( <script src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.js"></script> ). EVALUATION CRITICAL: Menu system is automatically checked and WILL CAUSE FAILURES if missing. Theme Classes (EVALUATION CRITICAL): Must explicitly define BOTH .theme-light and .theme-dark classes in stylesheet with complete custom property definitions. EXAMPLE REQUIRED: :root { /* base properties */ } .theme-light { --bg : #ffffff ; --surface : #f8f9fa ; --text : #1a1a1a ; /* etc */ } .theme-dark { --bg : #0a0a0a ; --surface : #1a1a1a ; --text : #ffffff ; /* etc */ } NEVER rely on just :root or @media (prefers-color-scheme) — evaluation system checks for class-based themes. 4. Semantic HTML: <main id="main-content"> element, MANDATORY: Multiple <section> elements for major content blocks (header, metrics, charts, etc.), skip-to-content link. Each distinct content area must be wrapped in semantic <section> tags. 5. Chart.js Requirements (EVALUATION CRITICAL): MUST include <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script> before closing </head> . MANDATORY: IMMEDIATELY after Chart.js script, add <script>Chart.defaults.animation = false;</script> (prevents animation glitches and is automatically checked by evaluation system). MANDATORY CHART VALIDATION: Every chart function MUST start with if (typeof Chart === 'undefined') { console.error('Chart.js not loaded'); return; } . CHART ACCESSIBILITY: Every canvas element MUST have role="img" and descriptive aria-label attributes. CRITICAL CHART CONFIG: Set maintainAspectRatio: false , responsive: true , and plugins: { tooltip: { enabled: true } } for accessibility. NEVER disable tooltips - evaluation system checks for enabled tooltips. CHART RELIABILITY SYSTEM: Use dedicated ChartManager pattern for bulletproof integration: var ChartManager = { charts : new Map (), safeInit : function ( canvasId, config ) { if ( typeof Chart === 'undefined' ) { console . error ( 'Chart.js library not loaded - check CDN inclusion' ); return null ; } try { if ( this . charts . has (canvasId)) { this . charts . get (canvasId). destroy (); this . charts . delete (canvasId); } var ctx = document . getElementById (canvasId); if (!ctx) { console . error ( 'Canvas element not found: ' + canvasId); return null ; } // Ensure no conflicting chart instances if (ctx. chart ) { ctx. chart . destroy (); delete ctx. chart ; } // Set accessibility attributes ctx. setAttribute ( 'role' , 'img' ); if (!ctx. getAttribute ( 'aria-label' )) { ctx. setAttribute ( 'aria-label' , 'Chart visualization' ); } // Initialize with enhanced error handling var chart = new Chart (ctx, config); this . charts . set (canvasId, chart); return chart; } catch (error) { console . error ( 'Chart initialization failed for ' + canvasId + ':' , error); return null ; } }, updateTheme : function ( ) { if ( typeof Chart === 'undefined' ) return ; this . charts . forEach ( function ( chart, canvasId ) { try { chart. update (); } catch (error) { console . error ( 'Chart theme update failed for ' + canvasId + ':' , error); } }); }, destroyAll : function ( ) { this . charts . forEach ( function ( chart ) { try { chart. destroy (); } catch (error) { console . error ( 'Chart destruction failed:' , error); } }); this . charts . clear (); } }; Use ChartManager.safeInit() instead of raw new Chart() . CRITICAL CHART CONFIG: Set maintainAspectRatio: false , responsive: true , and plugins: { tooltip: { enabled: true } } for accessibility. CHART CONTAINER DIMENSIONS: Container must have explicit height >= 300px for charts to render properly. Use theme-aware colors with CSS custom properties, never static hex colors. NEVER use import/export syntax with Chart.js CDN — use standard var declarations only. CHART.JS TROUBLESHOOTING (CRITICAL): If charts appear as blank white spaces: Verify Chart.js CDN is included before </head> Verify Chart.defaults.animation = false; is immediately after CDN Verify chart initialization is in DOMContentLoaded event listener Verify no module import/export syntax anywhere in the file Verify ChartManager.safeInit() pattern is used correctly Verify canvas has role="img" and aria-label attributes Responsive Design: Section spacing ≥48px, CRITICAL: NO horizontal overflow at 375px viewport (MANDATORY: add @media (max-width: 375px) { body { overflow-x: hidden; } } to prevent horizontal scroll), MANDATORY FONT-SIZE HIERARCHY: h1 ≥ 2.5rem, h2 ≥ 2rem, h3 ≥ 1.5rem, body = 1rem. SLIDE DECK REQUIREMENTS: Title slide h1 ≥ 3rem, content slide titles ≥ 2.5rem, clear visual distinction between heading levels. SLIDE SECTION SPACING: Major sections within slides must have ≥48px spacing (title-to-content, content-to-charts, charts-to-navigation). Test all layouts at 375px width — dashboards especially prone to chart container overflow. CSS CONTAINER QUERIES: For advanced responsiveness, use container-based queries: .chart-container { container-type : inline-size; } @container ( max-width : 400px ) { .chart-legend { display : none; } .chart-title { font-size : 1rem ; } } This provides true component-level responsiveness beyond viewport media queries. 7. Print & Accessibility: @media print styles, @media (prefers-reduced-motion: reduce) with disabled animations 8. Entrance Animations (MANDATORY): Must include entrance animations via .animate classes, data-reveal attributes, or CSS @keyframes . EVALUATION CRITICAL: Animation presence is automatically detected and required. 9. JavaScript Functions: cycleTheme() , toggleMenu() , top-level variables use var not let / const 🔥 CRITICAL: Copy skeleton.md exactly → Replace "YOUR CONTENT HERE" with visualization content → Save file Core Principles Single-file HTML — one .html file with inline CSS/JS. Opens in any browser, works offline, emails easily. Light theme optimized — modern designs prioritize light mode quality. Dark theme available via toggle. Beautiful by default — the first output should look professional with zero iteration. Content-first — the visualization serves the message. Never sacrifice clarity for aesthetics. Responsive — works on desktop, tablet, and mobile unless explicitly fixed-dimension (e.g., 16:9 slides). Visual restraint — Professional designs avoid decorative elements that add noise. No floating gradient orbs, rainbow borders, or ornamental animations. Philosophy HTML is not a "website" — it's a visualization tool. Code is cheap. Everyone should feel empowered to visualize anything. This skill turns conversation context, URLs, articles, data, or raw ideas into something visual and digestible in seconds. Users invoke this mid-conversation with Claude Code. Use the full conversation context — whatever they've been discussing, any links they've shared, any data they've pasted — as source material. When given a URL, crawl it and extract the content to visualize. Output Rules MANDATORY FIRST STEP: Copy the complete skeleton from references/skeleton.md — this includes all required elements (menu, theme system, CSS properties, semantic HTML, accessibility features). Never write HTML from scratch. Write ONE .html file to ~/Downloads/ (or user-specified path) Filename: descriptive kebab-case, e.g., q4-revenue-dashboard.html , team-roadmap-deck.html Start with skeleton.md template, add your content to the <!-- YOUR CONTENT HERE --> section All custom styles in <style> after the skeleton's base styles CDN libraries are encouraged — use the best tool for the job: Tailwind CSS — https://cdn.tailwindcss.com (utility-first styling, use freely) Chart.js — https://cdn.jsdelivr.net/npm/chart.js (bar, line, pie, radar, doughnut) D3.js — https://cdn.jsdelivr.net/npm/d3@7 (complex/custom data viz, force graphs) Mermaid — https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js (flowcharts, sequence diagrams) Three.js — 3D when appropriate Reveal.js — full-featured slide engine when needed. CRITICAL: Must set html, body { height: 100%; overflow: hidden; } and give the .reveal container height: 100% . Config MUST use numeric dimensions: Reveal.initialize({ width: 1280, height: 720, center: true, controls: false }) — NEVER use string percentages like '100%' which cause zero-height viewport and blank slides. MANDATORY: Disable Reveal.js default controls ( controls: false ) — the default < > arrow overlays are ugly. Instead, add a custom minimal bottom nav bar: < nav class = "slide-nav" aria-label = "Slide navigation" > < button onclick = "prevSlide()" aria-label = "Previous slide" > < svg width = "16" height = "16" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" > < path d = "M15 18l-6-6 6-6" /> </ svg > </ button > < span class = "slide-counter" id = "slideCounter" > 1 / 8 </ span > < button onclick = "nextSlide()" aria-label = "Next slide" > < svg width = "16" height = "16" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" > < path d = "M9 18l6-6-6-6" /> </ svg > </ button > </ nav > .slide-nav { position : fixed; bottom : 16px ; left : 50% ; transform : translateX (- 50% ); display : flex; align-items : center; gap : 8px ; z-index : 9998 ; } .slide-nav button { width : 28px ; height : 28px ; border-radius : 6px ; background : transparent; border : none; color : var (--text-secondary); cursor : pointer; display : flex; align-items : center; justify-content : center; opacity : 0.3 ; transition : opacity 0.2s ; } .slide-nav button :hover { opacity : 0.7 ; } .slide-counter { font-size : 12px ; color : var (--text-secondary); font-weight : 400 ; min-width : 40px ; text-align : center; opacity : 0.35 ; } Leaflet — maps and geospatial data ( https://unpkg.com/leaflet@1.9/dist/leaflet.js + CSS). Required for geographic data — never hand-draw SVG continent shapes. Use OpenStreetMap tiles or a minimal tile provider. SVG for icons and simple graphics — never use external image URLs unless user provides them Prefer CSS animations over JS when possible See references/libraries.md for detailed CDN links, patterns, and tips. Design System Apply these defaults. They are opinionated and tested — override only when user requests it. Full design system reference: See references/design-system.md for complete typography, color, spacing, animation, accessibility, and visual polish specifications. Key highlights (consult reference for full details): Design Notes Theming System (CRITICAL): Use class-based theming ONLY — <html class="theme-dark"> or <html class="theme-light"> Theme toggle changes html class: document.documentElement.className = 'theme-' + newTheme Never use data-theme attributes — the evaluation system expects class-based themes Required CSS custom properties: --bg, --surface, --text, --accent, --border (minimum set for evaluation compatibility) Typography: Inter font mandatory — https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap MANDATORY font weight hierarchy: h1 ≥ 700, h2 ≥ 600, h3 ≥ 500, body = 400 (critical evaluation requirement) -0.03em tracking on headings