# Skill 023
> A skill for creating dynamic HTML reports from JSON data, allowing users to visualize data in a web format with styling and structure.
- Skill: `legendtkl/skill-023` (Agent Skill)
- Install (CLI): `npx skillmds@latest add legendtkl/skill-023`
- Raw SKILL.md: https://api.skillmd.com/api/skills/legendtkl/skill-023/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Proprietary. LICENSE.txt has complete terms
- Author: legendtkl (https://skillmd.com/u/legendtkl)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/legendtkl/skill-023
---
# HTML Report Generator
## Overview
The HTML Report Generator skill enables users to convert JSON data into a structured and styled HTML report. This can be helpful for creating dashboards or reports that need to be shared in a web-friendly format.
## Workflow Decision Tree
### Generating HTML Reports
Use the "Creating a new HTML report" workflow below.
## Creating a New HTML Report
To generate an HTML report, you can use a simple templating engine like Handlebars.js to create a visually appealing report.
### Sample Code
Here is a basic example of how to create an HTML report:
```javascript
const fs = require('fs');
const Handlebars = require('handlebars');
// Sample JSON data
const data = {
title: 'Monthly Sales Report',
sales: [
{ product: 'Widget A', amount: 300 },
{ product: 'Widget B', amount: 450 },
],
};
// HTML template
const template = `
{{title}}
{{title}}
{{#each sales}}- {{product}}: {{amount}}
{{/each}}
`;
// Compile the template
const compiledTemplate = Handlebars.compile(template);
// Generate the HTML report
const html = compiledTemplate(data);
// Write the HTML report to a file
fs.writeFileSync('report.html', html);
```
## Conclusion
The HTML Report Generator skill provides a straightforward way to visualize and present JSON data in an accessible HTML format, making it ideal for web-based reporting.