ON

onboarding-design

Audits and optimizes onboarding screens to drive users to the product's 'aha' moment.

Install

mkdir -p .claude/skills/onboarding-design && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/11376" && unzip -o skill.zip -d .claude/skills/onboarding-design && rm skill.zip

Installs to .claude/skills/onboarding-design

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Use when designing, reviewing, or auditing signup flows, goal-selection quizzes, permission prompts, paywalls, or any screen a user sees before their first meaningful action.
174 chars✓ has a “when” trigger
Intermediate

Key capabilities

  • Design and review signup flows and welcome screens
  • Optimize paywall placement within onboarding sequences
  • Audit permission prompt placement and copy
  • Ensure every screen drives to the 'aha moment'
  • Personalize onboarding based on user goals

How it works

The skill evaluates onboarding screens against core principles like outcomes over features, driving to the aha moment, personalization, delightful friction, and human touch to optimize the user's initial experience.

Inputs & outputs

You give it
Existing or proposed onboarding screens, user goals, and product features
You get back
Recommendations for optimizing onboarding flows, paywalls, and permission prompts to drive user engagement

When to use onboarding-design

  • Auditing signup flows
  • Optimizing paywall placement
  • Designing welcome screen sequences

About this skill

Onboarding Design

Overview

Onboarding is the product's job interview. Focus every decision on the shortest path to the aha moment: the first instant the user feels the core value personally.

When to Use

Use when:

  • Designing or reviewing signup flows, welcome screens, or goal-selection quizzes
  • Auditing permission prompt placement or copy
  • Building or optimizing a paywall within an onboarding sequence
  • Evaluating any screen between first launch and the user's first meaningful action

Not for:

  • Post-onboarding retention or engagement loops
  • General UX copywriting outside the onboarding context

Core Principles

1. Outcomes Over Features

Never list features. Show what the user's life looks like after using the product.

Instead ofWrite
"Learn vocabulary and grammar""Have real conversations in Paris"
"Track your calories""Fit into those jeans by August"
"Organize your tasks""Leave work on time, every day"

Every headline must describe a user outcome, not a product capability.

2. Drive to the Aha Moment

Identify your product's aha moment first. Every screen audit should start with this answer.

Map every screen between signup and the aha moment. Delete anything that doesn't move the user closer to it.

  • Airbnb: first booking confirmation
  • Spotify: first song played from a personalized playlist
  • Duolingo: first lesson completed with a streak started

3. Personalization First

Collect the user's goal before showing anything generic. Use their answer to:

  • Reorder feature highlights
  • Drive paywall copy and plan recommendation
  • Set the initial dashboard state

Never show a generic welcome screen to a user who has already told you their goal.

4. Delightful Friction

Short onboarding is not always better. Duolingo's 60-screen flow outperforms shorter ones because each screen delivers micro-progress and builds commitment. Delight through:

  • Progress indicators — show steps completed, not steps remaining
  • Loading animations — "Analyzing your answers..." frames waiting as personalization work
  • Micro-copy that celebrates — "Nice! 3 of 5 done"

Replace every neutral transition screen with one that celebrates progress or sets expectations.

5. Human Touch

At least one screen before the paywall must feel like it came from a person:

  • Founder photo or short video on the welcome screen
  • "Written by [Name], CEO" attribution on value propositions
  • Handwritten-style typography for personal messages

6. Pre-Permission Screens

Never trigger a native permission dialog without first explaining the benefit.

Custom screen: "We'll send daily streaks so you never lose progress."
    [I want to stay on track]    [Not now]
         ↓
    Native OS dialog

Use first-person framing for the confirm action: "I want to stay on track."

7. Multi-Intent Support

Users have more than one goal. Allow multiple selections (Headspace model), rank them to infer primary intent, and use the full combination for downstream personalization — not just the first pick.

Monetization

Personalized Paywall

The highest-converting paywall copy references what the user just told you.

Quiz: "What is your main goal?" → "Lose weight"

Paywall: "Your personalized weight-loss plan is ready.
          Most users with your goal reach their target in 8 weeks."

Grammarly's personalized approach produced a 20% lift in upgrade rates over generic copy. The paywall must contain at least one sentence referencing the user's specific quiz answer.

Unlock Value Animation

After the quiz, make personalization feel tangible before revealing the paywall:

"Building your plan..."
[Progress bar fills]
[✓ Goal identified  ✓ Schedule optimized  ✓ Plan ready]
"Your 8-week plan is ready."

Audit Checklist

  • Every headline describes a user outcome (not a feature)
  • The aha moment is identified and all screens before it are justified
  • Quiz answers drive subsequent screen content
  • Progress indicators show completion, not remaining steps
  • Every native permission has a pre-permission screen first
  • Goal/intent questions allow multiple selections
  • The paywall references the user's specific quiz answer
  • An unlock value animation appears between quiz and paywall
  • At least one screen has a human touch element

Common Mistakes

MistakeFix
Feature carousel at launchOutcome-focused value screens
Single-choice goal selectorMulti-select with ranking
Native permission dialog with no contextPre-permission screen first
Generic paywall copyReference quiz answers in headline
Progress bar showing steps remainingShow steps completed
Long form before any valueDeliver one value moment before data collection
Quiz results shown directly as paywallAdd unlock value animation between quiz and paywall

When not to use it

  • For post-onboarding retention or engagement loops
  • For general UX copywriting outside the onboarding context
  • When the goal is not to optimize the path to the 'aha moment'

Limitations

  • Not applicable for post-onboarding retention
  • Does not cover general UX copywriting
  • Focuses on screens before the first meaningful action

How it compares

This skill provides a structured audit checklist and specific principles for onboarding design, focusing on user outcomes and the 'aha moment', which is more targeted than general UX design advice.

Compared to similar skills

onboarding-design side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
onboarding-design (this skill)03moNo flagsIntermediate
ux-writing422moReviewBeginner
customer-service-expert17moNo flagsIntermediate
clarify03moNo flagsBeginner

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

ux-writing

content-designer

Create user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms, onboarding, empty states, success messages, and help text. Use when writing or editing any text that appears in apps, websites, or software interfaces, designing conversational flows, establishing voice and tone guidelines, auditing product content for consistency and usability, reviewing UI strings, or improving existing interface copy. Applies UX writing best practices based on four quality standards — purposeful, concise, conversational, and clear. Includes accessibility guidelines, research-backed benchmarks (sentence length, comprehension rates, reading levels), expanded error patterns, tone adaptation frameworks, and comprehensive reference materials.

42155

customer-service-expert

GitHamza0206

Expert guidance for improving customer service assistants. Use when optimizing UX, response time, tone, wording, conversation flow, or evaluating customer service quality.

10

clarify

SHUAXINDIARY

Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.

00

objection-preemptor

FISCFED9

One sentence - what this skill does and when to invoke it

00

page-cro

konankirajesh7-raj

When the user wants to optimize, improve, or increase conversions on any marketing page — including homepage, landing pages, pricing pages, feature pages, or blog posts. Also use when the user says "CRO," "conversion rate optimization," "this page isn't converting," "improve conversions," or "why is

00

ui-ux-pro-max

nextlevelbuilder

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

1,9092,023

Search skills

Search the agent skills registry