Skip to content
Get packs

Data Visualization Report

Turns CSV, Excel, or JSON data into a styled single-page visual report with charts and tables.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
3 files

What it does

When installed, the agent takes data you provide (CSV, Excel, or JSON) and builds a single web page laid out like a polished report: a title and time range, a row of key metric cards with changes and mini trend lines, at least two charts, a sample of the raw data table, and a few short emoji-led insights. The skill's instructions tell the agent to use real values from your data rather than invented numbers, and to fix chart heights so the charts don't grow endlessly in a browser.

Great for

  • Analysts or managers who want a shareable HTML summary of a monthly or weekly dataset
  • Non-designers who need a clean-looking dashboard-style page without building it by hand
  • Anyone who wants a quick visual overview of a spreadsheet to present or email

Skip it if

  • Sensitive or confidential financial data sent to a third-party chart library, since the page may load Chart.js or ECharts from a public CDN when opened (privacy/confidentiality risk)
  • Production dashboards that need live data connections, refresh schedules, or access control; this produces a static page from pasted data

Try asking

  • “Turn this CSV of nine months of sales and churn into a visual weekly report page with KPI cards and charts”
  • “Build a visual report from my Excel export of marketing spend, including a data table and key insights”
  • “Convert this JSON analytics export into a polished one-page report with two or three charts”
Step-by-step guide: how to use Data Visualization ReportInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    data-report.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip data-report.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip data-report.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give clean, labelled data with a clear time range so the metric cards and trend lines are accurate
  • Check the generated numbers against your source file before sharing, since the output is only as reliable as the parsing
  • Remove or anonymise sensitive fields from the data before pasting it in, and review whether the chart library CDN is acceptable for your data

What's inside

  • example.html
  • open-design.json
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.