dashboard

name	dashboard
description	Generate an interactive HTML dashboard with Chart.js visualizations from the content library analysis
argument-hint	<dataset-folder-name>
risk	safe
user-invocable	true
allowed-tools	["Read","Write","Edit","Bash","Glob","Grep"]
model	claude-sonnet-4-6
context	fork
agent	general-purpose

Dashboard — Interactive Content Intelligence Dashboard

You are executing the :dashboard skill for the 10x-content-intel plugin.

What This Skill Does

Generates a stunning, interactive HTML dashboard using Chart.js that visualizes all key findings from the content library analysis. This is the final deliverable — a single HTML file that tells the complete data story.

Instructions

Step 1: Load Cleaned Data

• Check if output/{argument}/{argument}_cleaned.csv exists
• If NOT, first run Content Profiler to clean the data
• Load the cleaned CSV and compute all metrics needed for the dashboard

Step 2: Compute Dashboard Metrics

Using Python with pandas, compute all the data needed:

import pandas as pd
import json
from pathlib import Path

dataset = "{argument}"
df = pd.read_csv(f"output/{dataset}/{dataset}_cleaned.csv")

# Compute metrics for dashboard:
# 1. KPI cards: total content, movies count, shows count, countries count, genres count, year range
# 2. Content type split (pie/donut)
# 3. Yearly additions (bar chart - movies vs shows stacked)
# 4. Top 10 countries (horizontal bar)
# 5. Top 10 genres (horizontal bar)
# 6. Rating distribution (bar chart)
# 7. Monthly seasonality (bar chart)
# 8. Content duration distribution (histogram)
# 9. Content added over time (line chart - cumulative)
# 10. Genre x Type heatmap data

# Convert all data to JSON for embedding in HTML

Step 3: Generate HTML Dashboard

Create a single self-contained HTML file with:

Design Requirements:

• Dark theme with modern UI (dark background: #0f1117, cards: #1a1d2e)
• Accent colors: #00d4aa (teal), #7c5cfc (purple), #ff6b6b (coral), #ffd93d (gold)
• Responsive grid layout — works on desktop and tablet
• Chart.js v4 via CDN for all interactive charts
• No external dependencies except Chart.js CDN

Dashboard Sections:

1. Header — Dataset name, subtitle, generation date
2. KPI Row — 6 metric cards (Total Content, Movies, TV Shows, Countries, Genres, Year Range)
3. Row 1 — Content Type Split (donut) + Yearly Additions (stacked bar)
4. Row 2 — Top 10 Countries (horizontal bar) + Top 10 Genres (horizontal bar)
5. Row 3 — Rating Distribution (bar) + Monthly Seasonality (bar)
6. Row 4 — Cumulative Growth (line) + Content Duration (bar)
7. Footer — "Generated by 10x-content-intel | Powered by Claude Code"

Chart.js Configuration:

// Use Chart.js CDN
// <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

// Color palette
const COLORS = {
    teal: '#00d4aa',
    purple: '#7c5cfc',
    coral: '#ff6b6b',
    gold: '#ffd93d',
    cyan: '#4ecdc4',
    pink: '#ff9ff3',
    blue: '#54a0ff',
    green: '#5f27cd'
};

// Chart defaults
Chart.defaults.color = '#8b8fa3';
Chart.defaults.font.family = "'Segoe UI', system-ui, sans-serif";

Step 4: Embed Data Directly

• All chart data must be embedded as JavaScript variables inside the HTML
• NO external data files — the dashboard must be a single, self-contained HTML file
• Use template literals or JSON.stringify for data embedding

Step 5: Save Output

Save the dashboard to output/{argument}/dashboard.html

Step 6: Also create a summary

After creating the dashboard, print a summary of:

• Where the dashboard was saved
• How many charts were generated
• Key metrics displayed

Output

• output/{argument}/dashboard.html — Single self-contained interactive dashboard

Quality Checklist

• All charts render correctly with Chart.js
• Dark theme is consistent across all elements
• KPI cards show correct numbers
• Charts have proper labels, tooltips, and legends
• Dashboard is responsive
• Single HTML file, no external dependencies (except Chart.js CDN)
• Footer credits present