single-file-dashboard

single-file-dashboard is a skill for Claude Code, Codex from d-padmanabhan/agent-engineering-handbook. It costs 146 tokens per session (3,830 once invoked), scanned A, original, MIT.

A method for building interactive HTML dashboards as one self-contained file that works without packages, internet access, remote scripts, or external images.

In plain words
What is it for?
Use it for offline dashboards, security reports, post-mortems, executive summaries, client deliverables, and regulator-facing analysis.
Why use it?
It makes analytical reports easy to email, archive, share, or open on an offline or isolated computer.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it for offline dashboards, security reports, post-mortems, executive summaries, client deliverables, and regulator-facing analysis.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/d-padmanabhan/agent-engineering-handbook/single-file-dashboard
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add d-padmanabhan/agent-engineering-handbook --skill single-file-dashboard
Clone the repo
git clone --depth 1 https://github.com/d-padmanabhan/agent-engineering-handbook

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for single-file-dashboard

README.md
[![agentmods](https://agentmods.dev/badge/skills/d-padmanabhan/agent-engineering-handbook/single-file-dashboard/github.svg)](https://agentmods.dev/skills/d-padmanabhan/agent-engineering-handbook/single-file-dashboard)
Your own site
<a href="https://agentmods.dev/skills/d-padmanabhan/agent-engineering-handbook/single-file-dashboard"><img src="https://agentmods.dev/badge/skills/d-padmanabhan/agent-engineering-handbook/single-file-dashboard/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for single-file-dashboard

Your own site · 80×15
<a href="https://agentmods.dev/skills/d-padmanabhan/agent-engineering-handbook/single-file-dashboard"><img src="https://agentmods.dev/badge/skills/d-padmanabhan/agent-engineering-handbook/single-file-dashboard.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 146 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,830 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00146 $0.03830
Opus 5 $0.00073 $0.01915
Sonnet 5 $0.00029 $0.00766
Haiku 4.5 $0.00015 $0.00383

Measured 9d ago against content hash 98487cd54f2a, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

single-file-dashboard scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/single-file-dashboard/SKILL.md · 392 lines

How it starts

The opening of the file, as written. The whole thing — 392 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Single-File Dashboard

How to ship analytical artifacts as single-file, fully self-contained, zero-dependency HTML dashboards that render identically online, offline, on an airgapped laptop, and inside an email client.

Companion rules:

  • 800-markdown.mdc - markdown formatting for prose deliverables
  • 810-documentation.mdc - documentation patterns
  • 815-reactflow-diagrams.mdc - interactive React Flow canvases (the other dashboard pattern; see contrast below)

When to invoke

Use when the user asks for:

  • "Build a dashboard" / "interactive HTML report" / "shareable analysis"
  • "Offline dashboard" / "airgap-safe" / "for the client" / "for the regulator"
  • "Visualize this workbook" / "turn this CSV into a presentable view"
  • An executive-style deliverable for client / leadership / regulator review
  • Anything that must render without internet access

Do not use for:

  • React applications (use a real frontend stack)
  • Embedded analytics inside a webapp (use a charting library and your build pipeline)
  • Real-time / streaming dashboards (use Grafana / Datadog / Looker)
  • Interactive architecture canvases with custom nodes / edges - use 815-reactflow-diagrams.mdc and the React Flow skill instead

The Six Golden Rules

  1. One file. Zero dependencies. No CDN, no remote scripts, no web fonts, no images. Inlined CSS, inlined JS, inlined data, inlined SVG.
  2. Inline vanilla SVG for charts. No D3, Chart.js, ECharts, or React. Vanilla SVG renders everywhere; libraries do not.
  3. Escape user content. Every string pulled from data must be HTML-escaped. Never bypass.
  4. Renders identically offline. Test by disabling network; the dashboard must look unchanged.
  5. Renders identically in email. Open the file in Gmail / Outlook / Apple Mail (as an attachment); layout must hold.
  6. Re-runnable, not editable. Never edit generated HTML. Edit the generator and re-run.

When to choose this pattern vs alternatives

Need Use this skill Use React Flow Use real BI tool Use Markdown
Client / executive deliverable; must be emailable yes no no maybe
Airgap / regulated environment yes possibly (still SPA) no yes
Interactive architecture canvas with custom nodes no yes no no
Real-time / streaming data no no yes no
Analytical workbook -> shareable HTML yes no maybe no
Live KPIs across many sources no no yes no
Static narrative document no no no yes

Read the full file on GitHub · 392 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 9d ago First seen · 392 lines · 146 tokens per session scan A 98487cd54f2a

Subscribe to this mod's changes

single-file-dashboard is a skill published in the GitHub repository d-padmanabhan/agent-engineering-handbook (17 stars, last pushed today), licensed MIT. It adds 146 tokens to every session and 3,830 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other skills, from other repositories

baoyu-youtube-transcript

A tool for downloading the written captions, subtitles, chapter information, speaker labels, and cover image from a YouTube video using its URL or ID.

JimLiu/baoyu-skills · 107 tokens

orbit-notion

Open Orbit briefing skill — selected by the Orbit pipeline when Notion is the user's only connected connector, or when the user explicitly scopes their daily digest to Notion. Pulls the past 24 hours of document edits, comments, mentions, and database row changes from the user's authenticated Notion connection and…

nexu-io/open-design · 117 tokens

instrument-data-to-allotrope

Convert laboratory instrument output files (PDF, CSV, Excel, TXT) to Allotrope Simple Model (ASM) JSON format or flattened 2D CSV. Use this skill when scientists need to standardize instrument data for LIMS systems, data lakes, or downstream analysis. Supports auto-detection of instrument types. Outputs include full…

anthropics/knowledge-work-plugins · 123 tokens

feishu

Work with Feishu or Lark bots, docs, sheets, bitables, approval flows, and OpenAPI/MCP setup without hardcoding credentials.

Hmbown/CodeWhale · 33 tokens

read

Reads URLs and PDFs by fetching source content, defaulting to concise summaries for plain read requests and clean Markdown when asked to convert, save, quote, cite, or feed downstream work. Use when users ask in any language to read, fetch, check, summarize, quote, cite, convert, or save a URL or PDF. Not for local…

tw93/Waza · 78 tokens

overleaf-sync

A two-way connection between a local paper folder and Overleaf, a web-based LaTeX editor for writing research papers. It lets you move changes between the local files and the shared Overleaf project.

wanshuiyin/Auto-claude-code-research-in-sleep · 97 tokens