web-artifacts-builder-1-interactive-dashboard
Sub-skill of web-artifacts-builder: 1. Interactive Dashboard (+1).
Best use case
web-artifacts-builder-1-interactive-dashboard is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Sub-skill of web-artifacts-builder: 1. Interactive Dashboard (+1).
Teams using web-artifacts-builder-1-interactive-dashboard 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/1-interactive-dashboard/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How web-artifacts-builder-1-interactive-dashboard Compares
| Feature / Agent | web-artifacts-builder-1-interactive-dashboard | 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?
Sub-skill of web-artifacts-builder: 1. Interactive Dashboard (+1).
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
# 1. Interactive Dashboard (+1)
## 1. Interactive Dashboard
```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>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
*See sub-skills for full details.*
## 2. Interactive Calculator/Tool
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator Tool</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
*See sub-skills for full details.*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.
interactive-dashboard-builder
Create self-contained HTML/JavaScript dashboards with Chart.js, filters, and professional styling
repo-cleanup-1-build-artifacts
Sub-skill of repo-cleanup: 1. Build Artifacts (+5).
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.