data-report
nexu-io/open-design
Transform CSV, Excel, or JSON data into polished visual report pages with KPI cards and interactive charts.
What is data-report?
A template skill that converts tabular data into professional report pages featuring KPI metrics, Chart.js visualizations, data tables, and insights. Use it when you need to turn raw data into a presentation-ready dashboard or weekly report.
- Parse CSV, Excel, or JSON data and render it as visual reports
- Display KPI cards with metrics, comparisons, and mini trend lines
- Generate interactive charts (bar, line, pie, scatter) using Chart.js via CDN
- Present data in styled tables with zebra striping and sticky headers
- Include insight blocks with emoji-formatted observations
- Provide collapsible methodology section at the bottom
How to install data-report
npx skills add https://github.com/nexu-io/open-design --skill data-report- CSV, Excel, or JSON data file ready to import
- Chart.js library (loaded via CDN)
How to use data-report
- 1.Prepare your data in CSV, Excel, or JSON format with clear headers and values
- 2.Provide the data file and specify report title, time period, and data source
- 3.Identify 3-5 key metrics to display as KPI cards with comparison values
- 4.Select which data dimensions to visualize (choose 2+ chart types: bar, line, pie, scatter)
- 5.Review the generated report page and adjust colors or layout as needed
Use cases
- Convert weekly sales or performance data into executive dashboards
- Transform financial metrics into KPI-focused reports with trend visualization
- Generate product analytics reports with charts and data tables from CSV exports
- Create finance team reports showing 9-month growth trends with automatic rendering
- Build client-facing data reports from raw Excel or JSON datasets
- Finance and business analysts
- Product managers reviewing metrics
- Data analysts creating reports
- Teams generating weekly or monthly dashboards
data-report FAQ
CSV, Excel (.xlsx), and JSON formats are all supported. Data must have clear headers and numeric values for metrics and charts.
Yes, you can use bar, line, pie, or scatter charts. The template uses Chart.js via CDN, and you can specify which chart types to use for different data dimensions.
Chart containers must have explicit fixed heights (240–280px for main charts, ~40px for KPI mini trends) to prevent ResizeObserver loops that can freeze the browser. The template handles this automatically.
The template parses actual user data; missing or invalid values should be handled in your source data before import. The report will render with available data.
Yes, you can include 3-5 insight blocks with emoji prefixes and a collapsible methodology section explaining your report's approach.
Full instructions (SKILL.md)
Source of truth, from nexu-io/open-design.
name: data-report zh_name: "数据可视化报告" en_name: "Data Visualization Report" emoji: "📊" description: "Turns CSV, Excel, or JSON data into a polished visual report page." zh_description: "把 CSV/Excel/JSON 数据转成漂亮的可视化报告页" en_description: "Turns CSV, Excel, or JSON data into a polished visual report page." category: data scenario: finance aspect_hint: "桌面长页面" featured: 10 tags: ["data", "report", "chart", "数据", "报告"] example_id: sample-data-weekly-report example_name: "数据报告 · 周报" example_format: csv example_tagline: "KPI 卡 + Chart.js 图表 + 表格" example_desc: "9 个月增长数据自动渲染成可视化报告, 内联 Chart.js" od: mode: prototype surface: web platform: desktop scenario: finance upstream: "https://github.com/nexu-io/html-anything" preview: type: html entry: index.html reload: debounce-100 design_system: requires: false example_prompt: "Use the Data Visualization Report template to turn my CSV, Excel, or JSON data into a polished visual report page. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images." example_prompt_i18n: zh-CN: "用「数据可视化报告」模板把我的内容做成一份「把 CSV/Excel/JSON 数据转成漂亮的可视化报告页」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
【模板: 数据可视化报告】
- 头部: 报告标题 + 时间区间 + 数据来源说明。
- 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 + 中性色阶, 图表用调色板。
- 必须解析用户提供的实际数据, 不要捏造。
Related skills
More from nexu-io/open-design and the wider catalog.
deck-guizang-editorial
Editorial magazine meets e-ink: 10 layouts and 5 palettes (Ink, Indigo Porcelain, Forest Ink, Kraft Paper, Dune).
deck-open-slide-canvas
Locked 1920x1080 canvas deck with React component-level free composition, not bound to a fixed template.
deck-swiss-international
16-column grid, one saturated accent, and 22 locked layouts (Klein Blue, Lemon, Mint, Safety Orange).
design-brief
Parse design briefs into concrete specs using I-Lang protocol to eliminate ambiguity.
design-consultation
Build complete design systems from scratch with creative direction and product mockups for brand kickoffs.
design-md
Create and manage DESIGN.md files as a single source of truth for design direction, tokens, and visual rules.