# Investigation Report Generator

> Generate comprehensive HTML investigation dossiers with dark theme, interactive navigation, timelines, network diagrams, and evidence cards Use when this capability is needed.

- Skill: `tomevault-io/investigation-report-generator` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/investigation-report-generator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/investigation-report-generator/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/investigation-report-generator

---


# Investigation Report Generator

Generate a self-contained HTML investigation dossier. These reports feature a dark theme with gold accents, sticky navigation, collapsible sections, and responsive layouts.

## Workflow

1. **Copy the template**: Start from `assets/report-template.html`
2. **Customize the hero section**: Replace `{{TITLE}}`, `{{SUBTITLE}}`, `{{BADGE}}`, and hero stats
3. **Populate sections**: Use components from `references/component-library.md` to build each section
4. **Update navigation**: Add section anchors to the sticky `<nav class="toc">` bar
5. **Update footer**: Replace `{{FOOTER_TEXT}}` with investigation metadata

## Available Components

See `references/component-library.md` for copy-paste HTML snippets:

- **Hero section** with badge, title, subtitle, and stat counters
- **Sticky table of contents** navigation bar
- **Section headers** with part numbers and accent-colored titles
- **Cards** (accent, red, blue, green variants) for key findings
- **Data tables** with hover effects and sortable columns
- **Timeline** with dated entries and vertical connector line
- **Flow diagrams** with node boxes and arrows
- **Network boxes** for ASCII relationship maps
- **Callouts** (gold accent or red warning)
- **Verdict badges** (red, orange) for assessments
- **Tags** (active, cancelled, review, operational, stalled, disputed)
- **Collapsible details** sections for supplementary evidence
- **Grid layouts** (2-column and 3-column, responsive)

## CSS Variables

The template uses CSS custom properties for consistent theming:

```css
--bg-primary: #0a0a0f      /* Page background */
--bg-secondary: #12121a    /* Nav background */
--bg-card: #1a1a2e         /* Card background */
--bg-highlight: #16213e    /* Highlighted elements */
--text-primary: #e0e0e0    /* Main text */
--text-secondary: #a0a0b0  /* Secondary text */
--text-muted: #6a6a7a      /* Muted labels */
--accent: #c9a84c          /* Gold accent */
--accent-dim: #8a6d2b      /* Dim gold */
--red: #e74c3c             /* Alert/danger */
--green: #27ae60           /* Success/verified */
--blue: #3498db            /* Info */
--orange: #e67e22          /* Warning */
--purple: #9b59b6          /* Special */
--border: #2a2a3e          /* Subtle borders */
--border-accent: #3a3a5e   /* Accent borders */
```

## Guidelines

- Keep reports self-contained (single HTML file, no external dependencies)
- Use semantic section IDs for navigation anchors
- Include a sticky table of contents for long reports
- Use cards for key findings, tables for structured data, timelines for chronology
- Apply appropriate tag colors for status indicators
- Use collapsible `<details>` for supplementary evidence to keep the report scannable
- All text content should be factual and evidence-based

---
> Source: [swarochish/journalism-toolkit](https://github.com/swarochish/journalism-toolkit) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-06-20 -->