skills.rest
AutoByteus
AutoByteusOFFICIAL
Explore all skills by this author →
GitHub

ux-journey-definition

Generate a canonical experience-story.md documenting product narrative, journey, and screen behaviors.

34|2|Updated Jan 9, 2026
Search Tags:#prototype#ux#transitions#cognitive-load#journey#experience-story#screen-stories
One-click install
npx skills add https://github.com/AutoByteus/autobyteus-skills --skill ux-journey-definition
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-journey-definition
Source: https://github.com/AutoByteus/autobyteus-skills/tree/main/ux-journey-definition
Command: npx skills add https://github.com/AutoByteus/autobyteus-skills --skill ux-journey-definition

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create one canonical artifact that communicates the product story, main journey, and screen-level behaviors to align design and development teams before prototyping.

Core Features & Use Cases

  • Canonical artifact: one experience-story.md that captures the product story, main journey, screen-by-screen behavior, and transition mapping.
  • Cognition-first decisions: structured rubric to guide complexity and reduce cognitive load during prototyping.
  • Handoff-ready: feeds into the downstream product-ui-prototyping workflow and prototyping artifacts.

Quick Start

Create the canonical artifact at ui-prototypes/<prototype-name>/experience-story.md and begin writing the Experience Story.

Frequently Asked Questions about ux-journey-definition

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

FAQPage Schema
How do I document a UX journey before starting UI prototyping?▼

Reduce cognitive load during prototyping by applying a structured rubric within the experience-story document, guiding complexity criteria and transition mapping to streamline user flows.

What is an experience story document in UX design?▼

An experience story document in UX design is a single canonical artifact capturing the product story, main journey, screen-by-screen behavior, and transition mapping to ensure handoff-ready alignment.

How do I map screen transitions for web and mobile prototypes?▼

Map screen transitions for web and mobile prototypes by defining transition behaviors within a fixed experience-story template that enforces required stages like product story and screen stories.

How do I reduce cognitive load when planning user experience flows?▼

Reduce cognitive load when planning user experience flows by applying a structured rubric within the experience-story document, guiding complexity criteria and transition mapping to streamline user flows.

Does the UX experience story spec support mobile prototyping workflows?▼

Yes, the UX experience story spec supports mobile prototyping workflows by defining screen-wise behavior and transition mapping applicable to both web and mobile platforms before UI prototyping.

What is the best way to create a handoff-ready UX spec for developers?▼

The best way to create a handoff-ready UX spec for developers is to output a single canonical experience-story.md passing a quality gate, covering product story, cognitive load, screen stories, and transitions.

Related Skills

Explore More Design & Creative Skills→
deanpetersdeanpeters
6.4k

user-story-mapping

Map user activities, steps, and tasks into a narrative story map.

Community
Intermediate
DatTran26DatTran26

ck:stitch

Convert natural-language UI prompts into HTML/Tailwind and DESIGN.md artifacts via Google Stitch.

Community
Advanced
Hey-ViswaHey-Viswa

wise-design-skill

Generate Wise-aligned React/Next.js UI guidance for dashboards and forms.

Community
Intermediate
lotosbinlotosbin
14

ui-ux-designer

Automate planning and guidance for UI/UX design tasks.

Community
Advanced