`. `.prose` begins with everything else. Don't duplicate them in `.prose`. If the H1 is immediately followed by a non-paragraph (list/code/blockquote), omit `
` and start `.prose` there. 3. **★ Escape angle-bracket placeholders.** Literal `<...>` tokens (``, ``, ``, ``, ``, ``, …) and any literal `<`, `>`, `&` MUST become `<`/`>`/`&` — inside text **and** inside ``/``. A bare `` left unescaped renders as an unknown tag and **disappears**. This is the #1 failure to prevent. (If the source has intentional raw HTML, preserve genuine tags but still escape placeholder-style tokens.) 4. **Inline:** `**bold**`→``, `*italic*`/`_x_`→``, `` `code` ``→`` (escaped; never linkify code spans), `[t](u)`→`t`. 5. **Headings:** `##`→``, `###`→``, `####`→``. Give each a GitHub-style slug `id` (lowercase; spaces/underscores→`-`; strip non-`[a-z0-9-]`; collapse repeats) and rewrite intra-doc `[t](#anchor)` links to match, so any TOC works. 6. **Tables** (GFM pipe) → `……`; drop the `|---|` separator row; convert inline Markdown inside every cell. 7. **Fenced code** ```` ```lang … ``` ```` → `…`, contents escaped (rule 3), line breaks preserved; drop the fence/lang markers. ASCII diagrams go in `` verbatim (escaped). 8. **Blockquotes** `> ` → `…`; **lists** → ``/`` (preserve nesting); `---` → ``. 9. **Generated blocks.** If the source wraps a region in `` … ``, render the inner content normally but wrap the whole region in `…` (the theme adds a "generated" badge). Never print the raw comment. 10. **Link rewrite for a themed set.** When other docs in the set are also being rendered, rewrite real Markdown links: `README.md`→`README.html`, `ROLES.md`→`README-ROLES.html`, etc. Leave all other relative paths as-is. Never linkify filenames that appear only inside `` `code` ``. --- ## Mode B — Hub / index (navigator) Render the root README (Mode A rules) **and** add a "Project map" navigator near the top, using the template's `.topic-grid > .node` component (its purpose: page indexes and card grids) — one card per page: title + one-line description. Mark the most important card with the `edge` (accent) variant. Tables (architecture, roadmap) render per Mode A; for a status column, use small mono spans colored with the template's status tokens (`--ok` done / `--warn` in progress / `--ink-faint` planned) — never invent new hues. ## Mode C — Animated teaser (`index.html`) A cinematic, single-screen elevator pitch with a live `` network animation. **Start from `assets/template-teaser.html`** (copy it, fill every `{{PLACEHOLDER}}`, then adapt) — the canvas engine has no equivalent in the shared template, so this asset stays. **Re-theme it to the shared template's slate tokens** (ground / surface / ink / accent) so the teaser and the doc pages read as one product. It already implements: DPR-crisp canvas, a scripted message loop with comet trails + receive-ripples + a status ticker, a `prefers-reduced-motion` static fallback, tab-hidden pause, and a responsive two-column → stacked layout. Adapt: the headline / sub / CTAs (the pitch), the nav + footer links, and — if the project's "network" differs — the `NODES`, `EDGES`, and `SCRIPT` arrays in the inline script (nodes = the entities, edges = who talks to whom, SCRIPT = an ordered story of messages that "finishes a task"). Keep the elevator-pitch discipline: provoke curiosity about **why / what / how**, then link into the deeper pages (the hub + a "why" page). --- ## Verify before declaring done 1. **Render it.** Open in a headless browser, confirm **no console errors**. 2. **No placeholder leaks** (the critical risk): grep the output for bare angle-bracket tokens, e.g. `grep -nE '<(repo|host|url|port|token|path|base|recipient|name|project)[-a-z0-9]*>' out.html` — any hit is a bug (should be `<…>`). 3. **Faithfulness:** every source table/code block/section is present; the title-band hoist didn't drop content; generated regions became `.generated` divs. 4. **Responsive:** check a narrow viewport (≤480px) — content stacks, no horizontal overflow. For the teaser, confirm the reduced-motion fallback renders a static lit network. 5. **Both themes:** check light and dark; the switch cycles Light / Auto / Dark and persists; all pages of a set share one storage key. ## Conventions - **Self-contained:** one `.html` file, CSS + JS inline, graphics inline (SVG/canvas). No external resources; system fonts (the cto template's Google Fonts links are the one sanctioned exception, only when cto was explicitly requested). Don't add libraries. - **English** for all code/markup/comments regardless of conversation language. - A doc page is a *rendering* of its Markdown — keep them in sync: if you change a `.md`, re-render its `.html`. ## Registration This skill is installed by `bin/install` (symlinked to `~/.claude/skills/make-readme-html/`). It's in the install/uninstall `SKILLS` arrays and the README. After install, invoke as `/make-readme-html`.
`/``. A bare `` left unescaped renders as an unknown tag and **disappears**. This is the #1 failure to prevent. (If the source has intentional raw HTML, preserve genuine tags but still escape placeholder-style tokens.) 4. **Inline:** `**bold**`→``, `*italic*`/`_x_`→``, `` `code` ``→`` (escaped; never linkify code spans), `[t](u)`→`t`. 5. **Headings:** `##`→``, `###`→``, `####`→``. Give each a GitHub-style slug `id` (lowercase; spaces/underscores→`-`; strip non-`[a-z0-9-]`; collapse repeats) and rewrite intra-doc `[t](#anchor)` links to match, so any TOC works. 6. **Tables** (GFM pipe) → `……`; drop the `|---|` separator row; convert inline Markdown inside every cell. 7. **Fenced code** ```` ```lang … ``` ```` → `…`, contents escaped (rule 3), line breaks preserved; drop the fence/lang markers. ASCII diagrams go in `` verbatim (escaped). 8. **Blockquotes** `> ` → `…`; **lists** → ``/`` (preserve nesting); `---` → ``. 9. **Generated blocks.** If the source wraps a region in `` … ``, render the inner content normally but wrap the whole region in `…` (the theme adds a "generated" badge). Never print the raw comment. 10. **Link rewrite for a themed set.** When other docs in the set are also being rendered, rewrite real Markdown links: `README.md`→`README.html`, `ROLES.md`→`README-ROLES.html`, etc. Leave all other relative paths as-is. Never linkify filenames that appear only inside `` `code` ``. --- ## Mode B — Hub / index (navigator) Render the root README (Mode A rules) **and** add a "Project map" navigator near the top, using the template's `.topic-grid > .node` component (its purpose: page indexes and card grids) — one card per page: title + one-line description. Mark the most important card with the `edge` (accent) variant. Tables (architecture, roadmap) render per Mode A; for a status column, use small mono spans colored with the template's status tokens (`--ok` done / `--warn` in progress / `--ink-faint` planned) — never invent new hues. ## Mode C — Animated teaser (`index.html`) A cinematic, single-screen elevator pitch with a live `` network animation. **Start from `assets/template-teaser.html`** (copy it, fill every `{{PLACEHOLDER}}`, then adapt) — the canvas engine has no equivalent in the shared template, so this asset stays. **Re-theme it to the shared template's slate tokens** (ground / surface / ink / accent) so the teaser and the doc pages read as one product. It already implements: DPR-crisp canvas, a scripted message loop with comet trails + receive-ripples + a status ticker, a `prefers-reduced-motion` static fallback, tab-hidden pause, and a responsive two-column → stacked layout. Adapt: the headline / sub / CTAs (the pitch), the nav + footer links, and — if the project's "network" differs — the `NODES`, `EDGES`, and `SCRIPT` arrays in the inline script (nodes = the entities, edges = who talks to whom, SCRIPT = an ordered story of messages that "finishes a task"). Keep the elevator-pitch discipline: provoke curiosity about **why / what / how**, then link into the deeper pages (the hub + a "why" page). --- ## Verify before declaring done 1. **Render it.** Open in a headless browser, confirm **no console errors**. 2. **No placeholder leaks** (the critical risk): grep the output for bare angle-bracket tokens, e.g. `grep -nE '<(repo|host|url|port|token|path|base|recipient|name|project)[-a-z0-9]*>' out.html` — any hit is a bug (should be `<…>`). 3. **Faithfulness:** every source table/code block/section is present; the title-band hoist didn't drop content; generated regions became `.generated` divs. 4. **Responsive:** check a narrow viewport (≤480px) — content stacks, no horizontal overflow. For the teaser, confirm the reduced-motion fallback renders a static lit network. 5. **Both themes:** check light and dark; the switch cycles Light / Auto / Dark and persists; all pages of a set share one storage key. ## Conventions - **Self-contained:** one `.html` file, CSS + JS inline, graphics inline (SVG/canvas). No external resources; system fonts (the cto template's Google Fonts links are the one sanctioned exception, only when cto was explicitly requested). Don't add libraries. - **English** for all code/markup/comments regardless of conversation language. - A doc page is a *rendering* of its Markdown — keep them in sync: if you change a `.md`, re-render its `.html`. ## Registration This skill is installed by `bin/install` (symlinked to `~/.claude/skills/make-readme-html/`). It's in the install/uninstall `SKILLS` arrays and the README. After install, invoke as `/make-readme-html`.
`. A bare `` left unescaped renders as an unknown tag and **disappears**. This is the #1 failure to prevent. (If the source has intentional raw HTML, preserve genuine tags but still escape placeholder-style tokens.) 4. **Inline:** `**bold**`→``, `*italic*`/`_x_`→``, `` `code` ``→`` (escaped; never linkify code spans), `[t](u)`→`t`. 5. **Headings:** `##`→``, `###`→``, `####`→``. Give each a GitHub-style slug `id` (lowercase; spaces/underscores→`-`; strip non-`[a-z0-9-]`; collapse repeats) and rewrite intra-doc `[t](#anchor)` links to match, so any TOC works. 6. **Tables** (GFM pipe) → `……`; drop the `|---|` separator row; convert inline Markdown inside every cell. 7. **Fenced code** ```` ```lang … ``` ```` → `…`, contents escaped (rule 3), line breaks preserved; drop the fence/lang markers. ASCII diagrams go in `` verbatim (escaped). 8. **Blockquotes** `> ` → `…`; **lists** → ``/`` (preserve nesting); `---` → ``. 9. **Generated blocks.** If the source wraps a region in `` … ``, render the inner content normally but wrap the whole region in `…` (the theme adds a "generated" badge). Never print the raw comment. 10. **Link rewrite for a themed set.** When other docs in the set are also being rendered, rewrite real Markdown links: `README.md`→`README.html`, `ROLES.md`→`README-ROLES.html`, etc. Leave all other relative paths as-is. Never linkify filenames that appear only inside `` `code` ``. --- ## Mode B — Hub / index (navigator) Render the root README (Mode A rules) **and** add a "Project map" navigator near the top, using the template's `.topic-grid > .node` component (its purpose: page indexes and card grids) — one card per page: title + one-line description. Mark the most important card with the `edge` (accent) variant. Tables (architecture, roadmap) render per Mode A; for a status column, use small mono spans colored with the template's status tokens (`--ok` done / `--warn` in progress / `--ink-faint` planned) — never invent new hues. ## Mode C — Animated teaser (`index.html`) A cinematic, single-screen elevator pitch with a live `` network animation. **Start from `assets/template-teaser.html`** (copy it, fill every `{{PLACEHOLDER}}`, then adapt) — the canvas engine has no equivalent in the shared template, so this asset stays. **Re-theme it to the shared template's slate tokens** (ground / surface / ink / accent) so the teaser and the doc pages read as one product. It already implements: DPR-crisp canvas, a scripted message loop with comet trails + receive-ripples + a status ticker, a `prefers-reduced-motion` static fallback, tab-hidden pause, and a responsive two-column → stacked layout. Adapt: the headline / sub / CTAs (the pitch), the nav + footer links, and — if the project's "network" differs — the `NODES`, `EDGES`, and `SCRIPT` arrays in the inline script (nodes = the entities, edges = who talks to whom, SCRIPT = an ordered story of messages that "finishes a task"). Keep the elevator-pitch discipline: provoke curiosity about **why / what / how**, then link into the deeper pages (the hub + a "why" page). --- ## Verify before declaring done 1. **Render it.** Open in a headless browser, confirm **no console errors**. 2. **No placeholder leaks** (the critical risk): grep the output for bare angle-bracket tokens, e.g. `grep -nE '<(repo|host|url|port|token|path|base|recipient|name|project)[-a-z0-9]*>' out.html` — any hit is a bug (should be `<…>`). 3. **Faithfulness:** every source table/code block/section is present; the title-band hoist didn't drop content; generated regions became `.generated` divs. 4. **Responsive:** check a narrow viewport (≤480px) — content stacks, no horizontal overflow. For the teaser, confirm the reduced-motion fallback renders a static lit network. 5. **Both themes:** check light and dark; the switch cycles Light / Auto / Dark and persists; all pages of a set share one storage key. ## Conventions - **Self-contained:** one `.html` file, CSS + JS inline, graphics inline (SVG/canvas). No external resources; system fonts (the cto template's Google Fonts links are the one sanctioned exception, only when cto was explicitly requested). Don't add libraries. - **English** for all code/markup/comments regardless of conversation language. - A doc page is a *rendering* of its Markdown — keep them in sync: if you change a `.md`, re-render its `.html`. ## Registration This skill is installed by `bin/install` (symlinked to `~/.claude/skills/make-readme-html/`). It's in the install/uninstall `SKILLS` arrays and the README. After install, invoke as `/make-readme-html`.
` (escaped; never linkify code spans), `[t](u)`→`t`. 5. **Headings:** `##`→``, `###`→``, `####`→``. Give each a GitHub-style slug `id` (lowercase; spaces/underscores→`-`; strip non-`[a-z0-9-]`; collapse repeats) and rewrite intra-doc `[t](#anchor)` links to match, so any TOC works. 6. **Tables** (GFM pipe) → `……`; drop the `|---|` separator row; convert inline Markdown inside every cell. 7. **Fenced code** ```` ```lang … ``` ```` → `…`, contents escaped (rule 3), line breaks preserved; drop the fence/lang markers. ASCII diagrams go in `` verbatim (escaped). 8. **Blockquotes** `> ` → `…`; **lists** → ``/`` (preserve nesting); `---` → ``. 9. **Generated blocks.** If the source wraps a region in `` … ``, render the inner content normally but wrap the whole region in `…` (the theme adds a "generated" badge). Never print the raw comment. 10. **Link rewrite for a themed set.** When other docs in the set are also being rendered, rewrite real Markdown links: `README.md`→`README.html`, `ROLES.md`→`README-ROLES.html`, etc. Leave all other relative paths as-is. Never linkify filenames that appear only inside `` `code` ``. --- ## Mode B — Hub / index (navigator) Render the root README (Mode A rules) **and** add a "Project map" navigator near the top, using the template's `.topic-grid > .node` component (its purpose: page indexes and card grids) — one card per page: title + one-line description. Mark the most important card with the `edge` (accent) variant. Tables (architecture, roadmap) render per Mode A; for a status column, use small mono spans colored with the template's status tokens (`--ok` done / `--warn` in progress / `--ink-faint` planned) — never invent new hues. ## Mode C — Animated teaser (`index.html`) A cinematic, single-screen elevator pitch with a live `` network animation. **Start from `assets/template-teaser.html`** (copy it, fill every `{{PLACEHOLDER}}`, then adapt) — the canvas engine has no equivalent in the shared template, so this asset stays. **Re-theme it to the shared template's slate tokens** (ground / surface / ink / accent) so the teaser and the doc pages read as one product. It already implements: DPR-crisp canvas, a scripted message loop with comet trails + receive-ripples + a status ticker, a `prefers-reduced-motion` static fallback, tab-hidden pause, and a responsive two-column → stacked layout. Adapt: the headline / sub / CTAs (the pitch), the nav + footer links, and — if the project's "network" differs — the `NODES`, `EDGES`, and `SCRIPT` arrays in the inline script (nodes = the entities, edges = who talks to whom, SCRIPT = an ordered story of messages that "finishes a task"). Keep the elevator-pitch discipline: provoke curiosity about **why / what / how**, then link into the deeper pages (the hub + a "why" page). --- ## Verify before declaring done 1. **Render it.** Open in a headless browser, confirm **no console errors**. 2. **No placeholder leaks** (the critical risk): grep the output for bare angle-bracket tokens, e.g. `grep -nE '<(repo|host|url|port|token|path|base|recipient|name|project)[-a-z0-9]*>' out.html` — any hit is a bug (should be `<…>`). 3. **Faithfulness:** every source table/code block/section is present; the title-band hoist didn't drop content; generated regions became `.generated` divs. 4. **Responsive:** check a narrow viewport (≤480px) — content stacks, no horizontal overflow. For the teaser, confirm the reduced-motion fallback renders a static lit network. 5. **Both themes:** check light and dark; the switch cycles Light / Auto / Dark and persists; all pages of a set share one storage key. ## Conventions - **Self-contained:** one `.html` file, CSS + JS inline, graphics inline (SVG/canvas). No external resources; system fonts (the cto template's Google Fonts links are the one sanctioned exception, only when cto was explicitly requested). Don't add libraries. - **English** for all code/markup/comments regardless of conversation language. - A doc page is a *rendering* of its Markdown — keep them in sync: if you change a `.md`, re-render its `.html`. ## Registration This skill is installed by `bin/install` (symlinked to `~/.claude/skills/make-readme-html/`). It's in the install/uninstall `SKILLS` arrays and the README. After install, invoke as `/make-readme-html`.
…
` verbatim (escaped). 8. **Blockquotes** `> ` → `…`; **lists** → `