` element, **MANDATORY: Multiple `

` elements for major content blocks** (header, metrics, charts, etc.), skip-to-content link. Each distinct content area must be wrapped in semantic `

` tags. 5. **Chart.js Requirements (EVALUATION CRITICAL):** MUST include `` before closing ``. **MANDATORY:** IMMEDIATELY after Chart.js script, add `` (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: ```javascript 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 `` - 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 6. **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: ```css .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 1. **Single-file HTML** — one `.html` file with inline CSS/JS. Opens in any browser, works offline, emails easily. 2. **Light theme optimized** — modern designs prioritize light mode quality. Dark theme available via toggle. 3. **Beautiful by default** — the first output should look professional with zero iteration. 4. **Content-first** — the visualization serves the message. Never sacrifice clarity for aesthetics. 5. **Responsive** — works on desktop, tablet, and mobile unless explicitly fixed-dimension (e.g., 16:9 slides). 6. **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](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 `` section - All custom styles in `