skills.rest
OliverOuyang
OliverOuyangCOMMUNITY
Explore all skills by this author →
GitHub

html-report-framework

Generate responsive HTML reports from data and templates with PDF export.

1|Updated Apr 1, 2026
Search Tags:#templates#html#responsive-design#data-visualization#report-generation#pdf-export#chartjs
One-click install
npx skills add https://github.com/OliverOuyang/shuhe-work-skills --skill html-report-framework
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-report-framework
Source: https://github.com/OliverOuyang/shuhe-work-skills/tree/main/skills/html-report-framework
Command: npx skills add https://github.com/OliverOuyang/shuhe-work-skills --skill html-report-framework

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Convert raw data and visualization assets into well-designed, responsive HTML reports that are optimized for on-screen review and printable PDF export, reducing manual layout work and common rendering errors.

Core Features & Use Cases

  • Template-driven styling: PPT-like section templates, themeable color palettes, and font hierarchy for consistent report appearance.
  • Data-driven content generation: Markdown-to-HTML conversion, automated conclusion text generation, and data-backed chart configuration.
  • Layout & chart engine: Automatic chart type detection, adaptive single/dual/mixed chart layouts, responsive spacing, and print/PDF optimizations.
  • Diagnostics & fixes: Troubleshooting checklist, resource path fixes, initialization timing patterns, and data source unification guidance.
  • Use Case: Produce a monthly KPI report with dozens of charts, export a print-ready PDF, and ensure charts render correctly across devices and browsers.

Quick Start

Use the html-report-framework skill to generate a responsive, print-ready HTML report from my data.json using the ppt theme and export it to PDF.

Frequently Asked Questions about html-report-framework

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

FAQPage Schema
How do I convert raw JSON data into a responsive HTML report?▼

You can generate a responsive HTML report from JSON data by applying template-driven styling, Markdown-to-HTML conversion, and automated chart type detection to produce a polished, print-ready document.

What is the best way to export an HTML report to a print-ready PDF without breaking charts?▼

To export a print-ready PDF without breaking charts, use a framework featuring print/PDF optimizations, responsive spacing, and initialization timing patterns that ensure charts render correctly across devices and browsers.

Does Chart.js work with automated HTML report generation for dashboards?▼

Chart.js works with automated HTML report generation by leveraging data-backed chart configuration, automatic chart type detection, and adaptive single/dual/mixed chart layouts for data-driven dashboards.

Why do my charts render incorrectly when converting data to an HTML report?▼

Charts render incorrectly during HTML report generation due to initialization timing issues or resource path errors, which you can resolve using diagnostic troubleshooting checklists and data-source unification guidance.

Can I generate automated conclusion text for my data-driven HTML report?▼

You can generate automated conclusion text for a data-driven HTML report by using a data-driven content generation engine that converts Markdown to HTML and outputs data-backed narrative summaries.

Related Skills

Explore More Data & Analytics Skills→
meirmmeirm
13

data-analysis

Clean datasets, compute statistics, and generate visualizations with Python libraries.

Community
Advanced
RamanEbrahimiRamanEbrahimi
3

pptx-posters

Generate research posters with HTML/CSS and export to PDF or PPTX.

Community
Intermediate
Li-Bai-GOATLi-Bai-GOAT

chartjs-generator

Generate interactive charts with Chart.js for web applications.

Community
Intermediate
Aken-TeamsAken-Teams

Interactive Web Page Generator

Generate a self-contained HTML dashboard with inline charts and CDN libraries.

Official
Advanced