build-dashboard

Name: build-dashboard
Author: anthropics

6.6kinstalls2.7kforks

How to install build-dashboard?

anthropics/knowledge-work-plugins/build-dashboard

$npx -y skills add anthropics/knowledge-work-plugins --skill build-dashboard

Installs into the current project.

Summary

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-

Files · 1

View on GitHub

SKILL.md

1	# /build-dashboard - Build Interactive Dashboards
2
3	> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).
4
5	Build a self-contained interactive HTML dashboard with charts, filters, tables, and professional styling. Opens directly in a browser -- no server or dependencies required.
6
7	## Usage
8
9	```
10	/build-dashboard <description of dashboard> [data source]
11	```
12
13	## Workflow
14
15	### 1. Understand the Dashboard Requirements
16
17	Determine:
18
19	- Purpose: Executive overview, operational monitoring, deep-dive analysis, team reporting
20	- Audience: Who will use this dashboard?
21	- Key metrics: What numbers matter most?
22	- Dimensions: What should users be able to filter or slice by?
23	- Data source: Live query, pasted data, CSV file, or sample data
24
25	### 2. Gather the Data
26
27	If data warehouse is connected:
28	1. Query the necessary data
29	2. Embed the results as JSON within the HTML file
30
31	If data is pasted or uploaded:
32	1. Parse and clean the data
33	2. Embed as JSON in the dashboard
34
35	If working from a description without data:
36	1. Create a realistic sample dataset matching the described schema
37	2. Note in the dashboard that it uses sample data
38	3. Provide instructions for swapping in real data
39
40	### 3. Design the Dashboard Layout
41
42	Follow a standard dashboard layout pattern:
43
44	```
45	┌──────────────────────────────────────────────────┐
46	│ Dashboard Title [Filters ▼] │
47	├────────────┬────────────┬────────────┬───────────┤
48	│ KPI Card │ KPI Card │ KPI Card │ KPI Card │
49	├────────────┴────────────┼────────────┴───────────┤
50	│ │ │
51	│ Primary Chart │ Secondary Chart │
52	│ (largest area) │ │
53	│ │ │
54	├─────────────────────────┴────────────────────────┤
55	│ │
56	│ Detail Table (sortable, scrollable) │
57	│ │
58	└──────────────────────────────────────────────────┘
59	```
60
61	Adapt the layout to the content:
62	- 2-4 KPI cards at the top for headline numbers
63	- 1-3 charts in the middle section for trends and breakdowns
64	- Optional detail table at the bottom for drill-down data
65	- Filters in the header or sidebar depending on complexity
66
67	### 4. Build the HTML Dashboard
68
69	Generate a single self-contained HTML file using the base template below. The file includes:
70
71	Structure (HTML):
72	- Semantic HTML5 layout
73	- Responsive grid using CSS Grid or Flexbox
74	- Filter controls (dropdowns, date pickers, toggles)
75	- KPI cards with values and labels
76	- Chart containers
77	- Data table with sortable headers
78
79	Styling (CSS):
80	- Professional color scheme (clean whites, grays, with accent colors for data)
81	- Card-based layout with subtle shadows
82	- Consistent typography (system fonts for fast loading)
83	- Responsive design that works on different screen sizes
84	- Print-friendly styles
85
86	Interactivity (JavaScript):
87	- Chart.js for interactive charts (included via CDN)
88	- Filter dropdowns that update all charts and tables simultaneously
89	- Sortable table columns
90	- Hover tooltips on charts
91	- Number formatting (commas, currency, percentages)
92
93	Data (embedded JSON):
94	- All data embedded directly in the HTML as JavaScript variables
95	- No external data fetches required
96	- Dashboard works completely offline
97
98	### 5. Implement Chart Types
99
100	Use Chart.js for all charts. Common dashboard chart patterns:
101
102	- Line chart: Time series trends
103	- Bar chart: Category comparisons
104	- Doughnut chart: Composition (when <6 categories)
105	- Stacked bar: Composition over time
106	- Mixed (bar + line): Volume with rate overlay
107
108	Use the Chart.js integration patterns below for each chart type.
109
110	### 6. Add Interactivity
111
112	Use the filter and interactivity implementation patterns below for dropdown filters, date range filters, combined filter logic, sortable tables, and chart updates.
113
114	### 7. Save and Open
115
116	1. Save the dashboard as an HTML file with a descriptive name (e.g., `sales_dashboard.html`)
117	2. Open it in the user's default browser
118	3. Confirm it renders correctly
119	4. Provide instructions for updating data or customizing
120
121	---
122
123	## Base Template
124
125	Every dashboard follows this structure:
126
127	```html
128	<!DOCTYPE html>
129	<html lang="en">
130	<head>
131	<meta charset="UTF-8">
132	<meta name="viewport" content="width=device-width, initial-scale=1.0">
133	<title>Dashboard Title</title>
134	<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1" integrity="sha384-jb8JQMbMoBUzgWatfe6COACi2ljcDdZQ2OxczGA3bG

People who liked this also viewed

6 picks

Type

build-dashboard

6.6kinstalls2.7kforks

View on GitHub

How to install build-dashboard?

anthropics/knowledge-work-plugins/build-dashboard

$npx -y skills add anthropics/knowledge-work-plugins --skill build-dashboard

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# /build-dashboard - Build Interactive Dashboards
2
3	> If you see unfamiliar placeholders or need to check which tools are connected, see [CONNECTORS.md](../../CONNECTORS.md).
4
5	Build a self-contained interactive HTML dashboard with charts, filters, tables, and professional styling. Opens directly in a browser -- no server or dependencies required.
6
7	## Usage
8
9	```
10	/build-dashboard <description of dashboard> [data source]
11	```
12
13	## Workflow
14
15	### 1. Understand the Dashboard Requirements
16
17	Determine:
18
19	- Purpose: Executive overview, operational monitoring, deep-dive analysis, team reporting
20	- Audience: Who will use this dashboard?
21	- Key metrics: What numbers matter most?
22	- Dimensions: What should users be able to filter or slice by?
23	- Data source: Live query, pasted data, CSV file, or sample data
24
25	### 2. Gather the Data
26
27	If data warehouse is connected:
28	1. Query the necessary data
29	2. Embed the results as JSON within the HTML file
30
31	If data is pasted or uploaded:
32	1. Parse and clean the data
33	2. Embed as JSON in the dashboard
34
35	If working from a description without data:
36	1. Create a realistic sample dataset matching the described schema
37	2. Note in the dashboard that it uses sample data
38	3. Provide instructions for swapping in real data
39
40	### 3. Design the Dashboard Layout
41
42	Follow a standard dashboard layout pattern:
43
44	```
45	┌──────────────────────────────────────────────────┐
46	│ Dashboard Title [Filters ▼] │
47	├────────────┬────────────┬────────────┬───────────┤
48	│ KPI Card │ KPI Card │ KPI Card │ KPI Card │
49	├────────────┴────────────┼────────────┴───────────┤
50	│ │ │
51	│ Primary Chart │ Secondary Chart │
52	│ (largest area) │ │
53	│ │ │
54	├─────────────────────────┴────────────────────────┤
55	│ │
56	│ Detail Table (sortable, scrollable) │
57	│ │
58	└──────────────────────────────────────────────────┘
59	```
60
61	Adapt the layout to the content:
62	- 2-4 KPI cards at the top for headline numbers
63	- 1-3 charts in the middle section for trends and breakdowns
64	- Optional detail table at the bottom for drill-down data
65	- Filters in the header or sidebar depending on complexity
66
67	### 4. Build the HTML Dashboard
68
69	Generate a single self-contained HTML file using the base template below. The file includes:
70
71	Structure (HTML):
72	- Semantic HTML5 layout
73	- Responsive grid using CSS Grid or Flexbox
74	- Filter controls (dropdowns, date pickers, toggles)
75	- KPI cards with values and labels
76	- Chart containers
77	- Data table with sortable headers
78
79	Styling (CSS):
80	- Professional color scheme (clean whites, grays, with accent colors for data)
81	- Card-based layout with subtle shadows
82	- Consistent typography (system fonts for fast loading)
83	- Responsive design that works on different screen sizes
84	- Print-friendly styles
85
86	Interactivity (JavaScript):
87	- Chart.js for interactive charts (included via CDN)
88	- Filter dropdowns that update all charts and tables simultaneously
89	- Sortable table columns
90	- Hover tooltips on charts
91	- Number formatting (commas, currency, percentages)
92
93	Data (embedded JSON):
94	- All data embedded directly in the HTML as JavaScript variables
95	- No external data fetches required
96	- Dashboard works completely offline
97
98	### 5. Implement Chart Types
99
100	Use Chart.js for all charts. Common dashboard chart patterns:
101
102	- Line chart: Time series trends
103	- Bar chart: Category comparisons
104	- Doughnut chart: Composition (when <6 categories)
105	- Stacked bar: Composition over time
106	- Mixed (bar + line): Volume with rate overlay
107
108	Use the Chart.js integration patterns below for each chart type.
109
110	### 6. Add Interactivity
111
112	Use the filter and interactivity implementation patterns below for dropdown filters, date range filters, combined filter logic, sortable tables, and chart updates.
113
114	### 7. Save and Open
115
116	1. Save the dashboard as an HTML file with a descriptive name (e.g., `sales_dashboard.html`)
117	2. Open it in the user's default browser
118	3. Confirm it renders correctly
119	4. Provide instructions for updating data or customizing
120
121	---
122
123	## Base Template
124
125	Every dashboard follows this structure:
126
127	```html
128	<!DOCTYPE html>
129	<html lang="en">
130	<head>
131	<meta charset="UTF-8">
132	<meta name="viewport" content="width=device-width, initial-scale=1.0">
133	<title>Dashboard Title</title>
134	<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1" integrity="sha384-jb8JQMbMoBUzgWatfe6COACi2ljcDdZQ2OxczGA3bG

People who liked this also viewed

6 picks

Type