onboarding-flow

# Onboarding Flow A skill for designing onboarding for two very different contexts. SaaS/web onboarding and consumer/mobile onboarding fail for opposite reasons if you cross the patterns: block a SaaS user behind a linear wizard and they bounce before seeing the product; let a consumer app skip the personalization quiz and you lose the sign-up's whole reason for existing. Pick the right one before you design or evaluate anything. This skill defines the *sequence and screen types*. It is not a copywriting or styling skill: - **Every word that appears on screen** (headlines, button labels, quiz questions, permission copy, checklist item text) routes to the **righter** skill. Don't guess at wording here. - **Every structural/visual decision** (spacing, components, tokens, animation, accessibility) routes to **vois-patterns → vois-components → vois-tokens**, in that order. - This skill sits *above* both: it tells you which screens exist and in what order (or should); righter tells you what words go on them; vois tells you how they're built. --- ## Two Modes ### Mode 1: Evaluate an Existing Flow 1. **Get the flow in front of you.** Screenshots, a Figma/Mobbin link, or a plain description of the screen-by-screen sequence. If it's incomplete, say what's missing rather than guessing at unseen screens. 2. **Determine the shape** using the decision tree below — SaaS companion checklist or consumer linear sequence. An existing flow that uses the wrong shape for its ...