atlas-present
Generate a polished HTML presentation page and Obsidian Canvas for big releases — new products, takeovers, major migrations. Non-technical audience. Use when asked to "present this", "release announcement", "show what we built", or "stakeholder update".
What this skill does
# 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. Never dump analysis to CLI.
Related in Web Dev
generating-lwc-components
IncludedLightning Web Components with PICKLES methodology and 165-point scoring. Use this skill when the user creates or edits LWC components, builds wire service patterns, or writes Jest tests for LWC. TRIGGER when: user creates/edits LWC components, touches lwc/**/*.js, .html, .css, .js-meta.xml files, or asks about wire service, SLDS, or Jest LWC tests. DO NOT TRIGGER when: Apex classes (use generating-apex), Aura components, or Visualforce.
tanstack-query
IncludedManage server state in React with TanStack Query v5. Set up queries with useQuery, mutations with useMutation, configure QueryClient caching strategies, implement optimistic updates, and handle infinite scroll with useInfiniteQuery. Use when: setting up data fetching in React projects, migrating from v4 to v5, or fixing object syntax required errors, query callbacks removed issues, cacheTime renamed to gcTime, isPending vs isLoading confusion, keepPreviousData removed problems.
document-processor-api
IncludedProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
nutrient-document-processing
IncludedProcess documents with Nutrient DWS. Use when the user wants to generate PDFs from HTML or URLs, convert Office/images/PDFs, assemble or split packets, OCR scans, extract text/tables/key-value pairs, redact PII, watermark, sign, fill forms, optimize PDFs, or produce compliance outputs like PDF/A or PDF/UA. Triggers include convert to PDF, merge these PDFs, OCR this scan, extract tables, redact PII, sign this PDF, make this PDF/A, or linearize for web delivery.
tanstack-query
IncludedManage server state in React with TanStack Query v5. Covers useMutationState, simplified optimistic updates, throwOnError, network mode (offline/PWA), and infiniteQueryOptions. Use when setting up data fetching, fixing v4→v5 migration errors (object syntax, gcTime, isPending, keepPreviousData), or debugging SSR/hydration issues with streaming server components.
accelint-nextjs-best-practices
IncludedNext.js performance optimization and best practices. Use when writing Next.js code (App Router or Pages Router); implementing Server Components, Server Actions, or API routes; optimizing RSC serialization, data fetching, or server-side rendering; reviewing Next.js code for performance issues; fixing authentication in Server Actions; or implementing Suspense boundaries, parallel data fetching, or request deduplication.