user-story-mapping
À propos
Cette compétence de Claude crée des cartes de récits utilisateur hiérarchiques pour visualiser les flux de travail et les parcours utilisateur, afin de planifier les backlogs ou les MVP. Elle décompose les activités de haut niveau en étapes et tâches selon un flux narratif de gauche à droite, pour aligner les équipes et prioriser les fonctionnalités. Utilisez-la comme artefact de planification stratégique pour identifier les lacunes et opportunités d'expérience entre les produits, le design et l'ingénierie.
Installation rapide
Claude Code
Recommandénpx skills add deanpeters/Product-Manager-Skills -a claude-code/plugin add https://github.com/deanpeters/Product-Manager-Skillsgit clone https://github.com/deanpeters/Product-Manager-Skills.git ~/.claude/skills/user-story-mappingCopiez et collez cette commande dans Claude Code pour installer cette compétence
Documentation
Purpose
Visualize the user journey by creating a hierarchical map that breaks down high-level activities into steps and tasks, organized left-to-right as a narrative flow. Use this to build shared understanding across product, design, and engineering, prioritize features based on user workflows, and identify gaps or opportunities in the user experience.
This is not a backlog—it's a strategic artifact that shows how users accomplish their goals, which then informs what to build.
Key Concepts
The Jeff Patton Story Mapping Framework
Invented by Jeff Patton, story mapping organizes work into a 2D structure:
Horizontal axis (left-to-right): User journey over time
- Backbone: High-level activities the user performs
- Steps: Specific actions within each activity
- Tasks: Detailed work required to complete each step
Vertical axis (top-to-bottom): Priority and releases
- Top rows: Essential tasks (MVP / Release 1)
- Lower rows: Nice-to-have tasks (Future releases)
Story Map Structure
Segment → Persona → Narrative (User's goal)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
[Activity 1] → [Activity 2] → [Activity 3] → [Activity 4] → [Activity 5]
↓ ↓ ↓ ↓ ↓
[Step 1.1] [Step 2.1] [Step 3.1] [Step 4.1] [Step 5.1]
[Step 1.2] [Step 2.2] [Step 3.2] [Step 4.2] [Step 5.2]
[Step 1.3] [Step 2.3] [Step 3.3] [Step 4.3] [Step 5.3]
↓ ↓ ↓ ↓ ↓
[Task 1.1.1] [Task 2.1.1] [Task 3.1.1] [Task 4.1.1] [Task 5.1.1]
[Task 1.1.2] [Task 2.1.2] [Task 3.1.2] [Task 4.1.2] [Task 5.1.2]
[Task 1.1.3] [Task 2.1.3] [Task 3.1.3] [Task 4.1.3] [Task 5.1.3]
... ... ... ... ...
Why This Works
- User-centric: Organizes work around user goals, not engineering modules
- Shared understanding: Product, design, engineering all see the same journey
- Prioritization clarity: Top tasks = MVP, lower tasks = future iterations
- Gap identification: Missing steps or tasks become obvious
- Release planning: Draw horizontal "release lines" to define scope
Anti-Patterns (What This Is NOT)
- Not a Gantt chart: This isn't project management—it's user journey visualization
- Not a feature list: Activities aren't features—they're user behaviors
- Not static: Story maps evolve as you learn more about users
When to Use This
- Kicking off a new product or major feature
- Aligning stakeholders on user workflow
- Prioritizing backlog based on user needs
- Identifying MVP vs. future releases
- Onboarding new team members to the product vision
When NOT to Use This
- For trivial features (don't map what you already understand)
- When user workflows are constantly changing (map stabilizes workflows)
- As a replacement for user stories (the map informs stories, doesn't replace them)
Application
Step 1: Define the Context
Use template.md for the full fill-in structure.
Segment
Who are you building for?
### Segment:
- [Specify the target segment, e.g., "Small business owners using DIY accounting software"]
Quality checks:
- Specific: Not "users" but "enterprise IT admins" or "freelance designers"
Persona
Provide details about the persona within this segment (reference skills/proto-persona/SKILL.md).
### Persona:
- [Describe the persona: demographics, behaviors, pains, goals]
Example:
- "Sarah, 35-year-old freelance graphic designer, manages 5-10 client projects at once, struggles with invoicing and payment tracking, wants to spend less time on admin and more time designing"
Step 2: Define the Narrative
What is the user trying to accomplish? Frame this as a Jobs-to-be-Done statement (reference skills/jobs-to-be-done/SKILL.md).
### Narrative:
- [Concise narrative of the persona's objective, e.g., "Complete a client project from kickoff to final payment"]
Quality checks:
- Outcome-focused: Not "use the product" but "deliver a client project on time and get paid"
- One sentence: If it takes more than one sentence, the scope may be too broad
Step 3: Identify Activities (Backbone)
List 3-5 high-level activities the persona engages in to fulfill the narrative. These form the backbone of your map.
### Activities:
1. [Activity 1, e.g., "Negotiate project scope and pricing"]
2. [Activity 2, e.g., "Execute design work"]
3. [Activity 3, e.g., "Deliver final assets to client"]
4. [Activity 4, e.g., "Send invoice and receive payment"]
5. [Activity 5, optional]
Quality checks:
- Sequential: Activities happen in order (left-to-right)
- User actions: Describe what the user does, not what the product provides
- 3-5 activities: Too few = oversimplified, too many = overwhelming
Step 4: Break Activities into Steps
For each activity, list 3-5 steps that detail how the activity is carried out.
### Steps:
**For Activity 1: [Activity Name]**
- Step 1: [Detail step 1, e.g., "Review client brief"]
- Step 2: [Detail step 2, e.g., "Draft project proposal"]
- Step 3: [Detail step 3, e.g., "Negotiate timeline and budget"]
- Step 4: [Optional step 4]
- Step 5: [Optional step 5]
**For Activity 2: [Activity Name]**
- Step 1: [Detail step 1]
- Step 2: [Detail step 2]
...
Quality checks:
- Actionable: Each step is something the user does
- Observable: You could watch someone perform this step
- Logical sequence: Steps follow a natural order
Step 5: Break Steps into Tasks
For each step, list 5-7 tasks that must be completed.
### Tasks:
**For Activity 1, Step 1: [Step Name]**
- Task 1: [Detail task 1, e.g., "Read client brief document"]
- Task 2: [Detail task 2, e.g., "Identify key deliverables"]
- Task 3: [Detail task 3, e.g., "Note budget constraints"]
- Task 4: [Detail task 4, e.g., "Clarify timeline expectations"]
- Task 5: [Detail task 5, e.g., "List open questions for client"]
- Task 6: [Optional task 6]
- Task 7: [Optional task 7]
**For Activity 1, Step 2: [Step Name]**
- Task 1: [Detail task 1]
...
Quality checks:
- Granular: Tasks are small, specific actions
- User-facing or behind-the-scenes: Include both (e.g., "Send email" and "Receive confirmation")
- Prioritizable: You'll prioritize tasks vertically (top = essential, bottom = nice-to-have)
Step 6: Prioritize Vertically
Arrange tasks top-to-bottom by priority:
- Top rows: MVP / Release 1 (must-have)
- Middle rows: Release 2 (important but not critical)
- Bottom rows: Future / Nice-to-have
Draw horizontal "release lines" to demarcate scope.
Step 7: Identify Gaps and Opportunities
Review the map and ask:
- Are there missing steps or tasks?
- Are there pain points we're not addressing?
- Are there opportunities to delight users?
- Do all activities flow logically?
Examples
See examples/sample.md for a full story map example.
Common Pitfalls
Pitfall 1: Activities Are Features, Not User Behaviors
Symptom: "Activity 1: Use the dashboard. Activity 2: Generate reports."
Consequence: You've mapped the product, not the user journey.
Fix: Reframe as user actions: "Activity 1: Monitor project progress. Activity 2: Summarize work for stakeholders."
Pitfall 2: Too Many Activities
Symptom: 10+ activities across the backbone
Consequence: Map becomes overwhelming and loses focus.
Fix: Consolidate. If you have 10 activities, you're likely mixing activities with steps. Aim for 3-5 high-level activities.
Pitfall 3: Tasks Are Too Vague
Symptom: "Task 1: Do the thing"
Consequence: Can't prioritize or estimate vague tasks.
Fix: Be specific: "Task 1: Enter client email address in the 'Bill To' field."
Pitfall 4: Ignoring Vertical Prioritization
Symptom: All tasks at the same level—no MVP vs. future releases defined
Consequence: No clarity on what to build first.
Fix: Explicitly prioritize. Draw release lines. Force hard choices about what's MVP.
Pitfall 5: Mapping in Isolation
Symptom: PM creates the map alone, then presents it to the team
Consequence: No shared ownership or understanding.
Fix: Map collaboratively. Run a story mapping workshop with product, design, and engineering.
References
Related Skills
skills/proto-persona/SKILL.md— Defines the persona for the story mapskills/jobs-to-be-done/SKILL.md— Informs the narrative and activitiesskills/user-story/SKILL.md— Tasks from the map become user storiesskills/problem-statement/SKILL.md— Problem statement frames the narrative
External Frameworks
- Jeff Patton, User Story Mapping (2014) — Origin of the story mapping technique
- Teresa Torres, Continuous Discovery Habits (2021) — Opportunity solution trees (complementary to story maps)
Dean's Work
- User Story Mapping Prompt (adapted from Jeff Patton's methodology)
Provenance
- Adapted from
prompts/user-story-mapping.mdin thehttps://github.com/deanpeters/product-manager-promptsrepo.
Skill type: Component
Suggested filename: user-story-mapping.md
Suggested placement: /skills/components/
Dependencies: References skills/proto-persona/SKILL.md, skills/jobs-to-be-done/SKILL.md, skills/user-story/SKILL.md, skills/problem-statement/SKILL.md
Dépôt GitHub
Compétences associées
content-collections
MétaCette compétence propose une configuration éprouvée en production pour Content Collections, un outil axé sur TypeScript qui transforme des fichiers Markdown/MDX en collections de données typées de manière sûre avec une validation Zod. Utilisez-la lors de la création de blogs, de sites de documentation ou d'applications Vite + React riches en contenu pour garantir la sécurité de typage et la validation automatique du contenu. Elle couvre tout, de la configuration du plugin Vite et de la compilation MDX à l'optimisation des déploiements et la validation des schémas.
polymarket
MétaCette compétence permet aux développeurs de créer des applications avec la plateforme de marchés prédictifs Polymarket, incluant l'intégration d'API pour le trading et les données de marché. Elle fournit également une diffusion de données en temps réel via WebSocket pour surveiller les transactions en direct et l'activité du marché. Utilisez-la pour mettre en œuvre des stratégies de trading ou pour créer des outils traitant les mises à jour de marché en direct.
creating-opencode-plugins
MétaCette compétence aide les développeurs à créer des plugins OpenCode qui s'interconnectent avec plus de 25 types d'événements tels que les commandes, les fichiers et les opérations LSP. Elle fournit la structure du plugin, les spécifications de l'API événementielle et les modèles d'implémentation pour les modules JavaScript/TypeScript. Utilisez-la lorsque vous avez besoin d'intercepter, de surveiller ou d'étendre le cycle de vie de l'assistant IA OpenCode avec une logique personnalisée pilotée par les événements.
sglang
MétaSGLang est un framework de service LLM haute performance spécialisé dans la génération rapide et structurée pour les workflows JSON, regex et agentiques grâce à son cache de préfixe RadixAttention. Il offre une inférence nettement plus rapide, particulièrement pour les tâches avec des préfixes répétés, ce qui le rend idéal pour les sorties complexes et structurées ainsi que les conversations multi-tours. Choisissez SGLang plutôt que des alternatives comme vLLM lorsque vous avez besoin d'un décodage contraint ou que vous construisez des applications avec un partage étendu de préfixes.
