DST Report Generator

DST Report Generator

Create professional HTML reports from DST research analysis.

Report Types

1. Single Comprehensive Report - All findings in one document
2. Multiple Focused Reports - Separate files per analysis area

The dst-research-analyst agent decides which type based on scope.

HTML Report Template

<!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 Templates

Content Section

<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>

Data Table

<table class="data-table">
  <thead>
    <tr>
      {{TABLE_HEADERS}}
    </​tr>
  </​thead>
  <tbody>
    {{TABLE_ROWS}}
  </​tbody>
</​table>

Usage Flow

When dst-research-analyst invokes you:

1. Receive analysis results:

   • Executive summary
   • Section content (text analysis)
   • Data tables (from SQL queries)
   • Charts (from dst-visualization skill)
   • Data sources (table IDs and descriptions)

2. Assemble report:

   • Fill main template with metadata
   • Add executive summary
   • Insert content sections
   • Embed charts from dst-visualization
   • List data sources

3. Generate filename:

   • Pattern: dst_research_[topic]_[YYYYMMDD_HHMMSS].html
   • Example: dst_research_ev_trends_20250130_143022.html

4. Write to disk:

   • Path: /​Users/​mikkelfreltoftkrogsholm/​Projekter/​dst_skills/​reports/
   • Use Write tool
   • Return absolute path to user

Multiple Reports

If agent decides on multiple reports:

1. Create index report listing all sub-reports
2. Generate focused reports per analysis area
3. Use consistent styling across all reports
4. Include navigation links between reports

Index Report Template

<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>

Best Practices

• Use descriptive section titles
• Include both data tables and visualizations
• Highlight key insights in insight boxes
• Cite all DST tables used
• Add timestamps for data freshness
• Use consistent terminology
• Make reports print-friendly
• Include executive summary for quick overview

Error Handling

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.