skill

Build Dashboard

Build an interactive HTML dashboard with charts, filters, and tables. Use when 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.

Anthropic4.82,500+ installsVetted

About

# /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**: Composition (when <6 categories) - **Stacked bar**: Composition over time - **Mixed (bar + line)**: Volume with rate overlay

Use the Chart.js integration patterns below for each chart type.

### 6. Add Interactivity

Use the filter and interactivity implementation patterns below for dropdown filters, date range filters, combined filter logic, sortable tables, and chart updates.

### 7. Save and Open

1. Save the dashboard as an HTML file with a descriptive name (e.g., `sales_dashboard.html`) 2. Open it in the user's default browser 3. Confirm it renders correctly 4. Provide instructions for updating data or customizing

---

## Base Template

Every dashboard follows this structure:

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dashboard Title</title> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1" integrity="sha384-jb8JQMbMoBUzgWatfe6COACi2ljcDdZQ2OxczGA3bGNeWe+6DChMTBJemed7ZnvJ" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0" integrity="sha384-cVMg8E3QFwTvGCDuK+ET4PD341jF3W8nO1auiXfuZNQkzbUUiBGLsIQUE+b1mxws" crossorigin="anonymous"></script> <style> /* Dashboard styles go here */ </style> </head> <body> <div class="dashboard-container"> <hea

Install

Run this command

git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/data/skills/build-dashboard ~/.claude/skills/

Works with

claude appclaude codeclaude apicursorcodexwindsurfclinezed

Manual steps

Clone the repository and copy the `data/skills/build-dashboard` folder into your Claude skills directory. Compatible with Claude Code, Cursor, Codex, and any Agent Skills-compatible agent.

View source
License: Apache-2.0By Anthropic

Related assets

More curated picks in Data & Analytics.

skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/bio-research/skills/nextflow-development ~/.claude/skills/
Nextflow Development
Run nf-core bioinformatics pipelines (rnaseq, sarek, atacseq) on sequencing data. Use when analyzing RNA-seq, WGS/WES, or ATAC-seq data—either local F…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/data/skills/data-context-extractor ~/.claude/skills/
Data Context Extractor
Generate or improve a company-specific data analysis skill by extracting tribal knowledge from analysts. BOOTSTRAP MODE - Triggers: "Create a data con…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/bio-research/skills/instrument-data-to-allotrope ~/.claude/skills/
Instrument Data To Allotrope
Convert laboratory instrument output files (PDF, CSV, Excel, TXT) to Allotrope Simple Model (ASM) JSON format or flattened 2D CSV. Use this skill when…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/data/skills/analyze ~/.claude/skills/
Analyze
Answer data questions -- from quick lookups to full analyses. Use when looking up a single metric, investigating what's driving a trend or drop, compa…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/bio-research/skills/start ~/.claude/skills/
Start
Set up your bio-research environment and explore available tools. Use when first getting oriented with the plugin, checking which literature, drug-dis…★ 4.8 · 2,500+
skillclaude_appclaude_codeclaude_api
git clone https://github.com/anthropics/knowledge-work-plugins && cp -r knowledge-work-plugins/data/skills/validate-data ~/.claude/skills/
Validate Data
QA an analysis before sharing -- methodology, accuracy, and bias checks. Use when reviewing an analysis before a stakeholder presentation, spot-checki…★ 4.8 · 2,500+

Audit before you install

Run any source through our checks - AI visibility, security, performance, and stack detection.

Automated Web Security Scan

security

PageSpeed Analyzer

performance

AI Content Quality Test

arabic content

AI Agent / MCP Server Tester

ai testing

Site Stack Detector

migration

AI SEO / AEO / GEO Audit

ai visibility

llms.txt Generator

ai visibility

Readability Score

arabic content

Schema / JSON-LD Builder

ai visibility

AI Cost Calculator

ai testing

Headline Analyzer

arabic content

More in Data & Analytics