Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Interactive Dashboard Builder Skill · minicoohei | DecimalAI

minicoohei/interactive-dashboard-builder

SkillScore56Maintained

Chart.js を使ったインタラクティブなHTMLダッシュボードを構築するスキル。「ダッシュボードを作って」「インタラクティブなレポート」「HTMLチャート作成」等のリクエストで発動。フィルター・グラフ・プロフェッショナルなスタイリング付きのスタンドアロンHTMLを生成。

Frontendby minicoohei

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/minicoohei-interactive-dashboard-builder/SKILL.md

decimalai skills pull minicoohei-interactive-dashboard-builder --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/minicoohei-interactive-dashboard-builder/SKILL.md https://app.decimal.ai/s/minicoohei-interactive-dashboard-builder/SKILL.md

Raw file: /s/minicoohei-interactive-dashboard-builder/SKILL.md ↗ · machine-readable summary at /s/minicoohei-interactive-dashboard-builder.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

25 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 8d ago

Yes — +12% lift · at higher cost+188% tokens0% turns56% of whole cases pass with skill (14/25)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-25	✗→✓	▲ Improved	229%	0%
case-07	✗→✓	▲ Improved	243%	0%
case-20	✗→✓	▲ Improved	271%	0%
case-24	✗→✓	▲ Improved	200%	0%
case-15	✓→✗	▼ Worse	234%	0%

Showing 5 of 25 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

minicoohei / ai-agent-camp

skills/interactive-dashboard-builder/SKILL.md

View on GitHub ↗

Imported 8/3/2026Version v1

Skill contents

SKILL.md

Interactive Dashboard Builder Skill

Patterns and techniques for building self-contained HTML/JS dashboards with Chart.js, filters, interactivity, and professional styling.

HTML/JS Dashboard Patterns

Base Template

Every dashboard follows this 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@4.5.1" integrity="sha384-jb8JQMbMoBUzgWatfe6COACi2ljcDdZQ2OxczGA3bGNeWe+6DChMTBJemed7ZnvJ" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0" integrity="sha384-cVMg8E3QFwTvGCDuK+ET4PD341jF3W8nO1auiXfuZNQkzbUUiBGLsIQUE+b1mxws" crossorigin="anonymous"></script>
    <style>
        /* Dashboard styles go here */
    </style>
</head>
<body>
    <div class="dashboard-container">
        <header class="dashboard-header">
            <h1>Dashboard Title</h1>
            <div class="filters">
                <!-- Filter controls -->
            </div>
        </header>

        <section class="kpi-row">
            <!-- KPI cards -->
        </section>

        <section class="chart-row">
            <!-- Chart containers -->
        </section>

        <section class="table-section">
            <!-- Data table -->
        </section>

        <footer class="dashboard-footer">
            <span>Data as of: <span id="data-date"></span></span>
        </footer>
    </div>

    <script>
        // Embedded data
        const DATA = [];

        // Dashboard logic
        class Dashboard {
            constructor(data) {
                this.rawData = data;
                this.filteredData = data;
                this.charts = {};
                this.init();
            }

            init() {
                this.setupFilters();
                this.renderKPIs();
                this.renderCharts();
                this.renderTable();
            }

            applyFilters() {
                // Filter logic
                this.filteredData = this.rawData.filter(row => {
                    // Apply each active filter
                    return true; // placeholder
                });
                this.renderKPIs();
                this.updateCharts();
                this.renderTable();
            }

            // ... methods for each section
        }

        const dashboard = new Dashboard(DATA);
    </script>
</body>
</html>

KPI Card Pattern

html
<div class="kpi-card">
    <div class="kpi-label">Total Revenue</div>
    <div class="kpi-value" id="kpi-revenue">$0</div>
    <div class="kpi-change positive" id="kpi-revenue-change">+0%</div>
</div>

javascript
function renderKPI(elementId, value, previousValue, format = 'number') {
    const el = document.getElementById(elementId);
    const changeEl = document.getElementById(elementId + '-change');

    // Format the value
    el.textContent = formatValue(value, format);

    // Calculate and display change
    if (previousValue && previousValue !== 0) {
        const pctChange = ((value - previousValue) / previousValue) * 100;
        const sign = pctChange >= 0 ? '+' : '';
        changeEl.textContent = `${sign}${pctChange.toFixed(1)}% vs prior period`;
        changeEl.className = `kpi-change ${pctChange >= 0 ? 'positive' : 'negative'}`;
    }
}

function formatValue(value, format) {
    switch (format) {
        case 'currency':
            if (value >= 1e6) return `$${(value / 1e6).toFixed(1)}M`;
            if (value >= 1e3) return `$${(value / 1e3).toFixed(1)}K`;
            return `$${value.toFixed(0)}`;
        case 'percent':
            return `${value.toFixed(1)}%`;
        case 'number':
            if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
            if (value >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
            return value.toLocaleString();
        default:
            return value.toString();
    }
}

Chart Container Pattern

html
<div class="chart-container">
    <h3 class="chart-title">Monthly Revenue Trend</h3>
    <canvas id="revenue-chart"></canvas>
</div>

Chart.js Integration

Line Chart

javascript
function createLineChart(canvasId, labels, datasets) {
    const ctx = document.getElementById(canvasId).getContext('2d');
    return new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: datasets.map((ds, i) => ({
                label: ds.label,
                data: ds.data,
                borderColor: COLORS[i % COLORS.length],
                backgroundColor: COLORS[i % COLORS.length] + '20',
                borderWidth: 2,
                fill: ds.fill || false,
                tension: 0.3,
                pointRadius: 3,
                pointHoverRadius: 6,
            }))
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            plugins: {
                legend: {
                    position: 'top',
                    labels: { usePointStyle: true, padding: 20 }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `${context.dataset.label}: ${formatValue(context.parsed.y, 'currency')}`;
                        }
                    }
                }
            },
            scales: {
                x: {
                    grid: { display: false }
                },
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return formatValue(value, 'currency');
                        }
                    }
                }
            }
        }
    });
}

Bar Chart

javascript
function createBarChart(canvasId, labels, data, options = {}) {
    const ctx = document.getElementById(canvasId).getContext('2d');
    const isHorizontal = options.horizontal || labels.length > 8;

    return new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: options.label || 'Value',
                data: data,
                backgroundColor: options.colors || COLORS.map(c => c + 'CC'),
                borderColor: options.colors || COLORS,
                borderWidth: 1,
                borderRadius: 4,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            indexAxis: isHorizontal ? 'y' : 'x',
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return formatValue(context.parsed[isHorizontal ? 'x' : 'y'], options.format || 'number');
                        }
                    }
                }
            },
            scales: {
                x: {
                    beginAtZero: true,
                    grid: { display: isHorizontal },
                    ticks: isHorizontal ? {
                        callback: function(value) {
                            return formatValue(value, options.format || 'number');
                        }
                    } : {}
                },
                y: {
                    beginAtZero: !isHorizontal,
                    grid: { display: !isHorizontal },
                    ticks: !isHorizontal ? {
                        callback: function(value) {
                            return formatValue(value, options.format || 'number');
                        }
                    } : {}
                }
            }
        }
    });
}

Doughnut Chart

javascript
function createDoughnutChart(canvasId, labels, data) {
    const ctx = document.getElementById(canvasId).getContext('2d');
    return new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: labels,
            datasets: [{
                data: data,
                backgroundColor: COLORS.map(c => c + 'CC'),
                borderColor: '#ffffff',
                borderWidth: 2,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '60%',
            plugins: {
                legend: {
                    position: 'right',
                    labels: { usePointStyle: true, padding: 15 }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const pct = ((context.parsed / total) * 100).toFixed(1);
                            return `${context.label}: ${formatValue(context.parsed, 'number')} (${pct}%)`;
                        }
                    }
                }
            }
        }
    });
}

Updating Charts on Filter Change

javascript
function updateChart(chart, newLabels, newData) {
    chart.data.labels = newLabels;

    if (Array.isArray(newData[0])) {
        // Multiple datasets
        newData.forEach((data, i) => {
            chart.data.datasets[i].data = data;
        });
    } else {
        chart.data.datasets[0].data = newData;
    }

    chart.update('none'); // 'none' disables animation for instant update
}

Filter and Interactivity Implementation

Dropdown Filter

html
<div class="filter-group">
    <label for="filter-region">Region</label>
    <select id="filter-region" onchange="dashboard.applyFilters()">
        <option value="all">All Regions</option>
    </select>
</div>

javascript
function populateFilter(selectId, data, field) {
    const select = document.getElementById(selectId);
    const values = [...new Set(data.map(d => d[field]))].sort();

    // Keep the "All" option, add unique values
    values.forEach(val => {
        const option = document.createElement('option');
        option.value = val;
        option.textContent = val;
        select.appendChild(option);
    });
}

function getFilterValue(selectId) {
    const val = document.getElementById(selectId).value;
    return val === 'all' ? null : val;
}

Date Range Filter

html
<div class="filter-group">
    <label>Date Range</label>
    <input type="date" id="filter-date-start" onchange="dashboard.applyFilters()">
    <span>to</span>
    <input type="date" id="filter-date-end" onchange="dashboard.applyFilters()">
</div>

javascript
function filterByDateRange(data, dateField, startDate, endDate) {
    return data.filter(row => {
        const rowDate = new Date(row[dateField]);
        if (startDate && rowDate < new Date(startDate)) return false;
        if (endDate && rowDate > new Date(endDate)) return false;
        return true;
    });
}

Combined Filter Logic

javascript
applyFilters() {
    const region = getFilterValue('filter-region');
    const category = getFilterValue('filter-category');
    const startDate = document.getElementById('filter-date-start').value;
    const endDate = document.getElementById('filter-date-end').value;

    this.filteredData = this.rawData.filter(row => {
        if (region && row.region !== region) return false;
        if (category && row.category !== category) return false;
        if (startDate && row.date < startDate) return false;
        if (endDate && row.date > endDate) return false;
        return true;
    });

    this.renderKPIs();
    this.updateCharts();
    this.renderTable();
}

Sortable Table

javascript
function renderTable(containerId, data, columns) {
    const container = document.getElementById(containerId);
    let sortCol = null;
    let sortDir = 'desc';

    function render(sortedData) {
        let html = '<table class="data-table">';

        // Header
        html += '<thead><tr>';
        columns.forEach(col => {
            const arrow = sortCol === col.field
                ? (sortDir === 'asc' ? ' ▲' : ' ▼')
                : '';
            html += `<th onclick="sortTable('${col.field}')" style="cursor:pointer">${col.label}${arrow}</th>`;
        });
        html += '</tr></thead>';

        // Body
        html += '<tbody>';
        sortedData.forEach(row => {
            html += '<tr>';
            columns.forEach(col => {
                const value = col.format ? formatValue(row[col.field], col.format) : row[col.field];
                html += `<td>${value}</td>`;
            });
            html += '</tr>';
        });
        html += '</tbody></table>';

        container.innerHTML = html;
    }

    window.sortTable = function(field) {
        if (sortCol === field) {
            sortDir = sortDir === 'asc' ? 'desc' : 'asc';
        } else {
            sortCol = field;
            sortDir = 'desc';
        }
        const sorted = [...data].sort((a, b) => {
            const aVal = a[field], bVal = b[field];
            const cmp = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
            return sortDir === 'asc' ? cmp : -cmp;
        });
        render(sorted);
    };

    render(data);
}

CSS Styling for Dashboards

Color System

css
:root {
    /* Background layers */
    --bg-primary: #f8f9fa;
    --bg-card: #ffffff;
    --bg-header: #1a1a2e;

    /* Text */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-on-dark: #ffffff;

    /* Accent colors for data */
    --color-1: #4C72B0;
    --color-2: #DD8452;
    --color-3: #55A868;
    --color-4: #C44E52;
    --color-5: #8172B3;
    --color-6: #937860;

    /* Status colors */
    --positive: #28a745;
    --negative: #dc3545;
    --neutral: #6c757d;

    /* Spacing */
    --gap: 16px;
    --radius: 8px;
}

Layout

css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
}

.dashboard-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--gap);
}

.dashboard-header {
    background: var(--bg-header);
    color: var(--text-on-dark);
    padding: 20px 24px;
    border-radius: var(--radius);
    margin-bottom: var(--gap);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.dashboard-header h1 {
    font-size: 20px;
    font-weight: 600;
}

KPI Cards

css
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.kpi-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.kpi-label {
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.kpi-change {
    font-size: 13px;
    font-weight: 500;
}

.kpi-change.positive { color: var(--positive); }
.kpi-change.negative { color: var(--negative); }

Chart Containers

css
.chart-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.chart-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.chart-container h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.chart-container canvas {
    max-height: 300px;
}

Filters

css
.filters {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-group label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.filter-group select,
.filter-group input[type="date"] {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-on-dark);
    font-size: 13px;
}

.filter-group select option {
    background: var(--bg-header);
    color: var(--text-on-dark);
}

Data Table

css
.table-section {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid #dee2e6;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    user-select: none;
}

.data-table thead th:hover {
    color: var(--text-primary);
    background: #f8f9fa;
}

.data-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.data-table tbody tr:hover {
    background: #f8f9fa;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

Responsive Design

css
@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-row {
        grid-template-columns: 1fr;
    }

    .filters {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media print {
    body { background: white; }
    .dashboard-container { max-width: none; }
    .filters { display: none; }
    .chart-container { break-inside: avoid; }
    .kpi-card { border: 1px solid #dee2e6; box-shadow: none; }
}

Performance Considerations for Large Datasets

Data Size Guidelines

| Data Size | Approach | |---|---| | <1,000 rows | Embed directly in HTML. Full interactivity. | | 1,000 - 10,000 rows | Embed in HTML. May need to pre-aggregate for charts. | | 10,000 - 100,000 rows | Pre-aggregate server-side. Embed only aggregated data. | | >100,000 rows | Not suitable for client-side dashboard. Use a BI tool or paginate. |

Pre-Aggregation Pattern

Instead of embedding raw data and aggregating in the browser:

javascript
// DON'T: embed 50,000 raw rows
const RAW_DATA = [/* 50,000 rows */];

// DO: pre-aggregate before embedding
const CHART_DATA = {
    monthly_revenue: [
        { month: '2024-01', revenue: 150000, orders: 1200 },
        { month: '2024-02', revenue: 165000, orders: 1350 },
        // ... 12 rows instead of 50,000
    ],
    top_products: [
        { product: 'Widget A', revenue: 45000 },
        // ... 10 rows
    ],
    kpis: {
        total_revenue: 1980000,
        total_orders: 15600,
        avg_order_value: 127,
    }
};

Chart Performance

Limit line charts to <500 data points per series (downsample if needed)
Limit bar charts to <50 categories
For scatter plots, cap at 1,000 points (use sampling for larger datasets)
Disable animations for dashboards with many charts: animation: false in Chart.js options
Use Chart.update('none') instead of Chart.update() for filter-triggered updates

DOM Performance

Limit data tables to 100-200 visible rows. Add pagination for more.
Use requestAnimationFrame for coordinated chart updates
Avoid rebuilding the entire DOM on filter change -- update only changed elements

javascript
// Efficient table pagination
function renderTablePage(data, page, pageSize = 50) {
    const start = page * pageSize;
    const end = Math.min(start + pageSize, data.length);
    const pageData = data.slice(start, end);
    // Render only pageData
    // Show pagination controls: "Showing 1-50 of 2,340"
}

Want to see if minicoohei/interactive-dashboard-builder would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/21/2026, 17:38 UTC · 25 cases

Lift

+12%

56% vs 44%

Agent turns

0%

1.0 vs 1.0

Tokens

+188%

8,764.08 vs 3,040.84

fail → pass · 4pass → pass · 10fail → fail · 10pass → fail · 1

Per-case results (25)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-25 How should an HTML chart card container and canvas element be styled in CSS and configured in Chart.js to prevent canvas elements from endlessly expanding or distorting proportions inside grid layouts?	fail→pass	14,109	12,089	-14%	1	1	0%	2,478	8,160	+229%	0	0	—
case-01 Build a standalone client-side HTML dashboard web page for tracking monthly enterprise software sales and regional revenue. I need KPI cards at the top displaying current performance with period-over-period percentage changes, a line graph for revenue trends over time, a bar graph breakdown across sales territories, a distribution chart for product tiers, and a sortable breakdown table at the bottom. It should include interactive controls to filter data by region and date range dynamically without reloading the page, styled professionally with a cohesive dark-header layout and card-based sections.	fail→fail	30,173	29,642	-2%	1	1	0%	6,248	12,204	+95%	0	0	—
case-02 Create a self-contained single-file HTML report dashboard for quarterly marketing campaign metrics. Embed mock dataset records into the JavaScript logic. The page needs metric cards at the top that auto-format large currency values and display directionally styled percentage shifts. Include interactive drop-down selection filters to slice the data by campaign channel, updating a trend chart, a category breakdown bar chart, and an interactive detailed table. Make sure the table headers allow clicking to sort ascending or descending, and design the layout to be fully responsive for mobile screens as well as print-friendly.	fail→fail	30,896	27,573	-11%	1	1	0%	6,253	12,209	+95%	0	0	—
case-03 I need a complete standalone HTML web dashboard template using embedded JavaScript and Chart.js to monitor customer support ticket data across teams. The interface should feature key metric summary cards showing total tickets and resolution rate updates, line and breakdown charts, and a multi-attribute filter panel (e.g., priority select box and date pickers). Please handle chart updates efficiently without animation lag when filters change, format summary numbers cleanly, and present everything inside styled card elements with a modern design system.	fail→fail	30,385	31,084	+2%	1	1	0%	6,237	12,193	+95%	0	0	—
case-04 I am designing a custom D3.js v7 force-directed network graph visualization to display node-link relationships with custom SVG drag behaviors and physics simulations. How should I configure the D3 simulation force physics and SVG tick updates?	pass→pass	27,959	19,852	-29%	1	1	0%	3,202	9,660	+202%	0	0	—
case-05 Write a DAX measure in Power BI for calculating a 12-month rolling average revenue based on a Date table relationship and explicit CALCULATE filtering.	pass→pass	12,548	10,078	-20%	1	1	0%	2,151	7,748	+260%	0	0	—
case-06 Write a Node.js Express server script with the `ws` WebSocket library that streams live CPU and memory metrics every second to connected backend clients.	pass→pass	15,073	14,541	-4%	1	1	0%	2,993	8,791	+194%	0	0	—
case-07 I have a dataset of 50,000 raw transaction logs that I want to display on an in-browser web dashboard. Should I embed all 50,000 raw JS objects into the HTML file and aggregate them in the browser upon page load, or how should I architect this data load?	fail→pass	15,091	13,267	-12%	1	1	0%	2,363	8,109	+243%	0	0	—
case-08 When users select a region filter in our single-page browser dashboard, we update multiple chart datasets simultaneously. However, triggering full chart re-render animations on every filter click causes noticeable UI stutter. How should chart update calls be configured when applying dynamic filters?	pass→pass	15,163	7,789	-49%	1	1	0%	2,299	7,197	+213%	0	0	—
case-09 Create a donut breakdown chart function for visual market share distribution using an HTML5 canvas element. We want a clean donut ring with an inner cutout radius instead of a full pie chart, and tooltips showing both raw counts and percentage of total. What configuration options should be set?	fail→fail	26,603	14,860	-44%	1	1	0%	5,525	8,818	+60%	0	0	—
case-10 We are rendering a breakdown bar chart where category labels can vary between 5 items and 15 items. Should we force all bar charts to remain vertical, or adjust orientation based on label counts?	fail→fail	11,546	11,204	-3%	1	1	0%	1,730	7,772	+349%	0	0	—
case-11 Our server collected 10,000 time-series data points over the last month for a telemetry dashboard line graph. What is the recommended strategy for rendering line series data in browser charts to ensure high rendering performance?	fail→fail	16,031	18,767	+17%	1	1	0%	2,582	9,163	+255%	0	0	—
case-12 We are implementing a filter system on a client-side dataset that includes both a drop-down select filter for categories and start/end date range input fields. How should the filtering logic be structured so that changing any single input correctly reflects the combined filter state across all dashboard widgets?	pass→pass	14,148	16,344	+16%	1	1	0%	2,370	9,138	+286%	0	0	—
case-13 Write a JavaScript utility function to populate a KPI metric summary box comparing current period revenue to prior period revenue. How should percentage change be computed and displayed when prior period revenue is non-zero vs when it is zero or missing?	pass→pass	16,496	19,145	+16%	1	1	0%	3,359	9,840	+193%	0	0	—
case-14 We want an interactive table component in JavaScript that lets users click table header titles to sort rows. If a user clicks the 'Sales' header once, and then clicks 'Sales' a second time, how should the sorting direction change?	fail→fail	8,914	11,235	+26%	1	1	0%	1,567	8,377	+435%	0	0	—
case-15 What CSS grid layout rule and responsive breakpoint strategy should be used for a top row of KPI metric cards so they fill horizontal space evenly and reflow cleanly across tablet and desktop screens?	pass→fail	14,249	11,066	-22%	1	1	0%	2,376	7,926	+234%	0	0	—
case-16 We have an array of raw JavaScript objects representing transactions, each with a 'region' property. How should we dynamically construct options for an HTML `<select>` filter element while keeping an initial 'All Regions' option?	pass→pass	11,934	8,160	-32%	1	1	0%	2,032	7,528	+270%	0	0	—
case-17 Write a JavaScript filtering function that checks whether a transaction's string date (e.g. `'2024-03-15'`) falls within a user-selected start date and end date from HTML date inputs.	fail→fail	10,566	8,471	-20%	1	1	0%	1,974	7,603	+285%	0	0	—
case-18 We need a cohesive CSS color variable palette for an executive analytics dashboard. We want dark headers, light card backgrounds, neutral body backgrounds, and dedicated positive/negative status indicators. Define a CSS `:root` block following standard custom property naming conventions.	fail→fail	13,706	13,520	-1%	1	1	0%	2,578	8,616	+234%	0	0	—
case-19 How should a standalone HTML dashboard page customize its CSS styles inside a `@media print` query block to ensure clean physical printouts or PDF exports?	pass→pass	16,634	16,741	+1%	1	1	0%	3,155	9,075	+188%	0	0	—
case-20 When displaying a dataset of 5,000 filtered rows in an HTML table section, rendering 5,000 `<tr>` elements simultaneously causes browser freeze. What DOM performance pattern should be implemented to handle table rendering efficiently?	fail→pass	13,686	12,338	-10%	1	1	0%	2,254	8,362	+271%	0	0	—
case-21 We are setting up time-series canvas charts with date axes using a popular browser charting library via CDN. Which date adapter package tag must be included alongside the main charting script to handle date parsing?	fail→fail	6,934	4,468	-36%	1	1	0%	1,369	6,682	+388%	0	0	—
case-22 Write a JavaScript formatting helper function `formatValue(value, format)` that formats raw numeric amounts into human-readable strings when format type is `'currency'`. How should values over 1,000,000, over 1,000, and under 1,000 be formatted?	pass→pass	20,369	7,958	-61%	1	1	0%	3,739	7,589	+103%	0	0	—
case-23 In a time-series line chart, we want hovering over any point along the x-axis to highlight tooltips for all dataset series at that exact index position, without requiring direct mouse intersection on specific line points. What interaction options should be specified?	pass→pass	11,212	4,392	-61%	1	1	0%	1,926	6,572	+241%	0	0	—
case-24 Design an HTML header container for a dashboard title and interactive control panel using CSS flexbox. How should elements be aligned and arranged to accommodate mobile screens gracefully?	fail→pass	17,439	18,240	+5%	1	1	0%	3,261	9,770	+200%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 25 cases were attempted. The headline lift of +12 percentage points is the difference between those two pass rates over the 25 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 44%
Pass rate with the skill: 56%
Cases attempted: 25
Cases counted toward lift: 25
Cases that regressed: 1
Skill version measured: v1
Run completed: 8/21/2026, 17:38 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-25

Prompt

How should an HTML chart card container and canvas element be styled in CSS and configured in Chart.js to prevent canvas elements from endlessly expanding or distorting proportions inside grid layouts?

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run56

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+205% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 7 days ago

Other measured skills in the registry, with their headline benchmark lift.