name	dst-report-template
description	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.

DST Report Generator

Create professional HTML reports from DST research analysis.

Report Types

Single Comprehensive Report - All findings in one document
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/chart.js@4.4.0/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:

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)
Assemble report:
- Fill main template with metadata
- Add executive summary
- Insert content sections
- Embed charts from dst-visualization
- List data sources
Generate filename:
- Pattern: dst_research_[topic]_[YYYYMMDD_HHMMSS].html
- Example: dst_research_ev_trends_20250130_143022.html
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:

Create index report listing all sub-reports
Generate focused reports per analysis area
Use consistent styling across all reports
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.

dst-report-template

Install Skill

SKILL.md