Stats
Actions
Tags
From figma-logos-svgl
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.
How this skill is triggered — by the user, by Claude, or both
Slash command
/figma-logos-svgl:onboarding-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
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.
Use when:
Not for:
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.
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.
Collect the user's goal before showing anything generic. Use their answer to:
Never show a generic welcome screen to a user who has already told you their goal.
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:
Replace every neutral transition screen with one that celebrates progress or sets expectations.
At least one screen before the paywall must feel like it came from a person:
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."
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.
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.
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."
| 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 |
npx claudepluginhub douinc/agent-skills --plugin writing-project-readmeCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.