skills.rest
Rocapine
RocapineOFFICIAL
Explore all skills by this author →
WebsiteGitHub

onboarding-best-practices

Guide end-to-end onboarding flows from Hook to Paywall with archetypes.

2|1|Updated Sep 30, 2025
Search Tags:#design#onboarding#conversion#best-practices#flow-patterns#composable-screen#inspection-protocol
One-click install
npx skills add https://github.com/Rocapine/react-native-onboarding --skill onboarding-best-practices-rocapine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: onboarding-best-practices
Source: https://github.com/Rocapine/react-native-onboarding/tree/main/claude-plugin/skills/onboarding-best-practices
Command: npx skills add https://github.com/Rocapine/react-native-onboarding --skill onboarding-best-practices-rocapine

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Designers and engineers often struggle to craft onboarding flows to convert, without a structured blueprint.

Core Features & Use Cases

  • Inspection-first design: run a probe to align with the host app's design system and tokens.
  • End-to-end flow guidance: from Hook to Paywall, including flow-shape and archetype heuristics.
  • Best-practice recipes: motion choreography, branching, accessibility, and performance guidelines.

Quick Start

Run the target-app probe from references/inspect-target-app.md and apply the flow-shape guidelines to design a conversion-optimized onboarding sequence.

Frequently Asked Questions about onboarding-best-practices

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

FAQPage Schema
How do I design a high-converting onboarding flow from hook to paywall?▼

To design a high-converting onboarding flow, use a structured blueprint that guides end-to-end progression from Hook to Paywall using composition archetypes like hero, reflection, social-proof, and commitment screens.

What are the best practices for adding permission requests during onboarding?▼

Best practices for onboarding permissions involve using a specific inspection protocol to determine exact insertion points, ensuring requests branch naturally within the flow without disrupting user progression or conversion rates.

How do I align a new onboarding sequence with my target app's existing design system?▼

To align onboarding with a target app, run an inspection probe against the host application to extract design tokens and apply design-system-agnostic blueprints that match the existing visual language.

What onboarding screen archetypes should I use to maximize user conversion?▼

To maximize user conversion, use onboarding composition archetypes including hero, question, reflection, social-proof, loader, and commitment screens, applying flow-shape heuristics to sequence them effectively.

Can I use this onboarding blueprint for apps with complex branching and motion choreography?▼

Yes, this onboarding blueprint supports complex branching and motion choreography by providing specific best-practice recipes for animations, accessibility guidelines, and performance optimization within the flow.

Why does my onboarding conversion rate drop before the paywall?▼

Onboarding conversion drops before the paywall when the flow lacks a structured progression, missing critical archetypes like social-proof or commitment screens that prepare users for the final paywall decision.

Related Skills

Explore More Design & Creative Skills→
DevXojeDevXoje

frontend-ui-ux

Translate designer intent into front-end UI/UX components without mockups.

Community
Basic
BekhruzTursunboevBekhruzTursunboev
7

bexa-motion

Implement cinematic motion and physics-based interactions in frontend UIs.

Community
Advanced
gensart-projsgensart-projs

performance-profiling

Measure Lighthouse scores and core web vitals to identify performance bottlenecks.

Community
Intermediate
manojbajaj95manojbajaj95
83

conversion-rate-optimization

Optimize conversion funnels from landing pages through paywalls and onboarding.

Community
Advanced