Generate interactive dashboards, data visualizations, and web apps from natural-language prompts.
Design & media
dashboard-generator
Try itTransform JSON or CSV data into stunning interactive HTML dashboards with auto-detected charts, KPI cards, and dark glass-morphism design. Generates complete standalone HTML with Chart.js.
What it does
Transform JSON or CSV data into stunning interactive HTML dashboards with auto-detected charts, KPI cards, and dark glass-morphism design. Generates complete standalone HTML with Chart.js.
The skill document
Dashboard Generator
Overview
Turn any JSON or CSV data into a beautiful, interactive HTML dashboard in seconds. No frontend skills required — the script auto-detects data types and picks the best chart types for you.
When to Use
- You have data (API response, CSV export, metrics) and need a visual dashboard
- You want to share analytics without building a frontend
- Quick reporting: generate a dashboard from raw data for a meeting
- Monitoring: pipe API responses on a schedule to track metrics visually
Commands
# From JSON file
python scripts/dashboard_gen.py generate data.json --title "Sales Q3" --output dashboard.html
# From CSV file
python scripts/dashboard_gen.py csv sales.csv --title "Revenue" --output revenue.html
# From stdin (pipe API responses)
cat api_response.json | python scripts/dashboard_gen.py --title "Server Metrics"
# With custom palette
python scripts/dashboard_gen.py generate data.json --palette ocean --title "Analytics"
What It Generates
A standalone HTML file with:
- KPI cards — auto-computed min/max/avg/trend for numeric fields
- Charts — line for time series, bar for categories, donut for distributions
- Data table — sortable, with all raw data
- Dark glass-morphism design — looks like Linear/Vercel/Stripe dashboard
- Chart.js — fully interactive (hover, zoom, tooltips)
Palettes
aurora (default purple/teal), ocean (blues), sunset (warm), forest (greens), neon (cyberpunk)
Common Pitfalls
- Nested JSON not detected. Flatten nested objects first, or use
--flattenflag. - Date column not detected. Ensure dates are in ISO format (YYYY-MM-DD).
- Too many series. Limit to top 10 categories with
--top 10.
Verification Checklist
- HTML file opens in browser
- Charts render with data
- KPI cards show correct stats
- Data table is sortable
Related skills
Transform CSV data into stunning interactive chart visualizations with Chart.js
Convert a business question into a complete dashboard specification. Use when asked to design a dashboard, create a dashboard spec or brief, plan a BI report...
Chart Generator: Create many types of charts and graphs from data with built in styling and theme - including bar, line, pie, scatter, doughnut, radar. Use w...
Convert JSON data into clean Markdown tables and reports. Use for pasted JSON, API or log output, or any batch of JSON records.
Generate charts from natural language or tabular data, recommend chart types, and export ECharts-based HTML or SVG. Use when users ask for one-sentence chart...