roadmap-generator

Generate ROADMAP.md and a project-specific HTML roadmap with phases, MVP scope, and dependencies.

20|5|Updated Feb 27, 2026
One-click install
npx skills add https://github.com/nasrulhazim/agent-skills --skill roadmap-generator-nasrulhazim
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: roadmap-generator
Source: https://github.com/nasrulhazim/agent-skills/tree/main/skills/roadmap-generator
Command: npx skills add https://github.com/nasrulhazim/agent-skills --skill roadmap-generator-nasrulhazim

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Roadmap Generator automates the creation of structured project roadmaps by producing two complementary artifacts: a machine-readable ROADMAP.md and a visually styled HTML roadmap. It ensures consistency between planning documents and the project’s visual plan, saving time and reducing misalignment between stakeholders.

Core Features & Use Cases

  • Dual-output roadmaps: always generate ROADMAP.md and a per-project HTML roadmap in tandem.
  • Phase-based planning: outputs phase cards, MVP scope, dependencies, and a quick reference to guide implementation.
  • Context-aware generation: if a CLAUDE.md exists, reads it to tailor the roadmap; otherwise prompts an interview-style guide from references/interview-guide.md.
  • Project-type styling: HTML roadmap uses a unique visual aesthetic per project type, matching nasrulhazim/claude-docs patterns.

Quick Start

Generate ROADMAP.md and the project-specific HTML roadmap for the current project.

Frequently Asked Questions about roadmap-generator

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

FAQPage Schema
How do I generate a project roadmap with both markdown and HTML formats?

To generate a project roadmap in markdown and HTML, the tool automatically creates a machine-readable ROADMAP.md and a visually styled HTML roadmap in tandem. You simply request a roadmap, plan, or implementation phases, and it outputs both coordinated artifacts.

What is the best way to document project phases, dependencies, and milestones?

Documenting project phases, dependencies, and milestones is best done by generating structured roadmap artifacts. This tool outputs a ROADMAP.md and HTML file containing phase cards, MVP scope, and a dependency map to guide implementation.

How does context-aware roadmap generation work when planning a project?

Context-aware roadmap generation works by reading a CLAUDE.md file if present to tailor the output to your project. If CLAUDE.md is absent, it consults references/interview-guide.md to collect context through an interview-style guide.

Can I create a visually styled HTML roadmap for different project types?

Yes, you can create a visually styled HTML roadmap for different project types. The generator applies a unique visual aesthetic per project type, matching standard documentation patterns while structuring phase sections and MVP scope.

Do I need to manually align my markdown planning documents with my visual project plan?

No, you do not need to manually align markdown planning documents with your visual project plan. The generator ensures consistency by producing a ROADMAP.md and a complementary HTML roadmap together, reducing misalignment between stakeholders.

What should I do if I don't have a CLAUDE.md file for my project roadmap?

If you don't have a CLAUDE.md file for your project roadmap, the tool will automatically consult references/interview-guide.md. This prompts an interview-style guide to collect the necessary project context before generating the roadmap artifacts.