interactive-dashboard-builder
Create self-contained HTML/JavaScript dashboards with Chart.js, filters, and professional styling
Best use case
interactive-dashboard-builder is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Create self-contained HTML/JavaScript dashboards with Chart.js, filters, and professional styling
Teams using interactive-dashboard-builder should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/interactive-dashboard-builder/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How interactive-dashboard-builder Compares
| Feature / Agent | interactive-dashboard-builder | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Create self-contained HTML/JavaScript dashboards with Chart.js, filters, and professional styling
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Interactive Dashboard Builder Skill
Patterns for creating self-contained HTML/JavaScript dashboards using Chart.js, with built-in filtering and professional styling.
## Core Architecture
Every dashboard follows this structure with sections for headers, KPI cards, charts, tables, and footers. The foundation uses a Dashboard class that manages data, filtering, and rendering.
## Key Components
### KPI Cards
Display metrics with formatted values and period-over-period changes. Format currency, percentages, and numbers with automatic scale adjustment (e.g., "$1.5M" for millions).
### Chart Types Supported
- **Line charts** for trends with multiple datasets
- **Bar charts** with automatic horizontal orientation for 8+ categories
- **Doughnut charts** for composition analysis
Charts use responsive containers and maintain interactivity through hover tooltips and legend controls. Customize tooltips and formatting per chart type.
### Filtering System
Implement dropdown selects, date range inputs, and combined filter logic that triggers real-time updates across all visualizations and tables simultaneously using an `applyFilters()` function.
### Data Tables
Sortable columns with clickable headers toggle ascending/descending order.
## Design System
Use CSS custom properties for consistent theming: dark headers, light cards, and a six-color palette for data visualization. Layout relies on CSS Grid for responsive multi-column arrangements that stack to single column on mobile.
## Performance Guidelines
| Dataset Size | Approach |
|---|---|
| <1,000 rows | Embed data directly in HTML |
| 1,000-10,000 rows | Pre-aggregate before embedding |
| >10,000 rows | Pre-aggregate server-side |
Chart.js performance limits:
- Line charts: <500 points per series
- Bar charts: <50 categories
- Scatter plots: <1,000 points
- Disable animations when multiple charts exist for better responsiveness
## Data Formatting Utilities
Provide utility functions for displaying values as currency, percentages, or abbreviated numbers:
```javascript
function formatValue(value, type) {
if (type === 'currency') {
if (Math.abs(value) >= 1e6) return `$${(value / 1e6).toFixed(1)}M`;
if (Math.abs(value) >= 1e3) return `$${(value / 1e3).toFixed(1)}K`;
return `$${value.toFixed(0)}`;
}
if (type === 'percent') return `${value.toFixed(1)}%`;
if (type === 'number') {
if (Math.abs(value) >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
if (Math.abs(value) >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
return value.toFixed(0);
}
return value;
}
```
## Dashboard Template 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"></script>
<style>
:root {
--primary: #1a1a2e;
--accent: #e94560;
--bg: #f5f5f5;
--card-bg: #ffffff;
--text: #333333;
--text-light: #666666;
}
/* Grid layout, card styles, responsive breakpoints */
</style>
</head>
<body>
<header><!-- Title, date range, filters --></header>
<section class="kpi-cards"><!-- KPI summary cards --></section>
<section class="charts"><!-- Chart containers --></section>
<section class="data-table"><!-- Sortable detail table --></section>
<footer><!-- Data source, last updated --></footer>
<script>
// Embedded data, Dashboard class, chart initialization, filter logic
</script>
</body>
</html>
```
Dashboards are fully self-contained HTML files that can be shared by sending the file, with no server required.Related Skills
interactive-report-generator
Generate interactive HTML reports with Plotly visualizations from data analysis results. Supports dashboards, charts, and professional styling.
well-production-dashboard
Create interactive well production dashboards with real-time monitoring, verification integration, economic metrics, and multi-format exports. Use for well performance analysis, field aggregation, production forecasting, and API-driven dashboards.
interactive-Codex-to-file-based-fallback
Switch from tmux/interactive Codex to file-based Codex -p execution when interactive runs fail with upstream errors or analysis-only stalls, then verify landing from git/GitHub state.
interactive-issue-execution-worktree-guardrails
Execute approved GitHub issues in isolated worktrees with interactive Codex/Codex runs, while containing agent drift and salvaging progress when provider/runtime problems occur.
mcp-builder
Guide for building high-quality Model Context Protocol (MCP) servers that allow LLMs to interact with external services. Use when creating new MCP integrations, tools, or servers for Codex or other AI systems.
rag-system-builder
Build Retrieval-Augmented Generation (RAG) Q&A systems with Codex or OpenAI. Use for creating AI assistants that answer questions from document collections, technical libraries, or knowledge bases.
knowledge-base-builder
Build searchable knowledge bases from document collections (PDFs, Word, text files). Use for creating technical libraries, standards repositories, research databases, or any large document collection requiring full-text search.
web-artifacts-builder-self-contained-architecture
Sub-skill of web-artifacts-builder: Self-Contained Architecture (+1).
web-artifacts-builder-file-naming
Sub-skill of web-artifacts-builder: File Naming (+2).
web-artifacts-builder-common-cdn-libraries
Sub-skill of web-artifacts-builder: Common CDN Libraries.
web-artifacts-builder-basic-template
Sub-skill of web-artifacts-builder: Basic Template.
web-artifacts-builder
Build self-contained interactive web applications as single HTML files. Use for creating demos, prototypes, interactive tools, and standalone web experiences that work without external servers.