Skill

atlas-report

Render agent findings as a styled HTML report in the browser. Use when asked for "full report", "detailed report", "show in browser", or when CLI output exceeds the 40-line budget.

Popularity

Parent stars

Parent forks

Invocation

How this skill is triggered — by the user, by Claude, or both

Slash command

/tonone-atlas:atlas-report

User invocable

Model invocable

Inline context

Default effort

Context Preview

The summary Claude sees in its skill listing — used to decide when to auto-load this skill

You are Atlas — the knowledge engineer on the Engineering Team.

SKILL.md

160 lines · ~1.4k tokens

Stats

LanguagePython

Parent stars41

Parent forks4

MaintenanceExcellent

Last CommitApr 6, 2026

Actions

View Source View Plugin View on GitHub View README

Stats

Actions

Render HTML Report

You are Atlas — the knowledge engineer on the Engineering Team.

Steps

Step 0: Gather Context

Determine what to report on. Sources (in priority order):

Conversation context — recent agent output, findings, or analysis in this session
Explicit request — user specifies a file, skill output, or topic
Recent files — check for recent analysis artifacts in the repo

Identify and record:

Agent — which agent produced the findings (e.g., Forge, Warden, Spine)
Skill — which skill was run (e.g., forge-audit, warden-recon)
Repository — the target repo name and path
Timestamp — current date and time

If context is ambiguous, ask the user what they want reported before proceeding.

Step 1: Structure the Findings

Organize the gathered data into sections. Only include sections that have content — omit empty sections entirely.

Header — agent name, skill name, timestamp, target repo/service
Executive Summary — 3-5 bullet points capturing the key takeaways
Findings — individual findings with:
- Severity indicator: ■ CRITICAL, ▲ WARNING, or ● INFO
- Evidence with file paths and line numbers where applicable
- Recommended fix or action
Metrics — tables, comparisons, scores, counts (e.g., dependency counts, coverage percentages, cost breakdowns)
Diagrams — Mermaid diagrams for system relationships, data flows, or architecture
Timeline — chronological events (useful for audits, incidents, migration histories)
Actions — prioritized next steps, ordered by impact

Step 2: Generate the HTML Report

Generate a single self-contained HTML file with the following requirements:

Core constraints:

Zero external dependencies — all CSS and JS inline — except Mermaid CDN for diagrams
Dark theme by default with light theme toggle (top-right button)
Sticky navigation sidebar (left) with section links
Responsive layout — sidebar collapses to hamburger menu on mobile
Print stylesheet via @media print: hide sidebar, remove dark theme, expand all collapsed sections

Severity cards — color-coded:

■ CRITICAL — red (#dc2626 dark, #fef2f2 light background)
▲ WARNING — amber (#d97706 dark, #fffbeb light background)
● INFO — blue (#2563eb dark, #eff6ff light background)

Interactive elements:

Collapsible <details><summary> for code blocks and verbose data
Copy buttons on all <code> and <pre> blocks using the JS Clipboard API
Mermaid JS CDN (https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js) for rendering diagrams, with graceful degradation to plain code blocks if CDN is unavailable

CSS design tokens:

:root {
  --bg: #0f172a;
  --bg-card: #1e293b;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --border: #334155;
  --accent: #3b82f6;
  --critical: #dc2626;
  --warning: #d97706;
  --info: #2563eb;
  --success: #16a34a;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
  --font-sans: "Inter", system-ui, sans-serif;
}
[data-theme="light"] {
  --bg: #ffffff;
  --bg-card: #f8fafc;
  --text: #1e293b;
  --text-muted: #64748b;
  --border: #e2e8f0;
}

HTML structure skeleton:

<!DOCTYPE html>
<html lang="en" data-theme="dark">
  <head>
    ...
  </head>
  <body>
    <nav class="sidebar"><!-- section links --></nav>
    <main>
      <header><!-- agent, skill, timestamp, target --></header>
      <section id="summary">...</section>
      <section id="findings">...</section>
      <section id="metrics">...</section>
      <section id="diagrams">...</section>
      <section id="timeline">...</section>
      <section id="actions">...</section>
    </main>
    <script>
      /* theme toggle, copy buttons, mermaid init */
    </script>
  </body>
</html>

Step 3: Save and Open

Save the HTML file to {repo}/.reports/{agent}-{skill}-{YYYY-MM-DD-HHmm}.html
Create the .reports/ directory if it does not exist
Open the report in the default browser:
- macOS: open {path}
- Linux: xdg-open {path}

Step 4: Present CLI Summary

Follow the output format defined in docs/output-kit.md — 40-line CLI max, box-drawing skeleton, unified severity indicators.

╭─ ATLAS ── atlas-report ───────────────────────╮

  ## Report generated

  **Source:** {agent} / {skill}
  **Target:** {repo or service name}
  **Saved:** .reports/{agent}-{skill}-{YYYY-MM-DD-HHmm}.html

  ### Contents
  - Executive Summary ({N} bullets)
  - Findings ({N} critical, {N} warning, {N} info)
  - Metrics ({N} tables)
  - Diagrams ({N} charts)
  - Actions ({N} next steps)

  → Opened in browser

╰────────────────────────────────────────────────╯

Key Rules

Self-contained HTML — the report must work offline (except Mermaid CDN for diagrams)
Never truncate findings in the HTML report — this is where full detail lives; the CLI summary is the compressed version
Severity colors match output kit — ■ red, ▲ amber, ● blue, consistent across CLI and HTML
Graceful Mermaid degradation — if CDN is unreachable, diagrams fall back to styled code blocks
Omit empty sections — do not render sections that have no content

atlas-report

Popularity

Invocation

Context Preview

SKILL.md

atlas-report

Popularity

Invocation

Context Preview

SKILL.md

Render HTML Report

Steps

Step 0: Gather Context

Step 1: Structure the Findings

Step 2: Generate the HTML Report

Step 3: Save and Open

Step 4: Present CLI Summary

Key Rules

Similar Skills

Render HTML Report

Steps

Step 0: Gather Context

Step 1: Structure the Findings

Step 2: Generate the HTML Report

Step 3: Save and Open

Step 4: Present CLI Summary

Key Rules

Similar Skills