skills.rest
AAbdulghany
AAbdulghanyCOMMUNITY
Explore all skills by this author →
𝕏@AAbdulghanyyGitHub

journey

Generate a self-contained HTML user-journey visualization from PRD or YAML input.

Updated Apr 15, 2026
Search Tags:#yaml#visualization#svg#prd#modals#user-flow#journey
One-click install
npx skills add https://github.com/AAbdulghany/fms --skill journey-aabdulghany
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: journey
Source: https://github.com/AAbdulghany/fms/tree/main/.claude/skills/journey
Command: npx skills add https://github.com/AAbdulghany/fms --skill journey-aabdulghany

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill generates a compact, self-contained HTML visualization of a user journey to preview PRD-to-design flows, surface gaps, and validate transitions without external tooling.

Core Features & Use Cases

  • Generates a single self-contained HTML file that maps pages and transitions as clickable boxes with per-page modals.
  • Supports PRD-based input and YAML-defined journeys for quick, offline reviews and stakeholder alignment.
  • Useful for early design exploration, flow validation, and documentation that can be shared without a server.

Quick Start

Run the journey skill with a feature slug to render a self-contained HTML journey from your PRD or YAML source.

Frequently Asked Questions about journey

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

FAQPage Schema
How do I visualize a user journey from a PRD without external tools?▼

You can visualize a user journey from a PRD by generating a self-contained HTML file that maps pages and transitions as clickable boxes with per-page modals. This provides an offline artifact for quick flow validation and stakeholder alignment without needing a server.

Can I generate an HTML user-flow visualization from YAML input?▼

Yes, you can generate an HTML user-flow visualization directly from YAML input. The tool uses a YAML-based source of truth to create a single-file visualization with all assets inline, applying a BFS-based layout for structured flow mapping.

What is the best way to create offline user journey documentation for stakeholder reviews?▼

The best way to create offline user journey documentation is generating a self-contained HTML file with all assets inline. This allows you to share interactive flow maps with clickable modals for stakeholder walkthroughs without requiring external tooling or server hosting.

Does the generated HTML user journey visualization work offline?▼

Yes, the generated HTML user journey visualization works completely offline. It produces a single-file artifact with all assets inline, ensuring the visualization with per-page modals and BFS-based layout can be shared and viewed without any server or internet connection.

How do I validate page transitions during early design exploration?▼

You can validate page transitions during early design exploration by generating a self-contained HTML visualization from your PRD or YAML source. This maps pages and transitions as clickable boxes with per-page modals to surface gaps and quickly validate flow logic.

Related Skills

Explore More Design & Creative Skills→
ezagent42ezagent42
1

prd-analyze

Extract modules, user stories, NFRs, constraints, and dependencies from a PRD into YAML.

Official
Advanced
alexanderopalexanderop
125

walkthrough

Generate self-contained HTML walkthroughs with Mermaid diagrams for codebase flows.

Community
Advanced
tiweentiween

bmad-spec

Converts intent input into structured SPEC kernels using Python scripts and YAML configurations.

Official
Advanced
ntaksh42ntaksh42
1

uml-diagram

Generate UML diagrams from text using Mermaid and PlantUML syntax.

Community
Intermediate