← ClaudeAtlas

mvizlisted

A chart & report builder designed for use by AI.
matsonj/mviz · ★ 216 · Web & Frontend · score 73
Install: claude install-skill matsonj/mviz
mviz v1.6.4 # mviz Generate clean, data-focused charts and dashboards from compact JSON specs or markdown. Maximizes data-ink ratio with minimal chartjunk, gridlines, and decorative elements. Uses a 16-column grid layout system. ## Setup No installation required. Use `npx -y -q mviz` which auto-downloads from npm. The `-q` flag reduces npm output while still showing lint errors. For faster repeated use, install globally: `npm install -g mviz` ## What This Skill Does Converts minimal JSON specifications into standalone HTML visualizations using ECharts. Instead of writing 50-100 lines of chart code, write a compact spec that gets expanded into a full HTML artifact with professional styling. ## Visual Style (mdsinabox theme) - **Font**: Helvetica Neue, Arial (clean sans-serif) - **Signature**: Orange accent line at top of dashboards - **Palette**: Blue primary, orange secondary, semantic colors (green=positive, amber=warning, red=error) - **Background**: Paper (`#f8f8f8` light) / Dark (`#231f20` dark) - **Principles**: High data-ink ratio, no chartjunk, minimal gridlines, data speaks for itself ## How to Use ### Single Chart (JSON) ```bash echo '<json_spec>' | npx -y -q mviz -o chart.html ``` ### Dashboard from Markdown ```bash npx -y -q mviz dashboard.md -o dashboard.html ``` ### Dashboard from Folder ```bash npx -y -q mviz my-dashboard/ -o dashboard.html ``` ## 16-Column Grid System Components are sized using `size=[cols,rows]` syntax: ````markdown ```big_v