New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Dashboard Builder

by TheCraigHewitt in TheCraigHewitt/skills

Build an interactive HTML dashboard from any data source — a CSV file, a folder of files, a spreadsheet, or pasted numbers.

MITAuto-check passedDocuments & Office

Install Dashboard Builder

skills CLI
$ npx skills add TheCraigHewitt/skills --skill dashboard-builder -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install TheCraigHewitt/skills dashboard-builder --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/TheCraigHewitt/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/cowork/dashboard-builder .claude/skills/dashboard-builder && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
dashboard-builder
GitHub stars
159
Token cost
~1.5k tokens
SKILL.md length
839 words
Files
2
Skills in repo
65
Repo updated
First seen
Licence
MIT

At a glance

Build an interactive HTML dashboard from any data source — a CSV file, a folder of files, a spreadsheet, or pasted numbers.

  • Works in 5 steps: Where's the data? — file path, folder,… → What's it about? — sales numbers,… → What questions should the dashboard… → …
  • Says build a dashboard
  • SKILL.md covers Before you start, Inspect the data first, Dashboard structure and Visual style, plus 5 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Dashboard Builder is an agent skill from TheCraigHewitt/skills. Build an interactive HTML dashboard from any data source — a CSV file, a folder of files, a spreadsheet, or pasted numbers. The dashboard shows KPIs, charts, and lets the user filter and explore. Use this whenever the user says 'build a dashboard,' 'visualize this data,' 'turn this into a dashboard,' 'KPI dashboard,' 'metrics dashboard,' 'show me trends in,' or has data they want to see and explore visually rather than as a table. Works for business KPIs, financial data, project tracking, personal metrics, survey…

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `evals/evals.json`).

It sits in Documents & Office, covering OKRs and executive reporting, HTML artifacts and Excel spreadsheets. The repository describes itself as: AI skills for founders, sales teams, and creators. 47 skills across CEO, Sales, YouTube, and General categories. Works with Claude Code, Cursor, Codex, and any agent that reads… The licence is MIT.

When your agent uses it

  • Says build a dashboard
  • Visualize this data
  • Turn this into a dashboard
  • Metrics dashboard

Example prompts

  • “build a dashboard,”
  • “visualize this data,”
  • “turn this into a dashboard,”
  • “/dashboard-builder”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Where's the data? — file path, folder, paste, or spreadsheet
  2. What's it about? — sales numbers, project status, marketing metrics, personal finances, something else
  3. What questions should the dashboard answer? — "How are we trending vs last month?" "Which channel is converting best?" "Where are we over…
  4. Audience — just for the user, or to share with a team / client?
  5. Refresh cadence — one-time build, or will the data update? (If updating, this affects how you reference the source.)

What it can do on your machine

Read from SKILL.md and the folder at commit fdbf39b. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Dashboard Builder loads about 1.5k tokens when it runs. Until then it costs about 141 tokens; SKILL.md has 839 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~141
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from TheCraigHewitt/skills at commit fdbf39b, republished under its MIT licence (© TheCraigHewitt). 839 words, ~1,523 tokens.

Download SKILL.mdSave it as .claude/skills/dashboard-builder/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
dashboard-builder
description
Build an interactive HTML dashboard from any data source — a CSV file, a folder of files, a spreadsheet, or pasted numbers. The dashboard shows KPIs, charts, and lets the user filter and explore. Use this whenever the user says 'build a dashboard,' 'visualize this data,' 'turn this into a dashboard,' 'KPI dashboard,' 'metrics dashboard,' 'show me trends in,' or has data they want to see and explore visually rather than as a table. Works for business KPIs, financial data, project tracking, personal metrics, survey results, anything tabular.

Dashboard Builder

You build a single-file HTML dashboard from the user's data. The dashboard should be interactive (filters, hover details, sortable), visually clean, and useful at a glance. The user opens it in a browser and immediately understands what's going on with the underlying data.

Before you start

Get the basics:

  1. Where's the data? — file path, folder, paste, or spreadsheet
  2. What's it about? — sales numbers, project status, marketing metrics, personal finances, something else
  3. What questions should the dashboard answer? — "How are we trending vs last month?" "Which channel is converting best?" "Where are we over budget?"
  4. Audience — just for the user, or to share with a team / client?
  5. Refresh cadence — one-time build, or will the data update? (If updating, this affects how you reference the source.)

If the data is already in the working folder and the structure is obvious, infer the questions and build a draft — let the user redirect.

Inspect the data first

Before designing the dashboard, read the data and understand:

  • Schema — what columns exist, what types
  • Time dimension — is there a date column? What's the date range?
  • Categorical dimensions — what can you filter or group by?
  • Numeric measures — what are the things worth visualizing?
  • Data quality — any obvious gaps, duplicates, or weirdness worth flagging

If the data has problems (missing values, inconsistent formats, obvious errors), surface them at the top of the dashboard rather than silently ignoring them.

Dashboard structure

Most dashboards work in this order:

  1. Top strip — the headline numbers (3–6 KPIs) — big numbers with trend indicators (vs prior period). The user should know the state of the world from this strip alone.
  2. Time-series chart — the most important measure over time. Use the full width.
  3. Breakdown charts (2–4) — slice the headline numbers by the dimensions that matter (channel, segment, region, product, etc.)
  4. Detail table — sortable, filterable raw-ish data underneath, for the user who wants to drill in
  5. Notes / observations — your read on what the data is telling them, in 2–4 bullets

Adjust based on what the data is actually about — a project-tracking dashboard looks different from a sales dashboard, but the principle holds: big-picture first, then breakdowns, then detail.

Visual style

  • Light background — easier to read for long sessions, prints well
  • One accent color for the primary measure across all charts so the eye anchors
  • Muted secondary colors for breakdowns
  • Sparse gridlines — present, but not visually loud
  • Number formatting matters — $1.2M not 1247392.41, +12.4% not 0.124. Round sensibly, abbreviate large numbers.
  • No 3D charts. No pie charts with more than 4 slices. No exploding wedges. Use bar, line, and stacked bar for almost everything. Dot plots for distributions.
  • Color encodes meaning, not decoration — green for above-target, red for below, neutral for between. Don't randomly colorize.
Show full SKILL.md (379 more words)Show less

Interactivity

Required:

  • Filters — at least one (date range, segment, etc.) that updates all charts simultaneously
  • Hover details — every chart point should show its underlying value on hover
  • Sortable table — click a column header to sort

Optional but nice:

  • Compare periods — toggle to overlay last month / quarter / year
  • Drill-in — click a chart segment to filter the rest of the dashboard
  • Export — button to download the underlying data as CSV

Use a modern charting library like Chart.js, Apache ECharts, or vanilla SVG with D3 for custom shapes. Keep dependencies minimal — embed via CDN or inline.

Technical implementation

Save as dashboard-[topic-slug].html in the working folder. Self-contained: data embedded as JS object, charts inline, no separate CSS file unless the user wants one.

If the data is large (>1000 rows), consider:

  • Aggregating server-side (i.e., in the build step) so the dashboard loads fast
  • Using a streaming format (e.g., compressed JSON) for the embedded data
  • Skipping the detail table or paginating it

After generating

Tell the user:

  1. The file path
  2. The 3 most interesting things you noticed in the data (this is what makes the dashboard feel insightful, not just functional)
  3. What they should ask for if they want changes — common ones: different KPIs at the top, add a comparison period, change the breakdown dimension

Updating the dashboard

If the user comes back with updated data, regenerate the dashboard rather than patching it. The dashboard is a snapshot of a moment — version it by date in the filename if they want history.

For a recurring dashboard (e.g., "I'll send you fresh data every Monday"), suggest setting up a scheduled task that ingests a known file path and regenerates the HTML on a schedule.

Rules

  1. Lead with the answer, not the data. A dashboard that requires the user to interpret it has failed. The KPI strip should make the state of the world obvious.
  2. Don't visualize everything. A dashboard with 14 charts is worse than one with 5. Cut the marginal ones.
  3. Format numbers like a human reads them. Currency, percentages, abbreviations — use them.
  4. Highlight what changed. A static snapshot is less useful than one that shows movement (this period vs prior).
  5. Surface data quality issues at the top. Don't silently average over bad data — flag it.

© TheCraigHewitt, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in cowork/dashboard-builder of TheCraigHewitt/skills.

  • SKILL.md
  • evals/evals.json

Open the folder on GitHubat commit fdbf39b

Compare with similar skills

Dashboard Builder next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Dashboard Builder compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Dashboard Builder this skillTheCraigHewitt/skills159—~1.5kAutomated safety check: PassMIT
Officecli Data DashboardFerroxLabs/wayland6084 repos~9.2kAutomated safety check: PassAGPL-3.0
Data ReportZJU-REAL/Easel3.4k—~479Automated safety check: PassApache-2.0
Executive Dashboard Generatormanojbajaj95/claude-gtm-plugin1052 repos~3.4kAutomated safety check: PassMIT
Anti Gambling Tradermars-tw/anti-gambling-trader-tw907—~1.9kAutomated safety check: PassMIT
XLSX Spreadsheet ToolkitXiaomiMiMo/MiMo-Code14k—~2.9kAutomated safety check: PassApache-2.0

Similar skills

  • Officecli Data Dashboard

    FerroxLabs/wayland

    A skill your agent uses to build a multi-element Excel dashboard - Dashboard sheet on open, multiple formula-driven KPI cards, multiple charts, sparklines, and conditional formatting - from CSV or…

    608 GitHub starsUsed in 4 repos~9.2k tokens
    Documents & OfficeAuto-check passed

  • Data Report

    ZJU-REAL/Easel

    把 CSV、Excel 或 JSON 数据生成包含 KPI、图表和洞察的完整可视化报告页。当用户说“数据报告、CSV/Excel 转报告、做 KPI 看板、生成可视化报告页”时使用。单张图表用 chart-visualization；信息图或 GIF 动画图表用 infographic。

    3.4k GitHub stars~479 tokensUpdated yesterday
    Documents & OfficeAuto-check passed

  • Executive Dashboard Generator

    manojbajaj95/claude-gtm-plugin

    Transform raw data from CSVs, Google Sheets, or databases into executive-ready reports with visualizations, key metrics, trend analysis, and actionable recommendations.

    105 GitHub starsUsed in 2 repos~3.4k tokens
    Documents & OfficeAuto-check passed

  • Anti Gambling Trader

    mars-tw/anti-gambling-trader-tw

    分析台股 / 台股ETF / 台指期選擇權 / 美股 / 加密貨幣 / 外匯的交易紀錄 (CSV / JSON / Excel),用統計學判斷使用者的獲利是「可重複的優勢」還是 「運氣 + 倖存者偏差(賭博)」,不適合長期投資會明確勸退。內建反詐工具: 掃描群組對話的詐騙話術(scan-text)、檢驗老師宣稱的績效(guru-check)、…

    907 GitHub stars~1.9k tokensUpdated yesterday
    Documents & OfficeAuto-check passed

  • XLSX Spreadsheet Toolkit

    XiaomiMiMo/MiMo-Code

    Builds, edits, cleans, recalculates and reads Excel workbooks and CSV files with openpyxl and pandas, plus LibreOffice for recalculation and PDF export.

    14k GitHub stars~2.9k tokensUpdated yesterday
    Documents & OfficeAuto-check passed

  • Data Update

    Sixian-Li/plain-backtest

    Operate and assess the Quant workspace market-data layer through the tested data-update CLI.

    204 GitHub stars~1.6k tokensUpdated 13 days ago
    Documents & OfficeAuto-check passed

More from TheCraigHewitt/skills

All 65 skills in this repo

  • Carousels

    TheCraigHewitt/skills

    Turns a piece of Craig's content (an email, a YouTube script, an essay, or pasted text) into a polished image carousel publishable to both LinkedIn and Instagram from one set of 1080x1350 slides.

    159 GitHub stars~2.3k tokensUpdated 4 mo ago
    Auto-check passed

  • Audience Research

    TheCraigHewitt/skills

    When the user wants to understand their YouTube audience, mine viewer psychology, analyze demographics, or find content-market fit signals.

    159 GitHub stars~2.4k tokensUpdated 4 mo ago
    Auto-check passed

  • Brain Dump

    TheCraigHewitt/skills

    Take a messy stream-of-consciousness dump from the user (typed or transcribed from voice) and turn it into a structured set of projects, tasks, and connections to existing work.

    159 GitHub stars~1.3k tokensUpdated 4 mo ago
    Auto-check passed

  • Channel Audit

    TheCraigHewitt/skills

    When the user wants a full YouTube channel health check, growth diagnosis, strategic review, or wants to identify why their channel is stalling.

    159 GitHub stars~2.4k tokensUpdated 4 mo ago
    Auto-check passed

  • Channel Strategy

    TheCraigHewitt/skills

    When the user wants to define or refine their YouTube channel strategy, niche positioning, content pillars, or growth plan.

    159 GitHub stars~2.2k tokensUpdated 4 mo ago
    Auto-check passed

  • Cold Call

    TheCraigHewitt/skills

    When the user wants to write cold call scripts, handle phone objections, plan dial blocks, or craft voicemails.

    159 GitHub stars~5k tokensUpdated 4 mo ago
    Auto-check passed

Categories

Questions about Dashboard Builder

What does Dashboard Builder do?

Build an interactive HTML dashboard from any data source — a CSV file, a folder of files, a spreadsheet, or pasted numbers. Dashboard Builder is an agent skill from TheCraigHewitt/skills. Build an interactive HTML dashboard from any data source — a CSV file, a folder of files, a spreadsheet, or pasted numbers.

When should I use Dashboard Builder?

Dashboard Builder fits situations like: says build a dashboard; visualize this data; turn this into a dashboard; metrics dashboard.

How do I install Dashboard Builder in Claude Code?

Run `npx skills add TheCraigHewitt/skills --skill dashboard-builder -a claude-code`. Or copy the skill folder (cowork/dashboard-builder in TheCraigHewitt/skills) into .claude/skills/dashboard-builder in your project. Claude Code loads it when a task matches its description.

How do I install Dashboard Builder in Codex?

Run `npx skills add TheCraigHewitt/skills --skill dashboard-builder -a codex`. Or copy the skill folder (cowork/dashboard-builder in TheCraigHewitt/skills) into .agents/skills/dashboard-builder in your project. Codex loads it when a task matches its description.

Can I use Dashboard Builder in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add TheCraigHewitt/skills --skill dashboard-builder -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/dashboard-builder, .gemini/skills/dashboard-builder, .github/skills/dashboard-builder and .opencode/skills/dashboard-builder in your project.

What does Dashboard Builder need to run?

SKILL.md names no scripts, command-line tools or credentials: Dashboard Builder is instructions for the agent only.

Does Dashboard Builder access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Dashboard Builder safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Dashboard Builder use?

Dashboard Builder is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Dashboard Builder use?

About 1.5k tokens (SKILL.md is roughly 6.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Dashboard Builder?

Skills that share tags, products or a category with Dashboard Builder: Officecli Data Dashboard (FerroxLabs/wayland, 608 stars), Data Report (ZJU-REAL/Easel, 3.4k stars), Executive Dashboard Generator (manojbajaj95/claude-gtm-plugin, 105 stars) and Anti Gambling Trader (mars-tw/anti-gambling-trader-tw, 907 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Dashboard Builder?

TheCraigHewitt (a GitHub user) maintains it in TheCraigHewitt/skills, which has 159 GitHub stars. The repository holds 65 skills in this directory. The repository was last updated on May 22, 2026.

Source: TheCraigHewitt/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.