Data Report
Turn weekly KPIs or exported CSV/Excel/JSON into a desktop-length HTML report with cards, charts, and tables without building a BI stack first.
Overview
data-report is an agent skill most often used in Validate (also Build frontend, Grow analytics) that turns CSV, Excel, or JSON into a polished KPI-and-chart HTML visualization report.
Install
npx skills add https://github.com/nexu-io/open-design --skill data-reportWhat is this skill?
- Accepts CSV, Excel, or JSON and renders a desktop long-page visual report with real data—no lorem ipsum
- KPI card grid: 3–5 top metrics with value, YoY delta, and inline sparkline-style mini trends
- Main chart area: at least two chart types (bar, line, pie, scatter) via Chart.js or ECharts from jsDelivr CDN
- Header block: report title, date range, and data-source attribution
- Chart containers use fixed-height wrapper divs around canvas for stable layout during agent edits
- KPI card grid targets 3–5 headline metrics per report
- Main chart area requires at least 2 charts (bar, line, pie, or scatter)
- Example fixture references 9 months of growth data in sample weekly report flow
Adoption & trust: 744 installs on skills.sh; 61.4k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have raw spreadsheet or API export data but no quick way to show KPIs and charts in a shareable page without standing up a full analytics product.
Who is it for?
Founders validating metric narratives, indie SaaS weekly reviews, or finance-style desktop reports from static exports.
Skip if: Production BI with live query APIs, mobile-first ASO screenshots, or datasets that cannot be inlined or parsed client-side in HTML.
When should I use this skill?
You have CSV, Excel, or JSON and want a polished desktop HTML report with KPI cards and Chart.js or ECharts—matching the Data Visualization Report template prompt.
What do I get? / Deliverables
You get a single HTML report with header metadata, 3–5 KPI cards, two or more charts, and tables parsed from your real dataset.
- Single-page HTML visual report with header, KPI grid, charts, and tables
- Chart.js or ECharts configuration wired to parsed user data
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Open Design marks this template as prototype-mode finance reporting—ideal shelf when you are proving a metric story before investing in a production dashboard. The skill outputs a single polished HTML report page (KPI grid + Chart.js/ECharts), which matches validate/prototype artifacts investors and stakeholders click through.
Where it fits
Render nine months of growth CSV into KPI cards and dual charts for a pre-build investor readout.
Use the template layout as the visual spec while hardening a customer-facing analytics page.
Regenerate a weekly HTML memo from exported product metrics without opening a separate BI workspace.
Publish a static metrics story page alongside a launch post when live dashboards are not ready.
How it compares
HTML template generator for static/reporting prototypes—not a database connector or MCP analytics server.
Common Questions / FAQ
Who is data-report for?
Solo builders and small teams who need a beautiful metrics page from CSV/Excel/JSON without building a custom React dashboard first.
When should I use data-report?
In Validate to prototype investor or stakeholder reports; in Build when drafting frontend report UIs; in Grow when packaging weekly KPI summaries from exports.
Is data-report safe to install?
Treat uploaded business data as sensitive; review the Security Audits panel on this Prism page and avoid sending confidential exports to untrusted agent hosts.
SKILL.md
READMESKILL.md - Data Report
【模板: 数据可视化报告】 - 头部: 报告标题 + 时间区间 + 数据来源说明。 - KPI 卡片网格: 3-5 个最重要指标, 每个卡片显示数值 + 同比变化 + 微型趋势线。 - 主图表区: 至少 2 个图表 (柱状 / 折线 / 饼 / 散点), 使用 Chart.js 或 ECharts (jsdelivr CDN 引入), 数据从用户输入解析得到。 - **图表容器必须有固定高度**: 每个 `<canvas>` 外层包一个 `<div style="position:relative;height:NNNpx">` (KPI 迷你图 ~40px, 主图表 ~240–280px)。Chart.js 用 `responsive:true, maintainAspectRatio:false` 时若父容器没有显式高度, 会陷入 ResizeObserver 死循环, 图表无限增高直至卡死浏览器。**绝对不要**直接给 canvas 写 `height=` 属性当布局, 那个只是初始值。 - 数据表格: 用户原始数据节选, 使用 `<table>` + 现代化样式 (zebra stripe, hover, sticky header)。 - 洞察块: 3-5 条文字洞察, 用 emoji 开头, 像产品周报。 - 底部"方法论"折叠区。 - 配色克制专业: 主色 1 + 中性色阶, 图表用调色板。 - **必须解析用户提供的实际数据**, 不要捏造。