Generate HTML research reports with embedded data, charts, and analysis. Use when creating final research deliverables. Supports single comprehensive reports or multiple focused reports. Handles styling, structure, and output to reports/ directory.
Create professional HTML reports from DST research analysis.
The dst-research-analyst agent decides which type based on scope.
<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{REPORT_TITLE}}</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
line-height: 1.6;
color: #333;
background: #f5f5f5;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
padding: 40px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-radius: 8px;
}
header {
border-bottom: 3px solid #003c78;
padding-bottom: 20px;
margin-bottom: 30px;
}
h1 {
color: #003c78;
font-size: 2.5em;
margin-bottom: 10px;
}
.metadata {
color: #666;
font-size: 0.9em;
}
.metadata span {
margin-right: 20px;
}
h2 {
color: #003c78;
font-size: 1.8em;
margin-top: 40px;
margin-bottom: 15px;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 10px;
}
h3 {
color: #004d99;
font-size: 1.3em;
margin-top: 25px;
margin-bottom: 10px;
}
p {
margin-bottom: 15px;
text-align: justify;
}
.data-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 0.95em;
}
.data-table thead {
background: #003c78;
color: white;
}
.data-table th,
.data-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.data-table tbody tr:nth-child(even) {
background: #f9f9f9;
}
.data-table tbody tr:hover {
background: #f0f0f0;
}
.insight-box {
background: #e8f4f8;
border-left: 4px solid #4bc0c0;
padding: 15px 20px;
margin: 20px 0;
border-radius: 4px;
}
.insight-box h4 {
color: #003c78;
margin-bottom: 8px;
}
.warning-box {
background: #fff3cd;
border-left: 4px solid #ff9f40;
padding: 15px 20px;
margin: 20px 0;
border-radius: 4px;
}
.chart-section {
margin: 30px 0;
padding: 20px;
background: #fafafa;
border-radius: 8px;
}
.sources {
margin-top: 50px;
padding-top: 20px;
border-top: 2px solid #e0e0e0;
font-size: 0.9em;
color: #666;
}
.sources h3 {
color: #003c78;
font-size: 1.1em;
}
.sources ul {
list-style: none;
padding-left: 0;
}
.sources li {
margin-bottom: 8px;
padding-left: 20px;
position: relative;
}
.sources li:before {
content: "→";
position: absolute;
left: 0;
color: #003c78;
}
footer {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #e0e0e0;
text-align: center;
color: #999;
font-size: 0.85em;
}
@media print {
body {
background: white;
padding: 0;
}
.container {
box-shadow: none;
padding: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>{{REPORT_TITLE}}</h1>
<div class="metadata">
<span><strong>Generated:</strong> {{TIMESTAMP}}</span>
<span><strong>Data Source:</strong> Danmarks Statistik</span>
<span><strong>Tables Used:</strong> {{TABLE_COUNT}}</span>
</div>
</header>
<section class="executive-summary">
<h2>Executive Summary</h2>
{{EXECUTIVE_SUMMARY}}
</section>
{{CONTENT_SECTIONS}}
<section class="sources">
<h3>Data Sources</h3>
<ul>
{{DATA_SOURCES}}
</ul>
</section>
<footer>
<p>Generated by DST Research Analyst | Claude Code</p>
<p>Data retrieved from Danmarks Statistik (DST) API | Analysis performed using DuckDB</p>
</footer>
</div>
<!-- Charts will be rendered here -->
{{CHART_SCRIPTS}}
</body>
</html>
<section>
<h2>{{SECTION_TITLE}}</h2>
{{SECTION_CONTENT}}
<!-- Optional: Data table -->
{{DATA_TABLE}}
<!-- Optional: Chart -->
<div class="chart-section">
<h3>{{CHART_TITLE}}</h3>
{{CHART_HTML}}
</div>
<!-- Optional: Insights -->
<div class="insight-box">
<h4>Key Insights</h4>
{{INSIGHTS}}
</div>
</section>
<table class="data-table">
<thead>
<tr>
{{TABLE_HEADERS}}
</tr>
</thead>
<tbody>
{{TABLE_ROWS}}
</tbody>
</table>
When dst-research-analyst invokes you:
Receive analysis results:
Assemble report:
Generate filename:
dst_research_[topic]_[YYYYMMDD_HHMMSS].htmldst_research_ev_trends_20250130_143022.htmlWrite to disk:
/Users/mikkelfreltoftkrogsholm/Projekter/dst_skills/reports/If agent decides on multiple reports:
<section class="report-index">
<h2>Research Components</h2>
<p>This research is divided into the following focused reports:</p>
<ul>
<li><a href="{{REPORT_1_FILENAME}}">{{REPORT_1_TITLE}}</a> - {{REPORT_1_DESCRIPTION}}</li>
<li><a href="{{REPORT_2_FILENAME}}">{{REPORT_2_TITLE}}</a> - {{REPORT_2_DESCRIPTION}}</li>
</ul>
</section>
If reports/ directory doesn't exist:
import os
os.makedirs('/Users/mikkelfreltoftkrogsholm/Projekter/dst_skills/reports', exist_ok=True)
Remember: You create the HTML structure, dst-visualization provides the chart HTML, agent provides the analysis text.