roadmap-generator

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

20|5|Updated Feb 27, 2026

Search Tags:#planning #markdown #html #roadmap #milestones #phases #project-management

Ready to run

npx skills add https://github.com/nasrulhazim/agent-skills --skill roadmap-generator-nasrulhazim

💬 Prompt for ChatGPT / Claude Chat▼

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.