skills.rest
nazlicancaglar
nazlicancaglarCOMMUNITY
Explore all skills by this author →
GitHub

dashboard-builder

Create interactive HTML/CSS/JS marketing dashboards with KPI cards and trend charts.

Updated Apr 13, 2026
Search Tags:#analytics#dashboard#reporting#charting#data-visualization#kpi#html-css-js
One-click install
npx skills add https://github.com/nazlicancaglar/nova-workflow --skill dashboard-builder-nazlicancaglar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dashboard-builder
Source: https://github.com/nazlicancaglar/nova-workflow/tree/main/skills/analytics-reporting/dashboard-builder
Command: npx skills add https://github.com/nazlicancaglar/nova-workflow --skill dashboard-builder-nazlicancaglar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the friction of designing and implementing marketing dashboards so stakeholders can see real-time KPIs, trends, and channel performance at a glance.

Core Features & Use Cases

  • KPI hero cards: large, prominent metrics for revenue, leads, CAC, ROAS with change indicators and targets.
  • Trend charts: time series line and bar charts to surface performance over date ranges.
  • Detail tables & filters: sortable, filterable tables for channel and campaign-level analysis.
  • Data integration: supports static pasted data or dynamic API/Google Sheets/Airtable connections and works with Chart.js, D3.js, or ApexCharts.
  • Use Case: Build an executive dashboard showing revenue, lead volume, CPA, and ROAS with a trend view and channel breakdown for monthly reporting.

Quick Start

Use the dashboard-builder skill to create a responsive HTML/CSS/JS marketing dashboard that displays hero KPIs, trend charts, and a channel performance table using data from Google Sheets.

Frequently Asked Questions about dashboard-builder

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

FAQPage Schema
How do I build an interactive marketing dashboard with KPI cards and trend charts?▼

To build an interactive marketing dashboard, use HTML, CSS, and JavaScript to create responsive KPI hero cards, trend charts, and filterable tables for visualizing real-time campaign performance and metrics like ROAS and CAC.

Can I connect my marketing dashboard directly to Google Sheets or an API?▼

Yes, you can connect your marketing dashboard directly to Google Sheets, Airtable, or dynamic APIs to visualize real-time data, or you can use static pasted data for your campaign performance tables and trend charts.

Does this dashboard builder work with Chart.js, D3.js, or ApexCharts?▼

Yes, the dashboard builder supports optional integration with Chart.js, D3.js, or ApexCharts to render time series line and bar charts for visualizing marketing KPI trends over specific date ranges.

What is the best way to visualize campaign performance and ROAS for executive reporting?▼

The best way to visualize campaign performance for executive reporting is creating a dashboard with prominent KPI hero cards for revenue and ROAS, alongside trend views and channel breakdowns for monthly analysis.

Do I need external charting libraries to display sortable data tables and filters?▼

You do not need external charting libraries to display sortable and filterable detail tables, as standard HTML, CSS, and JavaScript are sufficient for channel and campaign-level analysis without D3.js or ApexCharts.

Related Skills

Explore More Data & Analytics Skills→
buildworksaibuildworksai

observability-stack

Collect Prometheus metrics, Grafana dashboards, and structured logs for EUCORA.

Community
Advanced
tassiovaletassiovale
13

pptx-posters

Create HTML/CSS research posters with AI-generated visuals and export to PDF or PowerPoint.

Community
Advanced
berba-qberba-q
6

faostat-viz

Generate interactive HTML charts from FAOSTAT data using Chart.js.

Community
Intermediate
GACLoveGACLove
2

interactive-dashboard-builder

Generate self-contained HTML dashboards with Chart.js charts and filters.

Community
Intermediate