crit-onboarding-flows

Evaluate onboarding flows and generate annotated HTML wireframes with flow diagrams.

3|Updated Feb 23, 2026
One-click install
npx skills add https://github.com/metedata/design-crit --skill crit-onboarding-flows
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: crit-onboarding-flows
Source: https://github.com/metedata/design-crit/tree/main/skills/crit-onboarding-flows
Command: npx skills add https://github.com/metedata/design-crit --skill crit-onboarding-flows

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps designers and product teams identify friction in first-run experiences and craft onboarding flows that get new users to the product's core value quickly and reliably. It reduces drop-off by making explicit which steps can be deferred, how permissions should be requested, and how empty states and sample content should teach by doing.

Core Features & Use Cases

  • Flow mapping & time-to-value analysis: Maps every screen and step from signup to first value, counts steps, and flags deferrable work so teams can shorten the path to value.
  • Option generation with wireframes: Produces 2–3 annotated onboarding flow options as HTML wireframes, including flow diagrams, tooltip tours, permission primers, and progressive disclosure maps for comparison.
  • Practical alignment & constraints: Reads locked screen inventory and edge-state decisions to ensure onboarding surfaces exist and documents constraints for navigation, content voice, and accessibility.
  • Use case: Use this Skill to evaluate a SaaS onboarding that currently requires multiple setup steps and generate a "Zero Setup" and a "Guided Wizard" option to test which reaches first value faster.

Quick Start

Ask the skill to generate two onboarding options that reach the core action in under 60 seconds, including flow diagrams, annotated wireframes, step counts, explicit deferral decisions, and permission primers.

Frequently Asked Questions about crit-onboarding-flows

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

FAQPage Schema
How do I design onboarding flows that reduce time-to-value for new users?

Onboarding flows reduce time-to-value by mapping every screen from signup to first value, counting steps, and flagging deferrable work to shorten the path. This approach minimizes drop-off by using progressive disclosure and explicit deferral decisions to get users to the core action quickly.

What is the best way to wireframe a first-run experience with progressive disclosure?

Wireframing a first-run experience with progressive disclosure involves generating 2–3 annotated HTML flow options that map tooltip tours and permission primers. Comparing these options helps identify which flow reaches the core value fastest while minimizing setup friction.

How do I sequence permissions in mobile onboarding without losing users?

Sequence permissions in mobile onboarding by using permission primers that explain the request contextually before it appears. Deferring non-essential permissions until after the user reaches core value prevents drop-off and maintains momentum during the first-run experience.

Can I generate onboarding flow options for both web and mobile applications?

Yes, you can generate onboarding flow options for both web and mobile applications. The analysis applies to first-run experiences, empty-state onboarding, and progressive disclosure across both platforms while documenting navigation and accessibility constraints.

How do I use empty states to teach users during onboarding?

Use empty states to teach by doing during onboarding by incorporating sample content and interactive guidance into the flow. Evaluating empty-state onboarding ensures these surfaces guide users toward the core action effectively without requiring explicit setup steps.