roadmap-viewlisted

# Roadmap View Skill Generate a visual, interactive product roadmap from a single JSON data file. The output is a branded HTML file that works in any browser, can be shared as a standalone file, and updates instantly when the data changes. --- ## Architecture ``` outputs/roadmaps/roadmap-data.json <-- Single source of truth (edit this) | /roadmap-view skill <-- Reads JSON, generates HTML | outputs/roadmaps/roadmap.html <-- Shareable visual output ``` **To update the roadmap:** Edit `roadmap-data.json`, then run `/roadmap-view` to regenerate. --- ## Step 1: Read the design system Before generating any output, read your product's design system for brand constants: - Read your design system file (typically in `context-library/design-system/` or wherever your team keeps brand constants) - Pull: backdrop color, surface color, primary text color, accent color, typography choice (heading + body fonts) - If no design system exists yet, use neutral defaults: backdrop `#F5F7FA`, surface `#FFFFFF`, text `#1A1A1A`, accent `#7C3AED`, font `Inter` --- ## Step 2: Read the roadmap data Read `outputs/roadmaps/roadmap-data.json`. This file contains: ```json { "product": "[Your product name]", "owner": "PM name", "lastUpdated": "2026-04-10", "todayMarkerLabel": "10 April Update", "quarters": [ { "id": "Q2-2026", "label": "Q2 2026", "color": "#7C3AED", "sprints": [ { "id": "sprint-5