Help us improve
Share bugs, ideas, or general feedback.
From data
Build an interactive HTML dashboard with charts, filters, and tables
npx claudepluginhub lohasle/knowledge-work-plugins --plugin dataHow this command is triggered — by the user, by Claude, or both
Slash command
/data:build-dashboard <description> [data source]Files this command reads when invoked
The summary Claude sees in its command listing — used to decide when to auto-load this command
# /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 ## 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 numbe...
/dashboard-layoutGenerates production-ready HTML/CSS dashboards with sidebar navigation, KPI cards, chart areas, data tables, and filters. Supports analytics, operational, executive, admin, and monitoring layouts with dark mode.
/ux-dashboardGenerates a data-dense dashboard with bento grids, monospace tabular metrics, sparkline patterns, and semantic state colors. Runs a discovery protocol to capture data shape, audience, and stack before producing the layout.
/analyticsAnalyzes data to extract insights, generate visualizations, or perform analytics based on a question and optional approach like SQL or visualization.
/panel-dashboardsGenerates interactive dashboard and web app code using Panel and Param from a natural language description. Includes Parameterized classes, widgets, callbacks, responsive layout, and run instructions.
/visual-reportGenerates an interactive HTML dashboard with Chart.js charts, metric cards, and accessible text summaries from audit findings or provided data.
Share bugs, ideas, or general feedback.
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.
/build-dashboard <description of dashboard> [data source]
Determine:
If data warehouse is connected:
If data is pasted or uploaded:
If working from a description without data:
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:
Generate a single self-contained HTML file that includes:
Structure (HTML):
Styling (CSS):
Interactivity (JavaScript):
Data (embedded JSON):
Use Chart.js for all charts. Common dashboard chart patterns:
Filters:
// All filters update a central filter state
// Charts and tables re-render when filters change
function applyFilters() {
const filtered = data.filter(row => matchesFilters(row));
updateKPIs(filtered);
updateCharts(filtered);
updateTable(filtered);
}
Table sorting:
Tooltips:
sales_dashboard.html)The generated HTML file follows this structure:
<!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>
<style>
/* Professional dashboard CSS */
</style>
</head>
<body>
<div class="dashboard">
<header><!-- Title and filters --></header>
<section class="kpis"><!-- KPI cards --></section>
<section class="charts"><!-- Chart containers --></section>
<section class="details"><!-- Data table --></section>
</div>
<script>
const DATA = [/* embedded JSON data */];
// Dashboard initialization and interactivity
</script>
</body>
</html>
/build-dashboard Monthly sales dashboard with revenue trend, top products, and regional breakdown. Data is in the orders table.
/build-dashboard Here's our support ticket data [pastes CSV]. Build a dashboard showing volume by priority, response time trends, and resolution rates.
/build-dashboard Create a template executive dashboard for a SaaS company showing MRR, churn, new customers, and NPS. Use sample data.