matsonj/mviz

Overview

This skill, mviz, is a compact chart and report builder optimized for AI workflows. It converts minimal JSON or markdown specs into standalone HTML visualizations with a clean, high data-ink design and a 16-column grid layout for precise report composition.

How this skill works

Provide a short JSON spec, markdown dashboard, or folder of component files and mviz expands it into a fully styled HTML artifact using ECharts. The generator applies smart formatting, layout sizing (size=[cols,rows]), and the mdsinabox visual theme to produce print-ready dashboards with minimal chart junk.

When to use it

• Quickly generate a single chart from a compact JSON spec (echo '<json>' | npx mviz > chart.html).
• Build multi-component dashboards from markdown or a folder (npx mviz dashboard.md > dashboard.html).
• Produce consistent, print-ready reports with a 16-column grid for layout control.
• Convert columnar query results (columns/rows) into charts without manual JSON reconstruction.
• Create high-density KPI rows and side-by-side charts for executive summaries.

Best practices

• Use size=[cols,rows] to control layout; remember 16 columns total and ~32px per row unit.
• Place component code blocks with no blank lines to render them side-by-side on the same row.
• Prefer smart formats (auto, usd_auto) to get consistent axis and label formatting automatically.
• Increase row units for charts with many categories (10+ bars or rows) to avoid label compression.
• Use yMin/yMax only when you need to emphasize relative changes or provide headroom for labels.

Example use cases

• Generate a revenue dashboard with four KPIs in one row and two half-width charts beneath.
• Convert a database query (columns/rows) directly into a bar chart without transforming results.
• Create a PDF-friendly report with H1 page breaks suppressed in continuous mode unless explicitly added.
• Produce comparison visuals (dumbbell, delta) to highlight before/after performance and trends.
• Build mixed charts (combo) showing revenue bars and a growth-rate line with dual Y-axes.