garrytan / garrytan/gstack

Feature request: Journey map / user flow generator skill

Open
#729 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
133k
Forks
19.9k
Avg merge
18h 46m
Merged PRs (30d)
26

Description

## What I wanted to do

After running `/design-shotgun` and approving a variant for a multi-state feature (dashboard with healthy/error/empty/expanded states), I wanted to see the full user flow as a professional journey map — the kind a design team at Linear or Airbnb would produce.

## What I had to do instead

Manually build an HTML journey map with swim lanes. Took multiple iterations. The comparison board grid format doesn't work for sequential flows or state diagrams — it's designed for comparing competing designs, not showing states of one design.

## What would make this great

A `/journey-map` or `/user-flow` skill that generates a professional horizontal journey map with swim lanes:

- **User Action** — what they click/do
- **Screen** — the mockup at that moment (from `/design-shotgun` approved variants)
- **User Thinking** — internal monologue
- **Emotion Curve** — a literal line graph showing confidence/frustration across the flow
- **System Response** — what happens behind the scenes
- **Job to Be Done** — the functional goal at each step
- **Opportunities** — where the product could be better

Could work as:
1. A standalone skill: `/journey-map` that takes approved mockups + descriptions
2. A post-step in `/design-shotgun` after variants are approved ("Generate journey map?")
3. An integration with `/plan-design-review` for reviewing flows

## Context

I built this manually for the new user onboarding + returning user dashboard experience for an app. The journey maps were extremely useful for aligning on the full experience before building. Screenshots of what I built manually:

- Horizontal swim lane layout with 7 columns (one per state)
- Emotion curve SVG at the bottom
- Phase badges (Discovery / Setup / Activation / Error / Edge Case)
- Each column has: action, screen mockup, user thought, emotion bar, system details, JTBD, opportunity

This pattern would be valuable for any multi-state feature design.

**gstack version:** 0.14.2.0
**Skill:** /design-shotgun

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.