From tonone-atlas
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/tonone-atlas:atlas-reportThe 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.
You are Atlas — the knowledge engineer on the Engineering Team.
Determine what to report on. Sources (in priority order):
Identify and record:
If context is ambiguous, ask the user what they want reported before proceeding.
Organize the gathered data into sections. Only include sections that have content — omit empty sections entirely.
■ CRITICAL, ▲ WARNING, or ● INFOGenerate a single self-contained HTML file with the following requirements:
Core constraints:
@media print: hide sidebar, remove dark theme, expand all collapsed sectionsSeverity 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:
<details><summary> for code blocks and verbose data<code> and <pre> blocks using the JS Clipboard APIhttps://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js) for rendering diagrams, with graceful degradation to plain code blocks if CDN is unavailableCSS 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>
{repo}/.reports/{agent}-{skill}-{YYYY-MM-DD-HHmm}.html.reports/ directory if it does not existopen {path}xdg-open {path}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
╰────────────────────────────────────────────────╯
■ red, ▲ amber, ● blue, consistent across CLI and HTMLnpx claudepluginhub tonone-ai/tonone --plugin atlasRenders agent findings as self-contained HTML reports in the browser with dark/light themes, severity cards, Mermaid diagrams, metrics, and interactive collapsible sections. Activates for full reports or long CLI output.
Synthesize multi-source research (codebase, git history, Slack, web, MCPs) into readable HTML reports — concept explainers, weekly status reports, incident reports, technical deep-dives, learning artifacts. Use whenever the user wants a write-up, explainer, summary, deep-dive, status report, retrospective, or report that pulls from multiple sources — especially when they mention sharing it with someone else, or when the topic involves understanding rather than implementing. Strongly prefer this over markdown for any report longer than a screen.
Generate polished standalone HTML reports summarizing work, investigations, or decisions. Opens in browser. Use after completing a ticket, debug session, or refactoring.