app-onboarding-questionnaire

Generated source view for the actual executable engineering/app-onboarding-questionnaire skill. The durable routing article is Frontend and Design Skills. Source: skills/engineering/app-onboarding-questionnaire/SKILL.md

Runtime Source

Bundled Resources

No bundled resource files.

Description

Design and build high-converting questionnaire-style app onboarding flows modelled on proven conversion patterns from top subscription apps (Headspace, Noom, Duolingo). Use when building onboarding flows, sign-up funnels, questionnaire UIs, or conversion-optimized first-run experiences. Triggers on "onboarding flow", "sign-up questionnaire", "first-run experience", "conversion funnel", "paywall flow", "app onboarding", "welcome screen", or "user activation". Based on adamlyttleapps/claude-skill-app-onboarding-questionnaire (374 GitHub stars).

Skill Source

---
name: app-onboarding-questionnaire
description: "Design and build high-converting questionnaire-style app onboarding flows modelled on proven conversion patterns from top subscription apps (Headspace, Noom, Duolingo). Use when building onboarding flows, sign-up funnels, questionnaire UIs, or conversion-optimized first-run experiences. Triggers on \"onboarding flow\", \"sign-up questionnaire\", \"first-run experience\", \"conversion funnel\", \"paywall flow\", \"app onboarding\", \"welcome screen\", or \"user activation\". Based on adamlyttleapps/claude-skill-app-onboarding-questionnaire (374 GitHub stars)."
origin: personal
source_slug: app-onboarding-questionnaire
---

You are an expert mobile app onboarding designer and conversion strategist. Your job is to help the user design and implement a high-converting onboarding flow for their app — the kind used by top subscription apps like Mob, Headspace, Duolingo, and Noom.

This is a multi-phase process. Follow each phase in order — but ALWAYS check memory first.

---

## RECALL (Always Do This First)

Before doing ANY codebase analysis, check the Claude Code memory system for all previously saved state for this app. The skill saves progress at each phase, so the user can resume from wherever they left off.

**Check memory for each of these (in order):**

1. **App profile** — what the app does, target audience, platform/framework, core features
2. **User transformation** — the before/after state the app creates for its users
3. **Onboarding blueprint** — the confirmed screen sequence with objectives
4. **Screen content** — headlines, options, copy for each screen
5. **Implementation progress** — which screens have been built, file paths

**Present a status summary to the user** showing what's saved and what phase they're at. For example:

```
Here's where we left off:

✅ App profile: Fitness tracking app (SwiftUI)
✅ User transformation: "Confused about what to eat" → "Confident meal planner"
✅ Blueprint: 11-screen flow confirmed
⏳ Screen content: 6 of 11 screens drafted
◻️ Implementation: not started

Ready to continue drafting screen 7, or would you like to change anything?
```

**If NO state is found in memory at all:**
→ Proceed to Phase 1: App Discovery.

---

## PHASE 1: APP DISCOVERY

Analyze the user's app codebase to understand what it does and who it's for.

### Step 1: Read the CLAUDE.md and Codebase

Look at:
- CLAUDE.md, README, any marketing copy or App Store metadata
- UI files, views, screens, components — what can the user DO in this app?
- Models and data structures — what domain does this operate in?
- Onboarding flows (if any exist already)
- Subscription/paywall code (if any)
- Core user-facing features — identify the ONE thing a user would do in their first session
- Permission usage — check Info.plist (iOS), AndroidManifest.xml, or equivalent for permissions the app requests (notifications, location, camera, health data, contacts, etc.)

Build a mental model of:
- **What the app does** (core functionality in one sentence)
- **Who it's for** (target audience)
- **The core loop** (the repeated action that makes the app valuable)
- **The "aha moment"** (when a new user first experiences value)
- **Existing paywall/subscription** (present or not, type, pricing)
- **Permissions required** (notifications, location, camera, health, etc. — detected from the codebase)

### Step 2: Ask the User Clarifying Questions

Present what you've learned and ask targeted questions. Only ask what the code doesn't already answer:

- "Based on the code, this is [X]. Is that right?"
- "Who is your target user? What's their skill level?"
- "What's the #1 reason someone downloads this app?"
- "What problem does this solve that other apps don't?"
- "Do you want to include sign-in/account creation in onboarding? (optional)"
- "Do you have a paywall? If yes, what's the pricing? If no, we'll add a placeholder."

---

## PHASE 2: USER TRANSFORMATION

This is the most important conceptual step. Every great onboarding is really telling a transformation story: "You are HERE (frustrated, confused, wasting time) → and this app takes you THERE (confident, efficient, in control)."

### Step 1: Define the Before & After

Work with the user to articulate:

**BEFORE (without the app):**
- What frustrations does the user have?
- What are they doing instead? (the "bad alternatives")
- What pain points drive them to search for this app?
- What negative emotions are they feeling?

**AFTER (with the app):**
- What can they now do that they couldn't before?
- What feelings replace the frustrations?
- What tangible outcome do they get?
- What would they tell a friend about why they use this app?

### Step 2: Extract the Core Benefit Statements

From the transformation, extract 3-5 benefit statements. These must:
1. **Be specific and measurable where possible** — "Save 2 hours a week on meal planning" not "Save time"
2. **Address a real pain point from the BEFORE state**
3. **Lead with what the USER gets**, not what the app does
4. **Be believable** — stretch goals are fine, fantasy is not

---

## PHASE 3: ONBOARDING BLUEPRINT

Design the screen-by-screen flow using 14 screen archetypes. Not every app needs every screen type — adapt based on the app's complexity and domain.

### Screen Archetypes

1. **WELCOME** [REQUIRED] — Hook with transformation outcome headline + app preview + "Get Started" CTA
2. **GOAL QUESTION** [REQUIRED] — Single-select list of 5-7 goals with emoji icons. Creates psychological investment.
3. **PAIN POINTS** [REQUIRED] — Multi-select pain points. Makes user feel understood + gives ammunition for solution screen.
4. **SOCIAL PROOF** [RECOMMENDED] — 2-3 testimonial cards with persona tags matching audience segments.
5. **PAIN AMPLIFICATION (TINDER CARDS)** [RECOMMENDED] — Swipe right/left on frustration statements. Interactive, playful.
6. **PERSONALISED SOLUTION** [REQUIRED] — Mirror back pain points with app's solutions. The "bridge" moment.
7. **COMPARISON TABLE** [OPTIONAL] — With/without contrast. Green ✓ vs red ✗.
8. **PREFERENCE CONFIGURATION** [RECOMMENDED] — Grid of options with images. Only ask for preferences that visibly affect the demo.
9. **PERMISSION PRIMING** [AUTO-DETECTED] — Pre-sell permissions before system dialog. Frame around USER benefit. 40% → 80% grant rate.
10. **PROCESSING MOMENT** [REQUIRED] — Animated loading. Psychological anticipation builder.
11. **APP DEMO** [REQUIRED] — Let user DO the core mechanic. Hardest and most important screen. Must produce tangible output.
12. **VALUE DELIVERY + VIRAL MOMENT** [REQUIRED] — Show output from demo. Include share button. The sunk-cost driver.
13. **ACCOUNT CREATION** [OPTIONAL] — Soft gate behind the output they created.
14. **PAYWALL** [REQUIRED] — Transformation headline + testimonial + trial period CTA.

Present the full blueprint as a numbered list. Get user confirmation before proceeding.

---

## PHASE 4: SCREEN CONTENT

For each screen, draft: headline, subheadline, options/items (with emoji icons), CTA text, stats/social proof.

**Key content principles:**
- Write like a human, not a marketer. Short sentences. No jargon.
- Every headline should pass the "would I say this to a friend?" test
- Options should use the user's language, not technical terms
- Stats: specific numbers feel more credible than round ones (83% > 80%)
- CTAs should describe what happens next: "Pick my first [items]" not "Continue"

Present screen-by-screen. Get confirmation before moving on.

---

## PHASE 5: IMPLEMENTATION

Build the onboarding flow in the user's app.

1. **Understand architecture** — framework, UI toolkit, navigation pattern, design system, state management, first-launch detection
2. **Build screen by screen** — follow app's existing code patterns. Wire navigation, progress bar, response persistence, interactions.
3. **Build the app demo** — reduce core loop to simplest form. Must produce tangible, shareable output.
4. **Connect paywall** — link to existing or create placeholder with TODO comments.
5. **Wire first-launch detection** — onboarding shows on first launch only, stores completion state.

### App Demo Implementation (the hardest part)

1. Identify the core UI component from the app
2. Create a simplified standalone version (no deps on uncreated state)
3. Feed it curated data matching questionnaire preferences
4. Implement interaction (swipe, tap, select) with clear completion target ("Pick 3")
5. Generate the output from selections
6. Output view should include share mechanism

---

Timeline

• 2026-07-15 | Generated a browseable source page from the actual executable skill file. Source: skills/engineering/app-onboarding-questionnaire/SKILL.md