# Blog Generator > Generates a self-contained, deeply-technical "deep dive" blog post as a single offline-capable HTML file — AstroPaper aesthetic, light/dark toggle, Mermaid diagrams (CDN), Shiki syntax highlighting (CDN ESM). Use when the user types "$blog" or "$blog-post", asks to "write a blog post", "deep dive blog", "generate a blog post about how X works", "explain X in a blog post so I can rebuild it", "in-depth post about", or wants a long-form publishable HTML article reverse-engineering a codebase, library, or architecture (not a quick summary, not an interactive walkthrough). - Skill: `alexanderop/blog-generator` (Agent Skill, multi-file: 8 files) - Install (CLI): `npx skillmds@latest add alexanderop/blog-generator` - Raw SKILL.md: https://api.skillmd.com/api/skills/alexanderop/blog-generator/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: alexanderop (https://skillmd.com/u/alexanderop) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/alexanderop/blog-generator --- # Blog Post Generator (Deep-Dive HTML) Generate a single self-contained HTML blog post that explains how a codebase, library, or architecture works in enough depth that a motivated reader could rebuild it. AstroPaper aesthetic: mono font, skin-token colors, sun/moon toggle, accent headings, card code blocks. **CRITICAL**: When triggered, you MUST produce a `blog-{slug}.html` file at the project root. Never respond with prose only. **Defaults to dark theme.** The `` tag MUST start with `class="dark"`. Light mode works via the toggle and `prefers-color-scheme`. ## Workflow ### Step 1 — Scope Three common shapes: | Shape | Example prompt | |-------|----------------| | **Library/SDK deep-dive** | "Explain how this agent SDK works so I can rebuild it" | | **Architecture write-up** | "Write a blog post about how the build pipeline is organized" | | **Mechanism explainer** | "How does the schema-to-tool injection trick work" | If `$blog` is used **with no topic**, generate a deep dive of the **entire current repo** — the user is in a codebase and wants the architecture written up. If the prompt is vague (and not a bare `$blog`), ask one clarifying question. Otherwise proceed. Targets: **12–18 sections, 1,500–3,000 words**, reverse-engineering oriented (cite real files, quote real signatures), ending in an 8–12 step rebuild plan. ### Step 2 — Explore the codebase with parallel subagents **Always read real source before writing.** Never fabricate APIs, file paths, or function names. 1. Do a quick orientation yourself (2–4 `Glob`/`Grep`/`Read` calls max) to find entry points: README, top-level package, `src/index`, directory layout. 2. Use that to split exploration into **3–6 independent slices**. 3. Launch all Explore subagents **in a single message** so they run in parallel: ``` Task(subagent_type="Explore", description="…", prompt="…") ``` 4. Each subagent returns a structured note in the format defined in `references/subagent-report-format.md`. 5. Once they return, **stop reading files** and move to Step 3. ### Step 3 — Outline Produce a section list before writing HTML. The canonical 12–15 section recipe lives in `references/content-structure.md` (mental model → layered architecture → core abstraction → implementations → main loop → config assembly → clever subsystem → orthogonal feature → second clever bit → roles/precedence → resource management → build pipeline → persistence → rebuild plan → closing). Use **Mermaid for diagrams** at three points minimum: layered architecture (flowchart), main loop (sequenceDiagram), the cleverest subsystem (flowchart). ### Step 4 — Generate the HTML 1. **Copy the template** to the project root, named `blog-{slug}.html` (kebab-case slug): ```bash cp .claude/skills/blog-generator/assets/blog-template.html blog-{slug}.html ``` (If installed at a different path, adjust accordingly. The asset is under `/assets/blog-template.html`.) 2. **Fill the placeholders** in the copied file: `{{POST_TITLE}}`, `{{LEDE}}`, `{{KICKER}}`, `{{READ_MIN}}`, `{{SLUG}}`, `{{BRAND}}`, `{{FOOTER}}`. 3. **Add TOC entries** under `