What problem does it solve? Plain text and markdown often fail to communicate diagrams, data comparisons, timelines, and interactive layouts clearly. This Skill creates polished, self-contained HTML pages that convey complex information visually instead of through dense paragraphs. ## Core Features & Use Cases - Chart-First Visualization: Renders flowcharts, architecture diagrams, bar/line/pie charts, and timelines using inline SVG, CSS, Mermaid, or Chart.js matched to the data shape. - Design System Rules: Enforces curated typography (Outfit, DM Serif Display, JetBrains Mono), restrained color palettes, and layout patterns across three page modes: Data UI, Report, and Terminal. - Self-Contained Delivery: Produces a single local HTML file with inlined CSS/JS, responsive layout, and no broken references, delivered directly to the user. - Use Case: When asked to compare database options, the Skill generates a report-style page with bench-bar comparison charts and a decision timeline rather than a wall of markdown text. ## Quick Start Create a visual HTML page comparing the performance benchmarks of these three frameworks with charts and a summary table.
