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.zipInstalls 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.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
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 of | Write |
|---|---|
| "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
| Mistake | Fix |
|---|---|
| Feature carousel at launch | Outcome-focused value screens |
| Single-choice goal selector | Multi-select with ranking |
| Native permission dialog with no context | Pre-permission screen first |
| Generic paywall copy | Reference quiz answers in headline |
| Progress bar showing steps remaining | Show steps completed |
| Long form before any value | Deliver one value moment before data collection |
| Quiz results shown directly as paywall | Add 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.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| onboarding-design (this skill) | 0 | 3mo | No flags | Intermediate |
| ux-writing | 42 | 2mo | Review | Beginner |
| customer-service-expert | 1 | 7mo | No flags | Intermediate |
| clarify | 0 | 3mo | No flags | Beginner |
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.
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.
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.
objection-preemptor
FISCFED9
One sentence - what this skill does and when to invoke it
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
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.