html-output

Render complex data and narratives as a single self-contained HTML file.

7|1|Updated Apr 7, 2026
One-click install
npx skills add https://github.com/Agent-Engineer-Master/skill-engineer --skill html-output-agent-engineer-master
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html-output
Source: https://github.com/Agent-Engineer-Master/skill-engineer/tree/main/design/html-output
Command: npx skills add https://github.com/Agent-Engineer-Master/skill-engineer --skill html-output-agent-engineer-master

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Renders complex information clearly in a single, browser-friendly HTML file, eliminating the need to switch between formats and enabling easy sharing.

Core Features & Use Cases

  • Produce a single self-contained HTML artifact (with optional Mermaid or Chart.js CDN for diagrams and charts).
  • Automatically selects an archetype (dashboard, report, comparison, mermaid diagram, data explainer, etc.) based on the request, and includes brand tokens for styling.
  • Supports embedding charts, diagrams, tables, and narratives for browser-friendly viewing and export.
  • Use Case: when you need a complete, portable HTML deliverable for a client briefing, internal report, or data explainer.

Quick Start

Render input data as a self-contained HTML artifact with brand tokens and diagrams when needed.

Frequently Asked Questions about html-output

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

FAQPage Schema
How do I create a self-contained HTML dashboard for browser-based viewing?

To create a self-contained HTML dashboard, you render complex data and narratives into a single HTML file with brand tokens for styling. This approach eliminates format switching and enables easy distribution for client briefings or internal reports.

Can I use Chart.js and Mermaid diagrams in a single HTML report?

Yes, you can use Chart.js and Mermaid diagrams in a single HTML report by loading them via CDN scripts. The file automatically selects an archetype like a dashboard or data explainer and embeds charts, diagrams, tables, and narratives when justified.

What is the best way to share a data explainer with 3+ data dimensions?

The best way to share a data explainer with 3+ data dimensions is rendering it as a portable HTML artifact. This method supports browser-level interaction and applies brand tokens for consistent styling during distribution.

Does the HTML output require any external dependencies or file linking?

The HTML output requires no external dependencies for the core file structure, remaining completely self-contained. Optional diagram or chart functionalities can load CDN scripts dynamically when specifically justified by the data visualization request.

How do I format a client briefing as a portable HTML deliverable?

You format a client briefing as a portable HTML deliverable by enforcing a YAML frontmatter with name and description, then outputting a single HTML file. It automatically applies an archetype like a comparison or report with brand tokens.

When should I not use a self-contained HTML file for data visualization?

You should not use a self-contained HTML file for data visualization if your scenario lacks 3+ data dimensions or requires no browser-level interaction. It is specifically designed for complex dashboards, comparisons, and data explainers needing portable distribution.