Skill2.4k repo starsupdated today

atlas-present

atlas-present generates a single-page HTML presentation and Obsidian Canvas summarizing technical work for non-technical stakeholders. Use it when announcing major releases, new products, migrations, or major feature launches where you need to translate engineering accomplishments into business impact and clear outcomes. The skill structures narratives around stakeholder questions (what/why/how), uses outcome-focused language without jargon, and produces a scrollable page with feature cards, before/after comparisons, and simplified architecture diagrams.

View source Repository: claude-code-plugins-plus-skills

Install in Claude Code

Copy

git clone --depth 1 https://github.com/jeremylongshore/claude-code-plugins-plus-skills /tmp/atlas-present && cp -r /tmp/atlas-present/plugins/ai-agency/tonone/skills/atlas-present ~/.claude/skills/atlas-present

Then start a new Claude Code session; the skill loads automatically.

Definition

SKILL.md

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

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

```css
: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:**

```html
<!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:**

```json
{
  "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

1. Save HTML to `.presentations/{YYYY-MM-DD}-{kebab-title}/index.html`
2. Save Canvas to `.presentations/{YYYY-MM-DD}-{kebab-title}/{kebab-title}.canvas`
3. Create the directory if it does not exist
4. 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