Agent skill · design visual · anthropics
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.
Why this skill is useful
Provides a structured approach to building interactive dashboards with specific layout patterns and embedded data handling that the AI wouldn't reliably generate on its own.
What it needs
About 8k tokens when loaded. Last updated 2026-08-07. 23,345 stars on the source repository.
What this skill does
/build-dashboard - Build Interactive Dashboards If you see unfamiliar placeholders or need to check which tools are connected, see 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 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: 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills anthropics/build-dashboard