mvizlisted
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