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.
git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace /tmp/atlas-report && cp -r /tmp/atlas-report/plugins/ai-agency/tonone/skills/atlas-report ~/.claude/skills/atlas-reportSKILL.md
# 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
4. **Metrics** — tables, comparisons, scores, counts (e.g., dependency counts, coverage percentages, cost breakdowns)
5. **Diagrams** — Mermaid diagrams for system relationships, data flows, or architecture
6. **Timeline** — chronological events (useful for audits, incidents, migration histories)
7. **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:**
```css
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:**
```css
: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:**
```css
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:**
```css
.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:**
```html
<!DOCTYPGuard the beads execution record: enforce the write-flush-verify discipline that defeats the bd rapid-write race, audit epic dependency graphs for cycles and orphans, catch closures whose title overstates what shipped, flag open beads carrying no disposition or a disproven premise, and reconcile bd against its GitHub and Plane projections. Owns RECORD INTEGRITY; delegates graph analysis to bead-dependency-mapper and epic-closure drift to bead-epic-auditor rather than duplicating them. Use before closing an epic, after any batch of bd writes, when a bead premise looks stale, or when auditing whether the record matches reality. Trigger with "audit beads", "check the bead DAG", "did that close actually land", "bead hygiene".
Verify every factual assertion in a diff, PR body, commit message, bead note, or governing doc against the actual repository, and fail anything that cannot be substantiated by a command. Use before merging any PR that makes claims about counts, coverage, consumers, enforcement, provenance, or certification, and when auditing standing docs for rot. Trigger with "verify claims", "check this PR body", "is this claim true", "claim audit".
Design and build Omarchy (Quickshell/QML) bar-widget, panel, and service plugins that actually work on a stock install. Knows the hard runtime constraint (no node on the graphical session PATH), the first-party contracts (BarWidget, Panel, KeyboardPanel, PanelKeyCatcher, Service), the curl-from-QML data pattern, FileView persistence, and the marketplace submission bar. Use when starting a new Omarchy plugin, porting a plugin off an external runtime, wiring a service to a bar widget, or deciding how a widget should fetch and persist. Trigger with "build an omarchy plugin", "omarchy widget", "quickshell plugin", "port this plugin to QML".
Audit an Omarchy plugin before it reaches the marketplace: prove it installs and runs on a stock box (no node/python on the session PATH), run the omarchy-submit gate lane, validate on the rig with omarchy-plugin-validate and qmllint, and check the QML security invariants and first-party idiom contracts. Read-only: it reports and blocks, it does not rewrite the plugin. Use before submitting an entry, after any data-layer change, or when a plugin works on the dev box and you need to know whether it works for a real user. Trigger with "audit this omarchy plugin", "is this plugin submission ready", "will this plugin work when installed".
Audit and fix Claude Code SKILL.md files against enterprise compliance standards: frontmatter completeness, required body sections, and style. Use when validating or repairing skills in a plugin directory. Trigger with "audit skill", "fix skill compliance".
Learn how SKILL.md files work in Claude Code plugins, then build a production-quality agent skill from scratch. Covers frontmatter schema, body structure, testing, and iteration.
Step-by-step guide to writing a SKILL.md file for Claude Code. Learn how to plan, structure, and test auto-activating skills with proper frontmatter, allowed-tools, dynamic context injection, and supporting files.
|