| name | html-report |
| description | Generates professional HTML5 research reports with semantic structure, CSS styling, embedded images, charts, tables, and responsive layout. |
| version | 1.0.0 |
| tags | ["report","html","output"] |
HTML Report Skill
Overview
This skill teaches how to generate professional, visually rich research reports using semantic HTML5 + inline CSS. It replaces plain markdown output with structured, styled content that supports embedded images, SVG charts, styled tables, callout boxes, and responsive layout.
When to Use This Skill
report_format is set to "html" in configuration- User explicitly requests "HTML report" or "rich report format"
- Report would benefit from embedded images, charts, or styled data tables
- The research findings include visual data that markdown cannot adequately present
Core Principle
Content first, style second. The HTML structure should be semantic and clean. CSS enhances readability but should never distract from the information. Every visual element (image, chart, styled table) must add information value — decoration has no place in a research report.
HTML Document Structure
Generate a complete, standalone HTML fragment (no <html>, <head>, or <body> — the platform wraps these):
<style>
</style>
<article class="research-report">
<header class="report-header">
<h1>Report Title</h1>
<div class="report-meta">
<span class="date">Generated: YYYY-MM-DD</span>
<span class="classification">Type: Research Analysis</span>
</div>
</header>
<section class="executive-summary">
<h2>Executive Summary</h2>
</section>
<section>
<h2>Section Title</h2>
</section>
<section class="sources">
<h2>Sources</h2>
</section>
</article>
CSS Template
Always include this base CSS in a <style> block at the start of the output:
.research-report {
max-width: 860px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans SC', sans-serif;
line-height: 1.75;
color: #1a1a1a;
padding: 1em 0;
}
.research-report h1 {
font-size: 2em;
border-bottom: 3px solid #2563eb;
padding-bottom: 0.3em;
margin-bottom: 0.3em;
color: #111827;
}
.research-report h2 {
font-size: 1.5em;
border-bottom: 1px solid #e5e7eb;
padding-bottom: 0.2em;
margin-top: 1.5em;
color: #1f2937;
}
.research-report h3 {
font-size: 1.2em;
margin-top: 1.2em;
color: #374151;
}
.research-report p { margin: 0.8em 0; }
.research-report a { color: #2563eb; text-decoration: none; }
.research-report a:hover { text-decoration: underline; }
.research-report .report-header {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #e5e7eb;
}
.research-report .report-meta {
font-size: 0.85em;
color: #6b7280;
display: flex; gap: 1.5em; flex-wrap: wrap;
}
.research-report .report-meta span { display: inline-block; }
.research-report .callout {
padding: 1em 1.2em;
margin: 1em 0;
border-radius: 6px;
border-left: 4px solid;
}
.research-report .callout-summary {
background: #eff6ff;
border-color: #2563eb;
}
.research-report .callout-warning {
background: #fef3c7;
border-color: #f59e0b;
}
.research-report .callout-insight {
background: #f0fdf4;
border-color: #16a34a;
}
.research-report figure {
margin: 1.5em 0;
text-align: center;
}
.research-report figure img,
.research-report figure svg {
max-width: 100%;
height: auto;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.research-report figcaption {
font-size: 0.88em;
color: #6b7280;
margin-top: 0.5em;
font-style: italic;
}
.research-report .table-wrapper {
overflow-x: auto;
margin: 1.2em 0;
}
.research-report table {
width: 100%;
border-collapse: collapse;
font-size: 0.95em;
}
.research-report thead th {
background: #f3f4f6;
font-weight: 600;
text-align: left;
padding: 10px 14px;
border-bottom: 2px solid #d1d5db;
white-space: nowrap;
}
.research-report tbody td {
padding: 9px 14px;
border-bottom: 1px solid #e5e7eb;
vertical-align: top;
}
.research-report tbody tr:hover { background: #f9fafb; }
.research-report td.highlight {
background: #fef3c7;
font-weight: 600;
}
.research-report td.positive { color: #16a34a; font-weight: 600; }
.research-report td.negative { color: #dc2626; font-weight: 600; }
.research-report .citation { font-size: 0.85em; color: #6b7280; }
.research-report sup a {
font-size: 0.75em;
color: #2563eb;
text-decoration: none;
padding: 0 2px;
}
.research-report .sources {
margin-top: 2em;
padding-top: 1em;
border-top: 2px solid #e5e7eb;
font-size: 0.9em;
}
.research-report .sources ol { padding-left: 1.5em; }
.research-report .sources li { margin-bottom: 0.3em; }
@media (max-width: 640px) {
.research-report { padding: 0.5em; }
.research-report h1 { font-size: 1.5em; }
.research-report table { font-size: 0.85em; }
}
Image Embedding
Web-sourced images (from extract_web_images)
Use the placeholder syntax — these will be replaced by the platform with actual base64 data:
The platform will replace this with:
<figure>
<img src="data:image/png;base64,..." alt="Chart from example.com">
<figcaption>Source: example.com</figcaption>
</figure>
SVG Charts (from chart-visualization skill)
Inline SVG can be embedded directly in the HTML. When research data calls for charts:
- Identify the data that would benefit from visualization
- Add a placeholder comment:
<!-- CHART: data description for chart generation -->
- The platform will replace it with rendered SVG
Best Practices for Image Placement
Table Patterns
Comparison Table
<div class="table-wrapper">
<table>
<thead>
<tr><th>Dimension</th><th>Option A</th><th>Option B</th></tr>
</thead>
<tbody>
<tr><td>Cost</td><td>$100/mo</td><td class="highlight">$75/mo</td></tr>
<tr><td>Performance</td><td class="positive">High</td><td>Medium</td></tr>
</tbody>
</table>
</div>
Data Table with Trend Indicators
<div class="table-wrapper">
<table>
<thead><tr><th>Quarter</th><th>Revenue</th><th>YoY Growth</th></tr></thead>
<tbody>
<tr><td>Q1</td><td>$20B</td><td class="positive">+45%</td></tr>
<tr><td>Q2</td><td>$24B</td><td class="positive">+52%</td></tr>
</tbody>
</table>
</div>
Quality Checklist
Before finalizing an HTML report:
Common Mistakes to Avoid
- ❌ Outputting markdown inside HTML (e.g.,
## heading instead of <h2>heading</h2>)
- ❌ Using inline styles excessively — prefer the CSS classes defined in the template
- ❌ Forgetting the
<style> block at the top
- ❌ Using fixed pixel widths — use
max-width: 100% for responsive
- ❌ Embedding huge base64 images inline — use placeholders instead
- ❌ Over-styling to the point of distraction — reports should be clean and professional
- ❌ Missing citations — HTML reports need citations just as much as markdown
Output Notes
- The output is an HTML fragment — the platform wraps it in
<html><body>...</body></html>
- The
<style> block must be the FIRST element in the output
- All content must be inside
<article class="research-report">
- Use semantic HTML5:
<section>, <figure>, <figcaption>, <table>, <blockquote>
