mdv-markdown-visualization — Claude Code skill
This skill gets your agent writing .mdv files, a Markdown superset with charts, KPI cards and HTML or PDF export.
npx skills add reason-machines/trending-skills --skill mdv-markdown-visualization -a claude-codeWhat mdv-markdown-visualization does
MDV extends CommonMark into .mdv files. A document has three parts: YAML front matter for the title, theme and dataset paths, ordinary Markdown prose, and fenced blocks plus ::: containers for the visual layer. One file can be a report, a dashboard or a slide deck.
A stat block lays out a row of KPI cards from label, value and an optional delta column. The chart block takes a type (bar, line, area, pie, donut, scatter), a dataset name from the front matter or CSV written straight into the block body, axis columns, an optional series split and a value format such as currency. Containers do the layout work: toc builds a table of contents from headings, callout renders info, warning, danger or success boxes, columns puts two charts side by side. Themes are report, dashboard, slides and minimal.
Rendering runs through the CLI. render produces a self-contained HTML file, preview opens a browser and reloads on save, export --pdf writes a PDF. The documented commands call node packages/mdv-cli/dist/index.js, so the build has to be present locally. The skill installs into six platforms, and each keeps the skill file in its own directory.
What it helps with
- write a quarterly report with charts in one file
- show service metrics as cards with deltas
- export a document to PDF without hand-coding layout
- place two charts side by side in columns
- drop a warning box into a long document
Example prompts for the agent
- Create an
.mdvfile with thedashboardtheme and KPI cards fromdata/ops.csv - Add a
chart type=lineblock by month, split by region - Build a table of contents with
::: tocand export the document to PDF
How to install mdv-markdown-visualization
1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill mdv-markdown-visualization -a claude-code2Manually: put the files in place
~/.claude/skills/mdv-markdown-visualization/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/mdv-markdown-visualization/
1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill mdv-markdown-visualization -a codex2Manually: put the files in place
.agents/skills/mdv-markdown-visualization/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill mdv-markdown-visualization -a cursor2Manually: put the files in place
.cursor/skills/mdv-markdown-visualization/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills mdv-markdown-visualization2Manually: put the files in place
.github/skills/mdv-markdown-visualization/SKILL.md1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill mdv-markdown-visualization -a gemini-cli2Platform CLI
gemini skills install https://github.com/reason-machines/trending-skills --path skills/mdv-markdown-visualizationManually: put the files in place
.devin/skills/mdv-markdown-visualization/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill mdv-markdown-visualization -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about mdv-markdown-visualization
How do I install mdv-markdown-visualization in Claude Code?
Run npx skills add reason-machines/trending-skills --skill mdv-markdown-visualization -a claude-code. The skill lands in ~/.claude/skills/mdv-markdown-visualization/SKILL.md.
What does mdv-markdown-visualization do?
It teaches your agent to write MDV documents: charts, KPI cards, callouts and columns inside Markdown, exported to HTML or PDF.
Which chart types does MDV support?
bar, line, area, pie, donut and scatter. Data comes from a dataset declared in the YAML front matter or from CSV inside the block.