data-report

The data-report skill is a template that turns raw CSV, Excel, or JSON data into a polished, self-contained visual report page. It solves the common problem of transforming plain tabular exports into a shareable, professional-looking HTML report without manual charting work. The template defines a full page layout: a header with report title, time range, and data source note; a KPI card grid of the three to five most important metrics with values, period-over-period change, and mini trend lines; a main chart area; a styled data table; text insight blocks; and a collapsible methodology section at the bottom.

The workflow renders charts using Chart.js or ECharts loaded from a jsdelivr CDN, parsing data directly from the user's actual input rather than fabricating values. The SKILL.md includes practical engineering guidance, notably that each canvas must sit inside a wrapper div with an explicit fixed height to avoid a ResizeObserver feedback loop that would otherwise cause the chart to grow without bound and hang the browser. The bundled example demonstrates nine months of growth data rendered from a CSV into KPI cards, charts, and a table with narrative insights. The color guidance emphasizes a restrained, professional palette.

The target users are analysts, founders, and product teams who need to convert internal metrics into weekly reports or dashboards for finance and business scenarios. It fits desktop long-page output and is well suited to anyone wanting to produce a credible visual report quickly from data they already have, with the strict requirement that real user-supplied data is parsed and displayed rather than placeholder content.