skills.rest
me2resh
me2reshCOMMUNITY
Explore all skills by this author →
Website𝕏@me2reshGitHub

journey

Generate a single-file HTML user journey map with modal-per-page details from PRD or YAML.

489|254|Updated Apr 5, 2026
Search Tags:#user journey#modal#diagram generation#html preview#prd parsing#ux flows#yaml specification
One-click install
npx skills add https://github.com/me2resh/apexyard --skill journey-me2resh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: journey
Source: https://github.com/me2resh/apexyard/tree/main/.claude/skills/journey
Command: npx skills add https://github.com/me2resh/apexyard --skill journey-me2resh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It turns an approved PRD or structured flow notes into a shareable, flow-level user journey preview so teams can spot missing pages, unreachable states, and unclear transitions before implementation.

Core Features & Use Cases

  • Generates modal-per-page journey HTML: produces a single self-contained file where each page is a clickable box that opens a per-page modal.
  • Builds from multiple inputs: parses user pages and transitions from a PRD, a YAML journey file, or a conversational 5-question flow capture.
  • Writes diffable source-of-truth YAML: stores the canonical journey graph as <projects/<name>/journeys/<feature-slug>.yaml and regenerates HTML from it via --update.
  • Validates the journey graph: checks reachability, references consistency, and enforces caps (max 12 pages, max 30 transitions) to keep previews readable.

Quick Start

Run the journey skill for your feature by providing a feature slug, then review the generated HTML preview to confirm the flow matches your PRD.

Frequently Asked Questions about journey

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

FAQPage Schema
How do I generate a user journey map from a PRD for stakeholder review?▼

You can generate an HTML user journey map from a PRD by parsing pages and transitions into a clickable HTML file with modal-per-page details. This provides a flow-level preview for stakeholder walkthroughs before implementation.

Can I use YAML to define and update UX flows for HTML preview?▼

Yes, you can use a YAML specification to define UX flows as a diffable source-of-truth. The YAML file stores the journey graph and regenerates the HTML preview via an update flag for iterative adjustments.

What is the best way to visualize unreachable states in a user flow?▼

The best way to visualize unreachable states is using a generated HTML user journey map that validates graph reachability and references. It highlights missing pages and unclear transitions so teams can spot flow issues early.

Does this user journey visualization tool enforce limits on pages and transitions?▼

Yes, the user journey visualization enforces structural caps to keep HTML previews readable, allowing a maximum of 12 pages and 30 transitions. This ensures the generated flow-level diagram remains clear for stakeholder walkthroughs.

How do I capture user flow details without a structured PRD or YAML file?▼

You can capture user flow details through a conversational 5-question flow capture process. This builds the necessary pages and transitions from unstructured notes, then writes them into a canonical YAML file for HTML rendering.

Related Skills

Explore More Design & Creative Skills→
The-InterdependencyThe-Interdependency
1

distill-engineering

Extract engineering specifications, tolerances, and standards into cited machine-readable claims.

Official
Advanced
NagyViktNagyVikt
2

brainstorming

Transform abstract project ideas into validated design specifications through iterative dialogue.

Community
Advanced
AAbdulghanyAAbdulghany

journey

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

Community
Intermediate
jasonmichaelbell78-creatorjasonmichaelbell78-creator

ux-researcher-designer

Generate data-driven personas and journey maps from user data.

Community
Advanced