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.