Design Coherent User Journeys

This skill designs user flows and navigation structure following proven UX patterns, producing a flow map rather than implementing any single page or high-fidelity mockup. It starts by reading the project's own design-system references, CLAUDE.md for the component inventory, DESIGN-LANGUAGE.md sections 13-14 and 19-20 for layout patterns, and components/patterns/ for available building blocks, before applying a fixed set of UX principles. Information architecture rests on progressive disclosure, show only what's needed at each step, hide complexity behind logical drill-downs, Miller's Law, chunk information into groups of 5-9 items maximum, and Hick's Law, minimize choices per screen, since fewer options mean faster decisions. Navigation patterns cover Hub and Spoke, dashboard to detail pages and back, the default for mobile apps, Linear Flow, step 1 to step 2 to step 3, for forms, onboarding, or checkout, and Tab Navigation, 3-5 top-level sections via a BottomNav. Screen flow rules require every flow to have a clear entry point and exit point, cap any key feature at a maximum of 3 taps from the home screen, keep back navigation always available except on root screens, give error states recovery paths, retry, go back, contact support, and use skeleton screens for loading states rather than spinners inside cards. Page composition, drawn from the project's own DESIGN-LANGUAGE.md, follows an Information Pyramid, Hero, then a KPI Grid, then Details, then Lists, keeps each screen answering one primary question, puts the most important metric or action above the fold, and composes screens from four section types: Full Card, A, Grid, B, Carousel, C, and Hero, D.

Output is an ASCII flow diagram showing screen connections, a screen inventory listing each screen's purpose and key components, edge cases, empty states, errors, loading, for every screen, and scaffolded pages built from PageShell, TopBar, and BottomNav patterns; the actual page files are then generated using /ss-page conventions.

Use this skill to design a user flow and its navigation structure end to end. Do not use it to implement a single page once the flow is settled, use /ss-page instead, to write copy for each step once the structure is settled, use /ss-copy instead, for the information architecture of an entire product, narrow the scope to one flow first, or when high-fidelity, pixel-perfect mockups are actually needed, since this produces a flow map, not final visual design.

Input is a description of the flow to design plus the project's own CLAUDE.md, DESIGN-LANGUAGE.md, and components/patterns/ references. Output is an ASCII flow diagram, a screen inventory, per-screen edge cases, and scaffolded page files, via PageShell, TopBar, BottomNav, and /ss-page conventions, ready for the copy and page-implementation steps that follow.

The project's own design-system docs, CLAUDE.md and DESIGN-LANGUAGE.md, and component patterns, PageShell, TopBar, BottomNav, and the four section types; hands off to /ss-page for page implementation and /ss-copy for step-by-step copywriting once the flow is settled.

Product and design-engineering teams designing a new user flow or navigation structure who want it grounded in established UX laws, progressive disclosure, Miller's, Hick's, and the project's own design language before writing any page code. The project is MIT licensed.