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.

v0.6.4
tonone-ai
MIT
11 Tools
tonone Plugin
ai agency Category

Allowed Tools

ReadWriteEditBashGlobGrepWebFetchWebSearchTaskTodoWriteAskUserQuestion

Provided by Plugin

tonone

Engineering + Product + Operations + Legal + Design + Data Science + Security Operations + Developer Experience + Infrastructure Specialist + AI Operations team — 100 agents as Claude Code specialists. Infrastructure, DevOps, backend, security, ML/AI, mobile, UX, analytics, growth, revenue, content, PR, customer success, finance, people, operations, support, contracts, compliance, IP, governance, regulatory, color systems, typography, motion, accessibility, design tokens, forecasting, feature engineering, model training, drift monitoring, vector search, LLM fine-tuning, pen testing, detection engineering, incident response, zero trust, API docs, SDK design, developer onboarding, Kubernetes, Terraform, FinOps, service mesh, edge computing, caching, queuing, multi-cloud, chaos engineering, model deployment, LLM evaluation, AI observability, guardrails, prompt engineering, embeddings, ranking, and more.

ai agency v1.8.0
View Plugin

Installation

This skill is included in the tonone plugin:

/plugin install tonone@claude-code-plugins-plus

Click to copy

Instructions

Render HTML Report

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

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

Steps

Step 0: Gather Context

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

  1. Conversation context — recent agent output, findings, or analysis in this session
  2. Explicit request — user specifies a file, skill output, or topic
  3. 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.

  1. Header — agent name, skill name, timestamp, target repo/service
  2. Executive Summary — 3-5 bullet points capturing the key takeaways
  3. Findings — individual findings with:
  • Severity indicator: ■ CRITICAL, ▲ WARNING, or ● INFO
  • Evidence with file paths and line numbers where applicable
  • Recommended fix or action
  1. Metrics — tables, comparisons, scores, counts (e.g., dependency counts, coverage percentages, cost breakdowns)
  2. Diagrams — Mermaid diagrams for system relationships, data flows, or architecture
  3. Timeline — chronological events (useful for audits, incidents, migration histories)
  4. 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
    for verbose data sections
  • Copy button on 
     blocks only — appears on hover, hidden by default. Never on inline  elements — inline code is for reading, not copying
  • 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

Copy button implementation:


pre {
  position: relative;
}
pre .copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
}
pre:hover .copy-btn {
  opacity: 1;
}
pre .copy-btn.copied {
  color: var(--success);
}

CSS design tokens:


:root {
  --bg: #0a0f1e;
  --bg-card: #111827;
  --bg-card-hover: #1a2236;
  --text: #e2e8f0;
  --text-muted: #64748b;
  --border: #1e2d45;
  --border-subtle: #162032;
  --accent: #3b82f6;
  --critical: #ef4444;
  --critical-bg: oklch(20% 0.05 25);
  --warning: #f59e0b;
  --warning-bg: oklch(20% 0.05 80);
  --info: #3b82f6;
  --info-bg: oklch(20% 0.05 240);
  --success: #22c55e;
  --radius: 8px;
  --radius-sm: 4px;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
}
[data-theme="light"] {
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-subtle: #f1f5f9;
  --critical-bg: #fef2f2;
  --warning-bg: #fffbeb;
  --info-bg: #eff6ff;
}

Typography and spacing:


body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
}
h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
h2 {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h3 {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 0.1em 0.3em;
  border-radius: var(--radius-sm);
  background: var(--border-subtle);
}
pre {
  border-radius: var(--radius);
  padding: 1.25rem;
  overflow-x: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
pre code {
  background: none;
  padding: 0;
}

Finding card design — minimal, whitespace-forward:


.finding {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  background: var(--bg-card);
}
.finding-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  text-transform: uppercase;
}
.badge-critical {
  background: var(--critical-bg);
  color: var(--critical);
}
.badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
}
.badge-info {
  background: var(--info-bg);
  color: var(--info);
}
.finding-title {
  font-weight: 600;
  font-size: 0.95rem;
}
.finding-body {
  color: var(--text-muted);
  font-size: 0.875rem;
}
.finding-fix {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.875rem;
}

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

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

Step 4: Present CLI Summary


╭─ 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
  • No Tonone branding — no footer attribution, no "powered by", no agent author credit in the rendered HTML. The report belongs to the repo, not the tool
  • No copy buttons on inline code — copy buttons on 
     blocks only, hover-reveal only. Inline  never gets a copy button

Ready to use tonone?

Related Skills

agency-os

Notion-as-source-of-truth dispatch board for running your work like an AI agency.

ReadWriteEdit

amplify

Use when a prompt is rough, vague, or under-specified and you want it rewritten to high quality before running it.

ReadGlobGrep

apex

Engineering lead — hand Apex any task and it routes internally.

ReadWriteEdit

apex-plan

Plan and scope a project — discovery, challenge assumptions, present S/M/L options with token and cost estimates.

ReadWriteEdit

apex-recon

Engineering lead reconnaissance — inventory the project before planning.

ReadBashGlob

apex-review

Cross-cutting review of recent work — catches gaps between specialists.

ReadWriteEdit