skills.rest
sun2443
sun2443COMMUNITY
Explore all skills by this author →
GitHub

build-dashboard

Build interactive HTML dashboards with Chart.js charts, filters, and sortable tables.

Updated Apr 8, 2026
Search Tags:#html#data visualization#dashboard#chart.js#kpi reporting#interactive filters#sortable tables
One-click install
npx skills add https://github.com/sun2443/designer-skills --skill build-dashboard-sun2443
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-dashboard
Source: https://github.com/sun2443/designer-skills/tree/main/data/skills/build-dashboard
Command: npx skills add https://github.com/sun2443/designer-skills --skill build-dashboard-sun2443

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It eliminates the time-consuming work of manually assembling charts, filters, and tables into a polished report by generating a single self-contained HTML dashboard you can open and share instantly.

Core Features & Use Cases

  • Interactive HTML dashboards: Creates browser-openable pages with professional styling, KPI cards, charts, filters, and tables in one file.
  • Chart-driven executive reporting: Turns query results or pasted datasets into trends and breakdown visuals using Chart.js.
  • Filterable drill-down views: Supports dropdown/date filtering that updates KPIs, charts, and sortable tables together.
  • Use Case: Convert sales pipeline data into an executive overview showing MRR or revenue trends, segment breakdowns, and a detailed sortable table for deeper inspection.

Quick Start

Use /build-dashboard to create a monthly executive dashboard for revenue and orders with filters for region and product, using a pasted CSV dataset as the data source.

Frequently Asked Questions about build-dashboard

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn CSV query data into an interactive HTML dashboard?▼

To turn CSV data into an interactive HTML dashboard, use this Skill to generate a self-contained, browser-openable file featuring KPI cards, Chart.js visuals, and sortable tables directly from your pasted dataset.

Can I create filterable charts and sortable tables in a single HTML file?▼

Yes, you can create filterable charts and sortable tables in a single HTML file. This Skill embeds Chart.js and client-side logic to ensure dropdown and date filters seamlessly update KPIs and visuals together.

What is the best way to build an executive KPI dashboard for revenue reporting?▼

The best way to build an executive KPI dashboard is generating a self-contained HTML report. It transforms sales pipeline data into MRR trends, segment breakdowns, and detailed sortable tables for deep inspection.

Does this dashboard generation method require external libraries or server connections?▼

No, this dashboard generation method requires no external libraries or server connections. It embeds chart-ready JSON data directly into the HTML, producing a standalone file you can open and share instantly offline.

How do interactive filters update dashboard visuals using Chart.js?▼

Interactive filters update dashboard visuals by using client-side logic to react to dropdown and date selections. This dynamically re-renders the embedded Chart.js visuals, KPI cards, and sortable tables simultaneously.

When should I avoid generating self-contained HTML dashboards for reporting?▼

You should avoid generating self-contained HTML dashboards when your dataset is too large to embed as chart-ready JSON directly within the HTML file, as this impacts browser performance and file load times.

Related Skills

Explore More Data & Analytics Skills→
Proxy2021Proxy2021
5

data_analyzer

Analyze CSV or JSON data to compute column statistics and generate chart-ready summaries.

Community
Intermediate
besoeasybesoeasy
128

static-assets-hosting

Publishes a zipped website to IPFS via the Sora protocol.

Community
Intermediate
shaprisshapris

answering-natural-language-questions-with-dbt

Generates and executes SQL to answer natural-language business questions using dbt semantic layer or compiled SQL.

Community
Advanced
cxnaivecxnaive

ascii-art

Generate ASCII art banners, decorative borders, and image-to-text conversions for terminal interfaces.

Community
Intermediate