roadmap-dashboard-html
Builds a single, offline, self-contained HTML dashboard from a roadmap
workbook. Everything (data, CSS, JS) is inlined into one .html file that opens
directly in any modern browser — no server, no build step, no external requests.
When to use
- Turning a planning XLSX into an interactive, shareable artifact.
- Showing cross-team / cross-pillar dependencies as a DAG plus an item-level
Gantt with dependency arrows.
- Surfacing schedule risks (date inversions, late prerequisites, tight
overlaps) and staffing gaps on the critical path.
- Giving leadership an editable executive summary + resourcing view.
Input contract
| Input |
Required |
Notes |
Roadmap workbook (.xlsx) |
Yes |
Sheets for pillar/team roadmaps, item-level dependencies, and (optional) business value. Parsed by unzipping the xlsx and reading xl/sharedStrings.xml + xl/worksheets/*.xml. |
| Resource registry |
No |
People by team/pillar/project (e.g., a Confluence page read via confluence-dc-mcp). Drives the Resources + capacity views. |
Hiring plan (.xlsx) |
No |
Open roles → rendered as "gaps" per pillar/project. |
| Date window / phases |
No |
Defaults inferred from item dates; override with explicit quarters/months. |
Output contract
*<name>*.html — the standalone dashboard with these tabs:
Executive Summary (editable) · Pillar Dependency DAG (clickable nodes) ·
Teams & Capacity · Roadmap/Gantt (inline-editable, dependency arrows) ·
Resources · Blockers · Critical Delivery Chains · Item-Level Dependencies ·
Schedule Risks (auto-detected + manually annotatable).- Optional
*<name>*.fragment.html — a Confluence HTML-macro fragment (see
confluence-publish-html).
- All edits persist client-side via
localStorage; every tab exports to CSV
(UTF-8 BOM).
Build approach (deterministic, no heavy deps)
- Parse the xlsx as a zip; map shared strings; read each sheet into row
objects. Do not require pandas/openpyxl unless already available.
- Model the data: items, dependencies, teams, resources, blockers, chains.
- Detect schedule risks: for each dependency, compare provider end vs
consumer start → classify
inversion (consumer starts before provider ends),
finish (late prerequisite), overlap (tight), or ok.
- Render one HTML file: inline
<style> + <script>; SVG for the DAG and
Gantt dependency arrows; vanilla JS for editing/persistence/CSV. No CDN links.
- Verify: open-check the file size and that it has no external
http(s)://
asset references.
Guardrails
- Read-only on sources. Never modify the input workbook or registry.
- PII awareness. Resource/hiring data embeds names/emails — warn the user and
keep any repo/Confluence destination private. Offer a sanitized build.
- Offline-only output. The generated HTML must make no network calls.
- No secrets in the file. Tokens/credentials never get embedded.
Starter instruction
Use roadmap-dashboard-html on <PATH_TO_ROADMAP.xlsx> (optionally with
<RESOURCE_REGISTRY> and <HIRING_PLAN.xlsx>). Produce a single offline
dashboard.html with dependency DAG, editable Gantt, resourcing, and a
Schedule Risks tab. Keep it self-contained and warn me about any embedded PII.
1---2name: roadmap-dashboard-html3description: Generate a single self-contained, interactive HTML dashboard from a roadmap workbook (XLSX) for portfolio/program planning. Use this skill whenever the user wants an HTML roadmap, an interactive Gantt, a cross-team/pillar dependency map or DAG, a schedule-risk view, a resourcing/capacity view, or an executive summary built from a planning spreadsheet — especially when they say "make an interactive HTML", "build a dashboard from this roadmap", "visualize dependencies", "Gantt with dependencies", "schedule risks", or "executive report". Output is one offline .html file (no server, no build) with inline editing, browser-local persistence, and CSV export. Complements confluence-publish-html (to publish the result) and repo-mental-map-tpm.4---56# roadmap-dashboard-html78Builds a **single, offline, self-contained HTML dashboard** from a roadmap9workbook. Everything (data, CSS, JS) is inlined into one `.html` file that opens10directly in any modern browser — no server, no build step, no external requests.1112## When to use1314- Turning a planning XLSX into an interactive, shareable artifact.15- Showing **cross-team / cross-pillar dependencies** as a DAG plus an item-level16 Gantt with dependency arrows.17- Surfacing **schedule risks** (date inversions, late prerequisites, tight18 overlaps) and **staffing gaps** on the critical path.19- Giving leadership an **editable executive summary** + resourcing view.2021## Input contract2223| Input | Required | Notes |24|---|---|---|25| Roadmap workbook (`.xlsx`) | **Yes** | Sheets for pillar/team roadmaps, item-level dependencies, and (optional) business value. Parsed by unzipping the xlsx and reading `xl/sharedStrings.xml` + `xl/worksheets/*.xml`. |26| Resource registry | No | People by team/pillar/project (e.g., a Confluence page read via `confluence-dc-mcp`). Drives the Resources + capacity views. |27| Hiring plan (`.xlsx`) | No | Open roles → rendered as "gaps" per pillar/project. |28| Date window / phases | No | Defaults inferred from item dates; override with explicit quarters/months. |2930## Output contract3132- `*<name>*.html` — the standalone dashboard with these tabs:33 Executive Summary (editable) · Pillar Dependency DAG (clickable nodes) ·34 Teams & Capacity · Roadmap/Gantt (inline-editable, dependency arrows) ·35 Resources · Blockers · Critical Delivery Chains · Item-Level Dependencies ·36 Schedule Risks (auto-detected + manually annotatable).37- Optional `*<name>*.fragment.html` — a Confluence HTML-macro fragment (see38 `confluence-publish-html`).39- All edits persist client-side via `localStorage`; every tab exports to CSV40 (UTF-8 BOM).4142## Build approach (deterministic, no heavy deps)43441. **Parse** the xlsx as a zip; map shared strings; read each sheet into row45 objects. Do **not** require pandas/openpyxl unless already available.462. **Model** the data: items, dependencies, teams, resources, blockers, chains.473. **Detect schedule risks**: for each dependency, compare provider end vs48 consumer start → classify `inversion` (consumer starts before provider ends),49 `finish` (late prerequisite), `overlap` (tight), or `ok`.504. **Render** one HTML file: inline `<style>` + `<script>`; SVG for the DAG and51 Gantt dependency arrows; vanilla JS for editing/persistence/CSV. No CDN links.525. **Verify**: open-check the file size and that it has no external `http(s)://`53 asset references.5455## Guardrails5657- **Read-only on sources.** Never modify the input workbook or registry.58- **PII awareness.** Resource/hiring data embeds names/emails — warn the user and59 keep any repo/Confluence destination **private**. Offer a sanitized build.60- **Offline-only output.** The generated HTML must make no network calls.61- **No secrets** in the file. Tokens/credentials never get embedded.6263## Starter instruction6465```66Use roadmap-dashboard-html on <PATH_TO_ROADMAP.xlsx> (optionally with67<RESOURCE_REGISTRY> and <HIRING_PLAN.xlsx>). Produce a single offline68dashboard.html with dependency DAG, editable Gantt, resourcing, and a69Schedule Risks tab. Keep it self-contained and warn me about any embedded PII.70```
AnubisRooster