skills.rest
Kohlex
KohlexOFFICIAL
Explore all skills by this author →
WebsiteGitHub

roadmap-portrait

Render milestone-capability-story link graphs into a scrollable HTML roadmap portrait.

Updated Jun 4, 2026
Search Tags:#planning#html#css#roadmap#visualization#capabilities#user-stories
One-click install
npx skills add https://github.com/Kohlex/autopilot-plugin --skill roadmap-portrait
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: roadmap-portrait
Source: https://github.com/Kohlex/autopilot-plugin/tree/main/skills/roadmap-portrait
Command: npx skills add https://github.com/Kohlex/autopilot-plugin --skill roadmap-portrait

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The roadmap portrait provides a human-facing surface to review and navigate the Foundation roadmap, rendering milestones, capabilities, and user stories from the source artifacts. It is generated from capabilities.yaml and FOUNDATION USER-STORIES.md and is designed to ensure link integrity with dead-link checks, while rendering in a CSS-only, JS-free portrait that works in any context.

Core Features & Use Cases

  • Renders a scrollable timeline of milestones (Prototype, MVP, Blue-sky) with a nested capability drill-down.
  • Drill-down from milestone to capabilities to user stories using CSS details, enabling zero-JS rendering in any context.
  • Validates link graphs to prevent orphan or dead links and outputs an HTML artifact ROADMAP-PORTRAIT.html for planning docs.
  • Automatically re-generates when the Foundation artifacts change so stakeholders always see current alignment.

Quick Start

Run the roadmap-portrait renderer to generate ROADMAP-PORTRAIT.html from capabilities.yaml and FOUNDATION USER-STORIES.md.

Frequently Asked Questions about roadmap-portrait

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a scrollable HTML roadmap from yaml and markdown planning artifacts?▼

To generate a scrollable HTML roadmap portrait, you resolve milestone-capability-story link graphs from capabilities.yaml and USER-STORIES.md files. The renderer outputs an HTML file that presents Prototype, MVP, and Blue-sky milestones with drill-down navigation.

Can I render a zero-JS roadmap visualization that works in restricted browser environments?▼

Yes, you can render a zero-JS roadmap visualization using a CSS-only rendering approach. It generates an HTML artifact that relies entirely on CSS details for drill-down navigation, ensuring it works in any context without JavaScript execution.

How do I check for dead links between milestones, capabilities, and user stories in planning docs?▼

To check for dead links in planning docs, the roadmap portrait renderer applies a strict link graph validation. It resolves connections between milestones, capabilities, and user stories to prevent orphan or dead links before outputting the final HTML artifact.

What is the best way to visualize milestone alignment and drill down into user stories without JavaScript?▼

The best way to visualize milestone alignment without JavaScript is using a CSS-only scrollable timeline. It renders Prototype, MVP, and Blue-sky milestones, allowing users to drill down from milestones to capabilities and then to user stories using native HTML details elements.

Does the roadmap portrait renderer automatically update when Foundation artifacts change?▼

Yes, the roadmap portrait renderer automatically re-generates the HTML artifact when Foundation artifacts change. This ensures stakeholders always see the current alignment by reading the latest capabilities.yaml and USER-STORIES.md source files during the rendering process.

Related Skills

Explore More Product & Management Skills→
KohlexKohlex

architecture-design

Generate an ARCHITECTURE.md design contract from WEDGE-AND-CAPABILITIES.md, capabilities.yaml, and PRD.

Official
Advanced
ev3rlitev3rlit

gsd-new-milestone

Launch a milestone planning workflow updating PROJECT.md, REQUIREMENTS.md, ROADMAP.md, STATE.md and optionally research files for Git-based SD.

Community
Advanced
SempriniSemprini
1

preflight

Validate MD-DDL models with five mechanical checks on YAML, Mermaid, links, references, and versioning.

Community
Basic
mhattingpetemhattingpete
657

timeline-creator

Create interactive HTML timelines and Gantt-chart roadmaps from project data.

Community
Basic