Claude Code LogoVibe Coding Guide
Back to All Skills

Dst Report Template

by mikkelkrogsholm

template
View on GitHub

|

Skill Details

Repository Files

1 file in this skill directory

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

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

  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.

View on GitHub

Related Skills

Infographic Syntax Creator

Generate AntV Infographic syntax outputs. Use when asked to turn user content into the Infographic DSL (template selection, data structuring, theme), or to output `infographic <template>` plain syntax.

templatedata

Infographic Syntax Creator

Generate AntV Infographic syntax outputs. Use when asked to turn user content into the Infographic DSL (template selection, data structuring, theme), or to output `infographic <template>` plain syntax.

templatedata

Report Template Generator

|

template

Report Template Generator

|

template

Datasette Plugin Writer

Guide for writing Datasette plugins. This skill should be used when users want to create or develop plugins for Datasette, including information about plugin hooks, the cookiecutter template, database APIs, request/response handling, and plugin configuration.

templateapidata

Excel Report Generator

Automatically generate Excel reports from data sources including CSV, databases, or Python data structures. Supports data analysis reports, business reports, data export, and template-based report generation using pandas and openpyxl. Activate when users mention Excel, spreadsheet, report generation, data export, or business reporting.

templatedata

Community Sentiment Dashboard

Reporting template for tracking sentiment, risks, and advocacy signals

template

Executive Kpi Briefings

Template pack for summarizing BI insights for ELT/board stakeholders.

template

Charting Vega Lite

Create interactive data visualizations using Vega-Lite declarative JSON grammar. Supports 20+ chart types (bar, line, scatter, histogram, boxplot, grouped/stacked variations, etc.) via templates and programmatic builders. Use when users upload data for charting, request specific chart types, or mention visualizations. Produces portable JSON specs with inline data islands that work in Claude artifacts and can be adapted for production.

arttemplatedata

Superset Dashboard Designer

Expert guidance for designing effective Apache Superset dashboards with professional layouts, intuitive navigation, and optimized user experience. This skill helps you create dashboards that tell clear data stories - with specific templates for Finance SSC, BIR compliance, and operational monitoring.

designtemplatedata

Skill Information

Category:Enterprise
Last Updated:11/3/2025