skills.rest
duchuyn04
duchuyn04COMMUNITY
Explore all skills by this author →
GitHub

story-and-experience

Generates story maps, user stories, acceptance criteria, UX flows, and interactive HTML prototypes.

Updated Sep 14, 2026
Search Tags:#requirements#acceptance criteria#user stories#prototype#story mapping#product discovery#ux flows
One-click install
npx skills add https://github.com/duchuyn04/resume-analyze --skill story-and-experience-duchuyn04
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: story-and-experience
Source: https://github.com/duchuyn04/resume-analyze/tree/main/.agents/skills/story-and-experience
Command: npx skills add https://github.com/duchuyn04/resume-analyze --skill story-and-experience-duchuyn04

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Product teams often jump from business requirements straight into code without verifiable user stories, acceptance criteria, or UX flows, causing scope drift and rework. This Skill converts business rules into structured story maps, Given-When-Then acceptance criteria, screen state matrices, and clickable HTML prototypes before technical design begins. ## Core Features & Use Cases - Story Mapping & User Stories: Builds journey-based story maps with standardized Epic (EPxx) and User Story (USxx) identifiers, actor-story matrices, and observable acceptance criteria. - UX Flow & Screen State Design: Defines entry points, permissions, validation, failure branches, and loading/empty/error/success states for every screen in scope. - Interactive Prototype Mockups: Generates a self-contained HTML/CSS/JS prototype at docs/workflow/prototypes/ so stakeholders can click through flows and test UI states before approving Gate G2. - Use Case: Given approved business rules for a recruitment platform, produce a stories specification file with story map, ACs, test scenarios, and a clickable mockup, then stop for G2 approval before solution design. ## Quick Start Ask the AI to turn the approved business rules for a feature into user stories, UX flows, and an interactive HTML prototype saved under docs/workflow/specs and docs/workflow/prototypes.

Frequently Asked Questions about story-and-experience

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

FAQPage Schema
How do I write user stories with acceptance criteria from business rules?▼

Feed the approved scope, actors, and business rules into the Skill, which produces USxx-numbered stories in the 'As a [actor], I want [action] so that [value]' format with Given-When-Then acceptance criteria covering edge cases, errors, and permissions.

How to create an interactive HTML prototype before development starts?▼

After the stories specification is written, the Skill offers to generate a single self-contained HTML file with embedded CSS and JavaScript at docs/workflow/prototypes/, simulating navigation, forms, and loading, empty, error, and success states for browser testing.

What is a story map and how is it different from a backlog?▼

A story map organizes user stories under ordered journey activities and release scope rather than by technical layers. The Skill builds this map first, then derives the backlog entries with stable story and AC identifiers linked to source rules.

Does the Skill support Mermaid diagrams for user journeys?▼

No, Mermaid is explicitly forbidden. Journey, story map, flowchart, and state diagrams must be generated as HTML files via the diagram-design skill and verified in a browser before linking into the specification document.

When should test scenarios be separated from user stories?▼

Test scenarios are derived per story from acceptance criteria and real risks, covering happy path, negative, boundary, security, and recovery branches. They feed later task verification checklists rather than a standalone test plan document.

What are the limitations of this story design workflow?▼

It requires approved business rules and scope as input and cannot fill missing rules with invented screens. It stops at Gate G2 approval and never proceeds to technical design or code, which is handled by the downstream solution-design step.

Related Skills

Explore More Product & Management Skills→
amitkarpeamitkarpe

prepare-worker-goal

Prepares bounded delegation goal files for persistent worker agents before dispatch.

Community
Intermediate
enigmaicon-engenigmaicon-eng
1

brainstorming

Convert an idea into an approved design spec with YAML metadata and approval gates.

Community
Advanced
hoanghd218hoanghd218

mermaidjs-v11

Generate diagrams from Mermaid.js v11 syntax via CLI or HTML embedding.

Community
Intermediate
VanLengsVanLengs
1

domain-model

Analyze event-storm results to identify business domains and map plugin ownership boundaries.

Community
Advanced