Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →minicoohei/interactive-dashboard-builder
Chart.js を使ったインタラクティブなHTMLダッシュボードを構築するスキル。 「ダッシュボードを作って」「インタラクティブなレポート」「HTMLチャート作成」等のリクエストで発動。 フィルター・グラフ・プロフェッショナルなスタイリング付きのスタンドアロンHTMLを生成。
Passed 14 of 25 test cases with the skill, and 11 of 25 without it.
and 2 more in the full report
4 fixed10 passed either way10 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
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?
| Checked | Without skill | With skill |
|---|---|---|
| Sets `maintainAspectRatio: false` in Chart.js chart configuration options. | Passed | Passed |
| Constrains canvas vertical height using CSS properties on canvas elements. | Missed | Passed |
The instructions your model reads when the skill loads.
Patterns and techniques for building self-contained HTML/JS dashboards with Chart.js, filters, interactivity, and professional styling.
Every dashboard 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/[email protected]" integrity="sha384-jb8JQMbMoBUzgWatfe6COACi2ljcDdZQ2OxczGA3bGNeWe+6DChMTBJemed7ZnvJ" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]" 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>
test cases passed, vs 11 / 25 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.