prd-v04-screen-flow-definition_skill

Overview

This skill converts user journeys into a concrete screen inventory and navigation map during PRD v0.4 User Journey Mapping. It outputs SCR- entries for screens and DES- entries for design system elements, ensuring journeys, features, and constraints are traceable. The goal is a prioritized, implementable UI structure ready for v0.5 Red Team Review.

How this skill works

The skill ingests UJ- (User Journey Mapping), FEA- (Feature Value Planning), and BR- (constraints) inputs. It inventories pages, modals, panels, and components, maps features to screens, defines navigation patterns, and identifies shared design elements. Final outputs are SCR- entries (screens) and DES- entries (design system components) with traceability to journeys, features, and constraints.

When to use it

• You need to answer “what screens do we need?” from user journeys
• Consolidating UJ- steps into an actionable screen list for an MVP
• Planning navigation and hierarchy for onboarding or core flows
• Preparing artifacts to feed v0.5 Red Team Review or technical scoping
• When features appear orphaned or screen count balloons for an MVP

Best practices

• Start with Pages, then add Modals/Panels to reduce navigation friction
• Map every UJ- step to a SCR- entry and every FEA- to at least one screen
• Choose a navigation pattern (Hub & Spoke, Linear, Hierarchical, Flat) based on product type
• Extract shared UI into DES- entries to avoid duplication and speed implementation
• Keep MVP screen count reasonable (<15 pages) and avoid screen explosion

Example use cases

• Generate SCR- and DES- inventories from a completed user journey map for an analytics SaaS
• Convert onboarding journey into a linear flow with required modals and panels
• Audit feature-to-screen matrix to find orphaned features or unnecessary screens
• Define navigation hierarchy for a docs-heavy product using Hierarchical pattern
• Produce screen-level constraints tied to BR- requirements for accessibility and roles