Render the interactive roadmap dashboard. The HTML is generated deterministically by roadmap.py render from the template at ~/.claude/library/templates/roadmap-artefact.html: this skill runs the command and opens the result; it writes no HTML itself. Same data in, same file out, so regenerated artefacts diff cleanly and can never drift from roadmaps.json.
Shared conventions (statuses, colour table): ~/.claude/library/references/roadmap-conventions.md.
Steps
- Check the format. Run
python3 "$HOME"/.claude/library/scripts/roadmap.py detect. Exit 3 = old simple format: stop and tell the user to run roadmap-migrate first. Exit 2 = could not locate/parse; ask for the path. Proceed on exit 0.
- Render. Run
python3 "$HOME"/.claude/library/scripts/roadmap.py render, adding --phase "$ARGUMENTS" when the user named a phase (required if several are active). Default output: {project_root}/docs/artefacts/roadmap-{slug}.html. On a validation-discrepancy note in the output, still render (the page shows a discrepancy banner) but include the discrepancies in your report.
- Open and report.
open the written file. Report: the file path; milestone and task counts plus done percentage (roadmap.py stats); the unblocked todo tasks (roadmap.py ready; surfaced directly, no need to open the file); any validation discrepancies.
Notes
- The dashboard refreshes automatically when
roadmap-maintain runs (recompute --render); invoke this skill for the first render or an on-demand refresh.
- Collapsible sections (the milestone
<details> blocks) default to closed; the template owns this. Never re-add open attributes, in the template or any generated file.
- Sections, palette and behaviour live in the template. To change the dashboard's look, edit
library/templates/roadmap-artefact.html; to change status colours, change the canonical table (STATUS_STYLE in roadmap.py + the conventions reference); never patch a generated file.
- The artefact is generated in the CLI's own canonical form (tabs, single-line JSON payload), not Prettier's. A repo that runs Prettier (or another formatter) in a pre-commit hook or CI should exclude it: add
docs/artefacts/roadmap-*.html to .prettierignore, the same way .claude/roadmaps.json is already excluded, so regenerating the dashboard never fights the formatter.
- The template already follows
~/.claude/library/references/artefact-conventions.md (theme-sourced palette, IBM Plex Mono/Sans pairing, the three-state light/dark/explicit-toggle contract with its masthead toggle control, collapsible milestone <details> closed by default). Any future template edit should stay inside that contract rather than drift from it — the template is the one place to fix a divergence, never a generated file.
1---2name: artefacts-create-roadmap3description: "Generate the HTML roadmap dashboard deterministically via roadmap.py render."4when_to_use: "When you want to view or share the current roadmap as an interactive dashboard rather than reading roadmaps.json directly."5model: haiku6effort: low7metadata:8 glyph: ᚺ9 family: artefact10disable-model-invocation: false11allowed-tools: ["Read", "Glob", "Bash(python3:*)", "Bash(open:*)"]12arguments: ["phase"]13argument-hint: "[phase name (optional, when several are active)]"14---1516Render the interactive roadmap dashboard. The HTML is generated deterministically by `roadmap.py render` from the template at `~/.claude/library/templates/roadmap-artefact.html`: this skill runs the command and opens the result; it writes no HTML itself. Same data in, same file out, so regenerated artefacts diff cleanly and can never drift from `roadmaps.json`.1718Shared conventions (statuses, colour table): `~/.claude/library/references/roadmap-conventions.md`.1920## Steps21221. **Check the format.** Run `python3 "$HOME"/.claude/library/scripts/roadmap.py detect`. Exit **3** = old simple format: stop and tell the user to run `roadmap-migrate` first. Exit **2** = could not locate/parse; ask for the path. Proceed on exit 0.232. **Render.** Run `python3 "$HOME"/.claude/library/scripts/roadmap.py render`, adding `--phase "$ARGUMENTS"` when the user named a phase (required if several are active). Default output: `{project_root}/docs/artefacts/roadmap-{slug}.html`. On a validation-discrepancy note in the output, still render (the page shows a discrepancy banner) but include the discrepancies in your report.243. **Open and report.** `open` the written file. Report: the file path; milestone and task counts plus done percentage (`roadmap.py stats`); the unblocked `todo` tasks (`roadmap.py ready`; surfaced directly, no need to open the file); any validation discrepancies.2526## Notes2728- The dashboard refreshes automatically when `roadmap-maintain` runs (`recompute --render`); invoke this skill for the first render or an on-demand refresh.29- Collapsible sections (the milestone `<details>` blocks) default to **closed**; the template owns this. Never re-add `open` attributes, in the template or any generated file.30- Sections, palette and behaviour live in the template. To change the dashboard's look, edit `library/templates/roadmap-artefact.html`; to change status colours, change the canonical table (`STATUS_STYLE` in `roadmap.py` + the conventions reference); never patch a generated file.31- The artefact is generated in the CLI's own canonical form (tabs, single-line JSON payload), not Prettier's. A repo that runs Prettier (or another formatter) in a pre-commit hook or CI should exclude it: add `docs/artefacts/roadmap-*.html` to `.prettierignore`, the same way `.claude/roadmaps.json` is already excluded, so regenerating the dashboard never fights the formatter.32- The template already follows `~/.claude/library/references/artefact-conventions.md` (theme-sourced palette, IBM Plex Mono/Sans pairing, the three-state light/dark/explicit-toggle contract with its masthead toggle control, collapsible milestone `<details>` closed by default). Any future template edit should stay inside that contract rather than drift from it — the template is the one place to fix a divergence, never a generated file.
JasonWarrenUK