Build Dashboard
Turn query results or pasted metrics into a single shareable HTML file with KPI cards, charts, filters, and tables that opens in any browser.
Overview
Build-dashboard is an agent skill most often used in Build (also Grow analytics, Operate monitoring) that produces a self-contained interactive HTML dashboard with charts, filters, and embedded data.
Install
npx skills add https://github.com/anthropics/knowledge-work-plugins --skill build-dashboardWhat is this skill?
- Produces one self-contained HTML file with embedded JSON—no server or npm install required
- Supports executive KPI cards, multi-chart layouts, filterable tables, and operational monitoring views
- Workflow covers purpose, audience, metrics, dimensions, and data source (warehouse query, CSV, paste, or sample data)
- Optional connector path when a data warehouse is connected: query then embed results in the file
- Opens directly in a browser for team snapshots and shareable reports
- 4-step workflow: requirements, data gather, layout/charts, self-contained HTML output
Adoption & trust: 4.4k installs on skills.sh; 19.6k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have metrics in a warehouse, spreadsheet, or query output but no fast way to hand stakeholders a polished, filterable dashboard without deploying a BI stack.
Who is it for?
Indie builders and small teams who need a one-file executive or ops dashboard from SQL, CSV, or pasted results without standing up a server.
Skip if: Production apps that need real-time APIs, auth, or collaborative editing—use a proper analytics product or web app instead of a static HTML export.
When should I use this skill?
Creating an executive overview with KPI cards, turning query results into a shareable self-contained report, building a team monitoring snapshot, or needing multiple charts with filters in one browser-openable file.
What do I get? / Deliverables
You get a browser-openable HTML dashboard with KPI cards, charts, and tables driven by embedded JSON, ready to share or drop into docs and demos.
- Single interactive HTML dashboard file with embedded data
- Charts, filters, and tables styled for professional sharing
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the deliverable is a self-contained interactive front-end artifact; the same pattern is reused when packaging analytics for stakeholders later in the journey. Frontend subphase fits browser-openable HTML dashboards with embedded JSON data, styling, and client-side filters—not a live app server.
Where it fits
Embed warehouse query JSON into styled charts after shipping a feature dashboard mock.
Package weekly funnel and retention KPIs for a founder review without Metabase.
Ship a one-file ops snapshot with filters by region or service for on-call handoff.
Demo plausible sample-data KPI cards to test narrative before live metrics exist.
How it compares
Use for a portable HTML snapshot instead of wiring Chart.js into your Next.js app when the goal is shareable reporting, not a hosted product surface.
Common Questions / FAQ
Who is build-dashboard for?
Solo and indie builders shipping with coding agents who need KPI and monitoring views as a single HTML file for execs, teammates, or investors.
When should I use build-dashboard?
In Build when turning frontend-facing reports into polished UI; in Grow when packaging analytics for lifecycle reviews; in Operate when snapshotting team monitoring metrics—all without a backend.
Is build-dashboard safe to install?
Review the Security Audits panel on this Prism page and treat warehouse connectors and pasted data as sensitive before embedding secrets in HTML.
SKILL.md
READMESKILL.md - Build Dashboard
# /build-dashboard - Build Interactive Dashboards > If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md). Build a self-contained interactive HTML dashboard with charts, filters, tables, and professional styling. Opens directly in a browser -- no server or dependencies required. ## Usage ``` /build-dashboard <description of dashboard> [data source] ``` ## Workflow ### 1. Understand the Dashboard Requirements Determine: - **Purpose**: Executive overview, operational monitoring, deep-dive analysis, team reporting - **Audience**: Who will use this dashboard? - **Key metrics**: What numbers matter most? - **Dimensions**: What should users be able to filter or slice by? - **Data source**: Live query, pasted data, CSV file, or sample data ### 2. Gather the Data **If data warehouse is connected:** 1. Query the necessary data 2. Embed the results as JSON within the HTML file **If data is pasted or uploaded:** 1. Parse and clean the data 2. Embed as JSON in the dashboard **If working from a description without data:** 1. Create a realistic sample dataset matching the described schema 2. Note in the dashboard that it uses sample data 3. Provide instructions for swapping in real data ### 3. Design the Dashboard Layout Follow a standard dashboard layout pattern: ``` ┌──────────────────────────────────────────────────┐ │ Dashboard Title [Filters ▼] │ ├────────────┬────────────┬────────────┬───────────┤ │ KPI Card │ KPI Card │ KPI Card │ KPI Card │ ├────────────┴────────────┼────────────┴───────────┤ │ │ │ │ Primary Chart │ Secondary Chart │ │ (largest area) │ │ │ │ │ ├─────────────────────────┴────────────────────────┤ │ │ │ Detail Table (sortable, scrollable) │ │ │ └──────────────────────────────────────────────────┘ ``` **Adapt the layout to the content:** - 2-4 KPI cards at the top for headline numbers - 1-3 charts in the middle section for trends and breakdowns - Optional detail table at the bottom for drill-down data - Filters in the header or sidebar depending on complexity ### 4. Build the HTML Dashboard Generate a single self-contained HTML file using the base template below. The file includes: **Structure (HTML):** - Semantic HTML5 layout - Responsive grid using CSS Grid or Flexbox - Filter controls (dropdowns, date pickers, toggles) - KPI cards with values and labels - Chart containers - Data table with sortable headers **Styling (CSS):** - Professional color scheme (clean whites, grays, with accent colors for data) - Card-based layout with subtle shadows - Consistent typography (system fonts for fast loading) - Responsive design that works on different screen sizes - Print-friendly styles **Interactivity (JavaScript):** - Chart.js for interactive charts (included via CDN) - Filter dropdowns that update all charts and tables simultaneously - Sortable table columns - Hover tooltips on charts - Number formatting (commas, currency, percentages) **Data (embedded JSON):** - All data embedded directly in the HTML as JavaScript variables - No external data fetches required - Dashboard works completely offline ### 5. Implement Chart Types Use Chart.js for all charts. Common dashboard chart patterns: - **Line chart**: Time series trends - **Bar chart**: Category comparisons - **Doughnut chart**: