genpage

Convert structured AI outputs into interactive HTML reports with Mermaid and Chart.js.

Updated May 8, 2026
One-click install
npx skills add https://github.com/nandzz/genpage --skill genpage-nandzz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: genpage
Source: https://github.com/nandzz/genpage/tree/main/plugins/genpage/skills/genpage
Command: npx skills add https://github.com/nandzz/genpage --skill genpage-nandzz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables converting structured AI outputs—such as tables, grouped sections, comparisons, and metrics—into self-contained, interactive HTML reports for easier visualization and sharing.

Core Features & Use Cases

  • Structured Response Visualization: Detects and intercepts outputs with tabular, grouped, or comparative data for visualization.
  • Report Generation: Creates dynamic, styled HTML reports that embed charts, diagrams, and formatted data.
  • Use Case: A developer is analyzing API responses and wants to generate an interactive report summarizing dependencies, metrics, and comparisons, which can be shared with stakeholders.

Quick Start

Use the genpage skill to turn a lengthy dependency list into an interactive HTML report viewable in the browser.

Frequently Asked Questions about genpage

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

FAQPage Schema
How do I convert structured AI responses into interactive HTML reports?

To convert structured AI responses into interactive HTML reports, you use a skill that intercepts tabular, grouped, or comparative data outputs and renders them with embedded charts and diagrams. This generates self-contained reports for browser viewing and stakeholder sharing.

What is the best way to visualize API dependency lists for stakeholders?

Visualizing API dependency lists is best achieved by generating a dynamic, styled HTML report that embeds formatted data and diagrams. This approach transforms lengthy text outputs into an interactive, browser-viewable format easily shared with stakeholders.

Does genpage work with Mermaid and Chart.js for rendering visual components?

Yes, the report generation skill works with Mermaid, Chart.js, and Tailwind CSS to render visual components effectively. These libraries are required to embed charts, diagrams, and styled formatted data into the final interactive HTML outputs.

Can I generate interactive charts from tabular AI outputs without external dependencies?

Generating interactive charts from tabular AI outputs requires external dependencies like Mermaid, Chart.js, and Tailwind CSS. These frameworks are necessary to render the visual components and styled formatting within the self-contained HTML report.

When do I need to generate a self-contained HTML report from AI outputs?

You need to generate a self-contained HTML report from AI outputs when working with data summaries, dependency analysis, or audit reports that require interactive visualization. This enables complex structured data like tables and metrics to be easily shared and viewed across various workflows.

How to create an audit report from comparative AI generated metrics?

To create an audit report from comparative AI generated metrics, you process the structured output through a visualization skill that detects grouped sections and comparative data. It dynamically styles the data and embeds diagrams into an interactive HTML format for stakeholder review.