mcpbeat Sign in

Atlas Report Skill for Cursor

by jeremylongshore

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.

2k tokens
context cost
the whole folder, loaded on every use
2
files
instructions only
0
copies elsewhere
how many repositories repackaged it
2679
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/jeremylongshore/tons-of-skills-marketplace --skill atlas-report

What comes with it

461 bytes besides the instruction
.claude-plugin/plugin.json

What it tells the agent to use

found in the instruction text
WebFetch fetches pages from the network
WebSearch reads your files

The instruction itself

8 sections, as written by the author

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

  • 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 verbose data sections
  • Copy button on <pre> blocks only — appears on hover, hidden by default. Never on inline <code> 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

  • 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

╭─ 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 <pre> blocks only, hover-reveal only. Inline <code> never gets a copy button

How to use it

Copy the folder

Take jeremylongshore/atlas-report from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.