skills.rest
d-padmanabhan
d-padmanabhanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

single-file-dashboard

Generate single-file HTML dashboards with inline CSS, JS, and SVG from CSV or JSON.

15|2|Updated Dec 13, 2025
Search Tags:#data visualization#dashboard#single-file html#offline reporting#vanilla svg#airgap safe#email deliverable
One-click install
npx skills add https://github.com/d-padmanabhan/agent-engineering-handbook --skill single-file-dashboard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: single-file-dashboard
Source: https://github.com/d-padmanabhan/agent-engineering-handbook/tree/main/skills/single-file-dashboard
Command: npx skills add https://github.com/d-padmanabhan/agent-engineering-handbook --skill single-file-dashboard

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Producing polished dashboards for clients, executives, auditors, or regulated environments is hard when recipients need a file that works offline, in email, and with zero external dependencies.

Core Features & Use Cases

  • Single-file, zero-dependency HTML: Generates one self-contained dashboard with inline CSS, inline JS, and embedded data.
  • Offline + email safe rendering: Ensures the dashboard looks the same with network disabled and preserves layout in common email clients.
  • Vanilla SVG charts: Uses inline SVG charts instead of external charting libraries or CDNs for consistent rendering.
  • Operationally usable deliverables: Supports executive-style sections (overview, key findings, charts, detail tables, methodology) and interactive behaviors like sorting and simple filtering without adding dependencies.

Quick Start

Use the single-file-dashboard skill to generate an airgap-safe HTML dashboard from your CSV or JSON by prompting: “Build a single-file, zero-dependency interactive HTML dashboard from this dataset and make it render identically offline.”

Frequently Asked Questions about single-file-dashboard

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a single-file HTML dashboard that works offline without external dependencies?▼

To create a single-file HTML dashboard, you need inline CSS, inline JS, and embedded data. This approach ensures the interactive dashboard renders identically offline with zero external requests, making it safe for airgapped environments.

Can I generate an interactive HTML dashboard from CSV data that is safe to email?▼

Yes, you can generate an emailable interactive HTML dashboard from CSV or JSON data. The output uses inline SVG charts and embedded data, preserving layout and rendering safely in common email clients without external dependencies.

What is the best way to build an executive dashboard for a regulated audit report?▼

The best way to build an audit report dashboard is generating a zero-dependency HTML file. This method embeds all data, CSS, and JS inline, ensuring the regulated deliverable remains accessible and operational during offline audits.

Does this approach to data visualization use external charting libraries or CDNs?▼

No, this data visualization approach does not use external charting libraries or CDNs. It relies entirely on vanilla SVG charts rendered inline, ensuring consistent display and interactive behaviors without adding external dependencies.

How do I add sorting and filtering to a dashboard without adding dependencies?▼

You can add sorting and filtering without dependencies by using inline JavaScript within your HTML file. This allows interactive behaviors in executive-style sections like detail tables while keeping the deliverable fully self-contained.

When should I not use a single-file HTML dashboard for reporting?▼

You should avoid single-file HTML dashboards when your reporting requires real-time data streaming or server-side processing. Because this method embeds all data and SVG charts inline, it is designed for static analytical deliverables rather than live data updates.

Related Skills

Explore More Design & Creative Skills→
gaogg521gaogg521
33

officecli-data-dashboard

Convert CSV input into a two-sheet .xlsx workbook with a KPI Dashboard.

Community
Advanced
vercel-labsvercel-labs
15.9k

react-email

Convert JSON specifications into HTML or plain-text emails using React Email components.

Official
Intermediate
The-AIOSThe-AIOS
15

data-presentation

Transform raw data into narratives and KPI dashboards.

Official
Intermediate
Starchild-ai-agentStarchild-ai-agent
1

@1463/dashboard

Create interactive HTML/CSS/JavaScript dashboards with real-time data streaming.

Official
Advanced