Skill

atlas-present

Generates single-file HTML presentations with Mermaid diagrams and Obsidian Canvases for release announcements to non-technical stakeholders. Use for 'present this', 'release announcement', or 'show what we built'.

HTML

Popularity

Stars

Forks

Invocation

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

Slash command

/tonone:atlas-present

User invocable

Model invocable

Inline context

Default effort

Tool Access

This skill is limited to the following tools:

ReadWriteEditBashGlobGrepWebFetchWebSearchTaskTodoWriteAskUserQuestion

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. Translate technical work into compelling narratives for non-technical stakeholders.

SKILL.md

213 lines · ~1.6k tokens

Stats

LanguagePython

Stars47

Forks5

MaintenanceExcellent

Last CommitJun 17, 2026

Actions

View Source View Plugin View on GitHub View README

Release Presentation

You are Atlas — the knowledge engineer on the Engineering Team. Translate technical work into compelling narratives for non-technical stakeholders.

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: Determine Scope

From user description, changelogs (.changelog/CHANGELOG.md), git log (--since={date}), or PRs, identify:

Title — the name of the release or feature
Date range — when the work happened
Repos involved — which repositories contributed
Audience — default: non-technical stakeholders

If scope is ambiguous, ask the user before proceeding.

Step 1: Build the Narrative

Structure for non-technical audience. Each section answers a stakeholder question:

Hero — "What is this?" Big title, one-sentence summary
The Problem — "Why did we do this?" What was broken/missing/painful
What We Built — "What can I do now?" 3-5 feature cards, outcome-focused
How It Works — "Is this reliable?" Simplified architecture diagram, no jargon
Before/After — "Did it improve things?" Side-by-side metrics, workflow comparison
Impact — "What are the numbers?" Speed, cost, reliability improvements
What's Next — "What's coming?" 2-3 upcoming items
Team — "Who did this?" Credits

Non-technical writing rules:

No acronyms without explanation
No implementation details
Outcome language: "You can now X" not "We implemented Y"
Numbers over adjectives: "3x faster" not "significantly improved"

Step 2: Generate HTML Presentation

Single scrollable page with section snapping (not slides).

Design:

Single file, zero external deps (except Mermaid CDN)
Large typography: hero 4rem, headings 2rem, body 1.125rem
Generous whitespace: 6rem+ between sections
Section snap scrolling: scroll-snap-type: y mandatory
Feature cards: grid layout, inline SVG icons, subtle border, hover lift
Before/After: two-column with divider
Mermaid diagrams simplified, no technical jargon
Brand-neutral

CSS tokens:

:root {
  --bg: #0a0a0a;
  --bg-card: #141414;
  --text: #fafafa;
  --text-muted: #a1a1aa;
  --border: #27272a;
  --accent: #3b82f6;
  --accent-soft: #1e3a5f;
  --success: #22c55e;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Inter", system-ui, -apple-system, sans-serif;
}

HTML structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <section class="hero">
      <h1>{Title}</h1>
      <p class="subtitle">{summary}</p>
      <time>{Date}</time>
    </section>
    <section class="problem">...</section>
    <section class="built"><!-- feature cards grid --></section>
    <section class="how"><!-- Mermaid diagram --></section>
    <section class="compare"><!-- Before/After --></section>
    <section class="impact"><!-- Impact numbers --></section>
    <section class="next"><!-- What's Next --></section>
    <section class="team"><!-- Credits --></section>
    <script>
      /* Mermaid init, scroll behavior */
    </script>
  </body>
</html>

Step 3: Generate Obsidian Canvas Companion

Generate a JSON Canvas (.canvas) file alongside the HTML.

Canvas structure:

Central node (text, color "6" purple): product/feature name + description
Component nodes arranged radially: green ("4") for new, blue ("6") for modified, no color for unchanged
Group nodes for clusters: Frontend, Backend, Data, Infrastructure
Edges with labels (connection type)
Layout: center at (0,0), groups in quadrants, nodes 300px apart

JSON Canvas format example:

{
  "nodes": [
    {
      "id": "center",
      "type": "text",
      "x": 0,
      "y": 0,
      "width": 400,
      "height": 200,
      "text": "# {Title}\n{summary}",
      "color": "6"
    },
    {
      "id": "group-frontend",
      "type": "group",
      "x": -600,
      "y": -500,
      "width": 500,
      "height": 400,
      "label": "Frontend"
    },
    {
      "id": "comp-1",
      "type": "text",
      "x": -550,
      "y": -400,
      "width": 200,
      "height": 100,
      "text": "**{Component}**\n{description}",
      "color": "4"
    }
  ],
  "edges": [
    {
      "id": "edge-1",
      "fromNode": "comp-1",
      "toNode": "center",
      "fromSide": "right",
      "toSide": "left",
      "label": "REST API"
    }
  ]
}

Step 4: Save and Open

Save HTML to .presentations/{YYYY-MM-DD}-{kebab-title}/index.html
Save Canvas to .presentations/{YYYY-MM-DD}-{kebab-title}/{kebab-title}.canvas
Create the directory if it does not exist
Open the HTML in the default browser:
- macOS: open {path}

Step 5: Present CLI Summary

╭─ ATLAS ── atlas-present ────────────────────╮

  ## Presentation generated

  **Title:** {title}
  **Scope:** {date range or milestone}
  **Repos:** {list of repos involved}

  ### Deliverables
  → .presentations/{dir}/index.html (opened in browser)
  → .presentations/{dir}/{title}.canvas (Obsidian)

  ### Sections
  - Hero, Problem, What We Built ({N} features)
  - How It Works (architecture diagram)
  - Before/After, Impact, What's Next, Team

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

Key Rules

Non-technical audience — no jargon, no implementation details
Outcome language — "You can now X" not "We added Y"
Numbers over adjectives — "3x faster" not "much faster"
Self-contained HTML — offline except Mermaid CDN
Canvas nodes must have meaningful descriptions — not just component names
Omit Before/After if no data — do not fabricate metrics
Manual trigger only — presentations are intentional

Delivery

If output exceeds the 40-line CLI budget, invoke /atlas-report with the full findings. The HTML report is the output. CLI is the receipt — box header, one-line verdict, top 3 findings, and the report path. Never dump analysis to CLI.

atlas-present

Popularity

Invocation

Tool Access

Context Preview

SKILL.md

atlas-present

Popularity

Invocation

Tool Access

Context Preview

SKILL.md

Release Presentation

Steps

Step 0: Determine Scope

Step 1: Build the Narrative

Step 2: Generate HTML Presentation

Step 3: Generate Obsidian Canvas Companion

Step 4: Save and Open

Step 5: Present CLI Summary

Key Rules

Delivery

Similar Skills

Release Presentation

Steps

Step 0: Determine Scope

Step 1: Build the Narrative

Step 2: Generate HTML Presentation

Step 3: Generate Obsidian Canvas Companion

Step 4: Save and Open

Step 5: Present CLI Summary

Key Rules

Delivery

Similar Skills