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. This skill picks the right shape before designing or evaluating anything, then checks the result against 18 rules drawn from real onboarding flows (Dropbox Dash, Apollo, Outseta, NYTimes, Rocket Money, Cleo, and more).

It is not a copywriting or styling skill — every word on screen routes to righter, every structural or visual decision routes to vois-patterns → vois-components → vois-tokens. This skill sits above both: it decides which screens exist and in what order.

Two modes

Evaluate an existing flow. Give it screenshots, a Figma/Mobbin link, or a plain screen-by-screen description. It determines the shape (SaaS companion checklist vs. consumer linear sequence), flags it if the flow is using the wrong shape for its product type, then walks the flow screen by screen against every applicable rule and reports each violation as an Observed/Expected pair with a concrete fix — plus what to route to righter or vois-patterns next.

Generate a new flow. Describe the product. It names the activation event first — what does this user need to accomplish for onboarding to have worked, and what’s necessary to reach it — and cuts anything that doesn’t move toward it. Then it walks the same shape decision, pulls current real-world reference from Mobbin when that tool is available (treated as evidence of current practice, not proof a pattern is correct), and outputs a numbered screen sequence with the purpose, primary action, and rule ids each screen satisfies.

The shape decision

SaaS/web products (used repeatedly at a desk, ongoing account) get a companion checklist docked alongside the real product — never a full-screen wizard blocking it, unless the account genuinely can’t function until a step is done. Consumer/mobile apps (short sessions, often a subscription decision up front) get a linear full-screen sequence: value prop → personalize → permissions → account → paywall → confirmation → home. A single surface that blends both (Notion, Figma, Slack-style prosumer tools) defaults to the SaaS shape, with at most one borrowed personalization screen if the product’s early value genuinely depends on it.

The rule set

18 rules total: 5 universal (one primary action per screen, honest progress indicators, never trap the user, use every personalization answer within a screen or two, route copy/structure to the right skill), 6 for the SaaS companion-checklist shape, and 7 for the consumer linear-sequence shape — covering personalization quizzes, permission priming, paywalls, and legally required consent screens. Every rule is tagged MUST (coercion- or deception-adjacent, no legitimate exception — an always-present exit, honest progress, a real non-paying paywall path, undisguised consent buttons) or SHOULD (a strong default a designer can deviate from with a stated reason). The rules live in a canonical data/onboarding-rules.json, restated for readability in shape-specific reference files, with a sync script that fails CI if the two drift, and a 7-case eval corpus of worked good/bad flows to catch regressions.

Use when: designing a new onboarding flow from scratch, or reviewing/auditing an existing one — signup sequences, setup checklists, first-run wizards, personalization quizzes, permission priming, or paywalls, for either a SaaS/web product or a consumer/mobile app.