skills.rest
mattgierhart
mattgierhartCOMMUNITY
Explore all skills by this author →
GitHub

prd-v04-screen-flow-definition

Translate user journeys into screen-flow inventories with SCR- and DES- entries.

193|9|Updated Jul 10, 2025
Search Tags:#design-system#journey-mapping#ui-structure#screen-flow#scr-entries#des-entries
One-click install
npx skills add https://github.com/mattgierhart/PRD-driven-context-engineering --skill prd-v04-screen-flow-definition
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prd-v04-screen-flow-definition
Source: https://github.com/mattgierhart/PRD-driven-context-engineering/tree/main/.claude/skills/prd-v04-screen-flow-definition
Command: npx skills add https://github.com/mattgierhart/PRD-driven-context-engineering --skill prd-v04-screen-flow-definition

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

Screen Flow Definition translates user journeys and product requirements into a concrete screen inventory, navigation map, and design-system references, accelerating PRD validation and handoff.

Core Features & Use Cases

  • Convert UJ- (User Journey) and FEA- (Feature Value) inputs into a screen inventory with defined screen types (Page, Modal, Panel, Component) and associated navigation.
  • Map features to screens (many-to-many) and define a coherent navigation structure that supports hub-and-spoke, linear, hierarchical, or flat patterns.
  • Generate SCR- entries for screens and DES- entries for design-system components, ensuring traceability to journeys and features.
  • Identify shared components and plan their reuse across screens; create Design System entries in DES-.
  • Produce end-to-end documentation that supports Red Team reviews and PRD lifecycle steps.

Quick Start

Pull UJ- and FEA- inputs from prior steps and generate SCR- and DES- entries that map screens, navigation, and design-system elements.

Frequently Asked Questions about prd-v04-screen-flow-definition

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

FAQPage Schema
How do I translate user journeys into a screen flow inventory?▼

Translate user journeys into a screen flow inventory by mapping UJ- and FEA- inputs into defined screen types, navigation patterns, and design-system components with full traceability.

What is the best way to map product features to UI screens and navigation?▼

Mapping product features to UI screens involves defining many-to-many relationships between features and screens, then structuring coherent navigation using hub-and-spoke, linear, hierarchical, or flat patterns.

How do I generate design system entries from product requirements?▼

Generate design system entries by identifying shared components across your screens and creating DES- entries that map these reusable UI elements directly to your product requirements.

Can I define multiple navigation patterns within a single screen flow structure?▼

Yes, you can define multiple navigation patterns within a single screen flow structure, applying hub-and-spoke, linear, hierarchical, or flat patterns to support different user journey segments.

Do I need user journey inputs to start defining screen types and component placement?▼

Yes, user journey inputs are required to start defining screen types and component placement, as the screen flow inventory pulls UJ- and FEA- artifacts to maintain traceability.

Why use a screen flow inventory for PRD validation and design handoff?▼

A screen flow inventory accelerates PRD validation and design handoff by producing end-to-end SCR- and DES- documentation that supports Red Team reviews and ensures feature traceability.

Related Skills

Explore More Design & Creative Skills→
mattgierhartmattgierhart
193

prd-v04-user-journey-mapping

Map triggers to value moments and generate UJ- entries for PRD v0.4.

Community
Advanced
mattgierhartmattgierhart
193

prd-v06-technical-specification

Generate API endpoint contracts and data model definitions from PRD architectural decisions.

Community
Advanced
MeechYourGoalsMeechYourGoals
2

chravel-ui-consistency

Audit Chravel's user interface for visual consistency and design system adherence.

Community
Intermediate
SufficientDaikonSufficientDaikon
8

info-architecture

Generate sitemaps and define navigation structures for websites and applications.

Community
Intermediate