From 8b2d6474da905329f5bf351cf04ed2d252514384 Mon Sep 17 00:00:00 2001 From: testuser Date: Mon, 6 Apr 2026 16:20:05 -0400 Subject: [PATCH 1/9] Add create-app-onboarding skill\n\nDesigns and builds high-converting questionnaire-style app onboarding flows\nmodelled on proven conversion patterns from top subscription apps (Mob,\nHeadspace, Noom, Duolingo).\n\nSource: github.com/adamlyttleapps/claude-skill-app-onboarding-questionnaire --- create-app-onboarding/CLAUDE.md | 48 ++++ create-app-onboarding/LICENSE | 21 ++ create-app-onboarding/README.md | 84 +++++++ create-app-onboarding/SKILL.md | 419 ++++++++++++++++++++++++++++++++ 4 files changed, 572 insertions(+) create mode 100644 create-app-onboarding/CLAUDE.md create mode 100644 create-app-onboarding/LICENSE create mode 100644 create-app-onboarding/README.md create mode 100644 create-app-onboarding/SKILL.md diff --git a/create-app-onboarding/CLAUDE.md b/create-app-onboarding/CLAUDE.md new file mode 100644 index 0000000..a19f79e --- /dev/null +++ b/create-app-onboarding/CLAUDE.md @@ -0,0 +1,48 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## What This Is + +A Claude Code skill (`app-onboarding-questionnaire`) that designs and builds high-converting questionnaire-style onboarding flows for any app. Modelled on proven conversion patterns from top subscription apps (Mob, Headspace, Noom, Duolingo). Invoked via `/app-onboarding-questionnaire` from within a user's app project. + +## Skill Structure + +- **SKILL.md** — The skill prompt. Defines a 5-phase workflow: App Discovery → User Transformation → Blueprint → Screen Content → Implementation. Uses memory to persist state across conversations. +- **CLAUDE.md** — This file. Development guidance for working on the skill itself. + +## The Onboarding Framework + +The skill implements a 13-screen archetype sequence based on the Mob recipe app's onboarding (the gold standard reference). The psychological sequence is: + +1. **Hook** — Welcome + app preview showing the end state +2. **Goal elicitation** — "What are you trying to achieve?" (single-select, creates investment) +3. **Pain discovery** — "What prevents you?" (multi-select, surfaces frustrations) +4. **Social proof** — Testimonials matched to user personas +5. **Pain amplification** — Tinder-style agree/disagree cards (interactive self-identification) +6. **Personalised solution** — Mirror their pains back with stats showing how the app solves each one +7. **Comparison table** — Life with vs without the app (optional) +8. **Preference config** — Functional personalisation that feeds the upcoming demo +9. **Permission priming** — Auto-detected from codebase; benefit-framed pre-sell before system dialog (notifications, location, camera, etc.) +10. **Processing moment** — "Building X just for you..." (anticipation, even if instant) +11. **App demo** — User actually USES the core app mechanic (hardest screen — must be functional, not a tour) +12. **Value delivery** — Tangible output from their demo + share/viral moment +13. **Account gate** — Optional sign-in to unlock what they just created +14. **Paywall** — Hard paywall with trial, social proof, and pricing + +Not every app needs every screen — the skill adapts based on complexity. + +## Key Design Decisions + +- **Platform-adaptive** — Works with SwiftUI, UIKit, React Native, Flutter, Jetpack Compose, or any framework. Reads the codebase to determine patterns. +- **The app demo is the differentiator** — Most onboarding skills just do questionnaires. This one requires building a functional mini-demo of the app's core interaction inside the onboarding flow. This is the hardest part and the most important. +- **Viral moment is intentional** — The demo must produce a shareable output. This is where organic growth comes from. +- **Memory-driven resume** — All phases save to Claude Code memory so users can resume across conversations. +- **Non-marketer friendly** — The skill asks simple questions and handles the conversion psychology. The user doesn't need marketing expertise. + +## Conventions + +- The skill runs from the user's app project directory, not from this skill directory. +- SKILL.md frontmatter must include `name`, `description`, and `user-invocable: true`. +- Always check memory for prior state before starting any phase. +- Copy should be conversational, not marketing-speak. "Would I say this to a friend?" test. diff --git a/create-app-onboarding/LICENSE b/create-app-onboarding/LICENSE new file mode 100644 index 0000000..de84c4c --- /dev/null +++ b/create-app-onboarding/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2026 Adam Lyttle + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/create-app-onboarding/README.md b/create-app-onboarding/README.md new file mode 100644 index 0000000..802f9f7 --- /dev/null +++ b/create-app-onboarding/README.md @@ -0,0 +1,84 @@ +# App Onboarding Questionnaire + +A [Claude Code](https://claude.ai/code) skill that designs and builds high-converting questionnaire-style onboarding flows for your app — modelled on proven conversion patterns from top subscription apps like Mob, Headspace, Noom, and Duolingo. + +## What It Does + +Run `/app-onboarding-questionnaire` from your app project and the skill will: + +1. **Analyse your codebase** to understand what your app does, who it's for, and what permissions it needs +2. **Define the user transformation** — the before/after story that drives your onboarding narrative +3. **Design a screen-by-screen blueprint** using a proven 14-screen psychological framework +4. **Draft all the copy** — headlines, questions, options, CTAs, social proof +5. **Build the onboarding flow** in your app's native framework (SwiftUI, React Native, Flutter, etc.) + +No marketing expertise required. The skill handles the conversion psychology — you just answer questions about your app. + +## The Framework + +The onboarding follows a proven psychological sequence used by the highest-converting subscription apps: + +| # | Screen | Purpose | +|---|--------|---------| +| 1 | Welcome | Hook — show the end state, create desire | +| 2 | Goal Question | "What are you trying to achieve?" — creates psychological investment | +| 3 | Pain Points | "What prevents you?" — surfaces frustrations, builds empathy | +| 4 | Social Proof | Testimonials matched to user personas | +| 5 | Tinder Cards | Swipe agree/disagree on pain statements — interactive self-identification | +| 6 | Personalised Solution | Mirror their pains back with stats showing how the app solves each one | +| 7 | Comparison Table | Life with vs without the app *(optional)* | +| 8 | Preferences | Functional personalisation that feeds the upcoming demo | +| 9 | Permission Priming | Benefit-framed pre-sell before system permission dialogs *(auto-detected)* | +| 10 | Processing Moment | "Building X just for you..." — anticipation builder | +| 11 | App Demo | User actually USES the core app mechanic — not a tour, a real interaction | +| 12 | Value Delivery | Tangible output from their demo + share/viral moment | +| 13 | Account Gate | Optional sign-in to unlock what they just created | +| 14 | Paywall | Hard paywall with trial, social proof, and pricing | + +Not every app needs every screen — the skill adapts based on your app's complexity. + +## What Makes This Different + +Most onboarding generators stop at the questionnaire. This skill goes further: + +- **App Demo Screen** — Builds a functional mini-version of your app's core interaction inside the onboarding. Users pick recipes, choose exercises, categorise transactions — whatever your core loop is. They DO something and get a tangible result back. +- **Viral Moment** — The demo output is designed to be shareable. This is where organic growth comes from. +- **Permission Priming** — Auto-detects permissions from your codebase (Info.plist, AndroidManifest, etc.) and creates benefit-framed priming screens that convert at 70-80%+ vs ~40% for cold system prompts. +- **Resumable** — Progress is saved to Claude Code's memory system. Come back tomorrow and pick up where you left off. + +## Installation + +### Option 1: Add to your Claude Code skills directory + +```bash +cd ~/.claude/skills +git clone https://github.com/adamlyttleapps/claude-skill-app-onboarding-questoinnaire.git app-onboarding-questionnaire +``` + +### Option 2: Add as a dependency in your project's `.claude/settings.json` + +```json +{ + "skills": [ + "github:adamlyttleapps/claude-skill-app-onboarding-questoinnaire" + ] +} +``` + +## Usage + +From your app's project directory in Claude Code: + +``` +/app-onboarding-questionnaire +``` + +The skill will analyse your codebase and walk you through each phase interactively. + +## Reference + +The framework is based on analysis of the [Mob](https://www.mob.co.uk/) recipe app's onboarding flow (19 screens), which is widely regarded as one of the best-converting onboarding experiences in the App Store. + +## License + +MIT diff --git a/create-app-onboarding/SKILL.md b/create-app-onboarding/SKILL.md new file mode 100644 index 0000000..6e9b585 --- /dev/null +++ b/create-app-onboarding/SKILL.md @@ -0,0 +1,419 @@ +--- +name: app-onboarding-questionnaire +description: Design and build a high-converting questionnaire-style onboarding flow for your app, modelled on proven conversion patterns from top subscription apps. +user-invocable: true +--- + +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." + +**Save to memory:** app profile (what it does, who it's for, platform, core features, paywall status, sign-in preference). + +--- + +## 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 + +Present to the user for confirmation: + +``` +Here's the transformation story I'd recommend: + +BEFORE: [1-2 sentences describing the frustration] +AFTER: [1-2 sentences describing the outcome] + +Core benefits: +1. [Benefit] — addresses [pain point] +2. [Benefit] — addresses [pain point] +3. [Benefit] — addresses [pain point] +``` + +**Save to memory:** confirmed user transformation + benefit statements. + +--- + +## PHASE 3: ONBOARDING BLUEPRINT + +Now design the screen-by-screen flow. The blueprint follows a proven psychological sequence. Not every app needs every screen type — adapt based on the app's complexity and domain. + +### The Onboarding Framework + +The flow uses 11 screen archetypes. You MUST include screens marked [REQUIRED]. Others are [RECOMMENDED] or [OPTIONAL] based on fit. + +#### Screen 1: WELCOME [REQUIRED] +**Objective:** Hook — show the end state, create desire. +- Bold headline stating the transformation outcome (not the app name) +- Show a preview/mockup of the app in use (reference an actual app screen from the codebase) +- "Get Started" primary CTA +- "Log in" text link (only if user wants sign-in) +- Progress bar at top (shows throughout entire flow) + +**Pattern:** "Welcome to your new [transformation outcome]" + device preview showing the app's best screen. + +#### Screen 2: GOAL QUESTION [REQUIRED] +**Objective:** Get the user to self-identify their primary goal. This creates psychological investment — they've now told the app what they want, which makes them feel the app owes them a solution. +- "What are you trying to achieve?" (or domain-appropriate question) +- Single-select list of 5-7 goals relevant to the app's domain +- Each option has an emoji icon + short label +- Selection highlights with accent colour, reveals "Continue" button + +**Key principle:** The options must be specific enough that users think "yes, that's exactly me" — not generic. Derive these from the app's actual feature set and target audience segments. + +#### Screen 3: PAIN POINTS [REQUIRED] +**Objective:** Surface the user's frustrations. This does two things: (1) makes them feel understood, (2) gives you ammunition for the solution screen later. +- "What prevents you from [achieving their goal]?" (reference their Screen 2 answer if possible) +- Multi-select list of 5-7 pain points +- Checkbox-style selection (multiple allowed) +- "Continue" button always visible + +**Key principle:** Pain points should be emotionally resonant and specific. "Lack of time" works. "Suboptimal workflow" does not. Use the language real users would use. + +#### Screen 4: SOCIAL PROOF [RECOMMENDED] +**Objective:** Reduce risk perception. "Others like me have succeeded with this." +- "We've helped thousands of others like you" (adapt number if the app has real stats) +- 2-3 testimonial cards +- Each testimonial has: name/initials, persona tag (e.g. "Busy professional", "Beginner"), review text +- Tags should match the audience segments from Screen 2 + +**Key principle:** If the app doesn't have real testimonials yet, suggest the user writes aspirational ones based on the transformation they want users to experience. Mark these as placeholder content to be replaced with real reviews later. + +#### Screen 5: PAIN AMPLIFICATION — TINDER CARDS [RECOMMENDED] +**Objective:** Deepen emotional engagement through interactive self-identification. +- "Which statements do you relate to?" +- Large card with a pain/frustration statement in quotes +- Swipe right (✓) to agree, swipe left (✗) to dismiss +- 3-5 cards, each stating a common frustration in the user's domain +- Feels playful and interactive, not like a survey + +**Key principle:** These statements should be things the user will nod along to. They're designed to make the user think "this app really gets me." Use first-person language: "I spend too much time on..." not "Users often struggle with..." + +#### Screen 6: PERSONALISED SOLUTION [REQUIRED] +**Objective:** Mirror back their pain points and show how the app specifically solves each one. This is the "bridge" moment — "you told us your problems, here's exactly how we fix them." +- "Welcome to a smarter way to [domain activity]" +- List of 3-4 items, each showing: + - Their stated pain point (greyed/small text) + - The app's solution with a compelling stat or promise (bold text) +- Each item has a relevant icon/illustration + +**Key principle:** The stats should be specific and credible. "Users save an average of 25% on X" is better than "Save money." If the app is new and has no stats, use industry benchmarks or logical projections. + +#### Screen 7: COMPARISON TABLE [OPTIONAL] +**Objective:** Make the with/without contrast visceral and obvious. +- Bold stat headline: "[X]% of people struggle with [problem]" +- Comparison table: App Name vs "Without" +- 3-4 rows comparing outcomes (green ✓ vs red ✗) +- Simple, scannable, no ambiguity about which side wins + +#### Screen 8: PREFERENCE CONFIGURATION [RECOMMENDED] +**Objective:** Functional personalisation — collect preferences that make the upcoming demo relevant to them. Also deepens investment (they're customising "their" experience). +- "What do you like?" or domain-appropriate preference question +- Grid of options with images/icons (2-column grid works well) +- Multi-select with visual highlight on selection +- Can be 1-2 screens depending on how many preference dimensions matter + +**Key principle:** Only ask for preferences that will visibly affect the demo in the next phase. Don't ask questions that go nowhere — users notice. + +#### Screen 9: PERMISSION PRIMING [AUTO-DETECTED] +**Objective:** Pre-sell the user on granting permissions BEFORE the system dialog appears. A cold system prompt ("App wants to send you notifications") converts at ~40%. A primed request with context converts at 70-80%+. + +**How to determine which permissions to prime:** +1. **Auto-detect from the codebase** — scan Info.plist (iOS), AndroidManifest.xml (Android), or framework-equivalent for declared permissions: notifications, location, camera, microphone, health data, contacts, photos, motion, tracking (ATT), etc. +2. **If no permissions are detected**, skip this screen entirely. +3. **If multiple permissions are needed**, show one priming screen per permission. Order them by how essential they are to the core experience — most important first. + +**Screen layout for each permission:** +- Headline explaining the VALUE of the permission, not the permission itself + - Notifications: "Never miss [the thing they care about]" — not "Enable notifications" + - Location: "Find [things] near you" — not "Allow location access" + - Camera: "Scan/capture [the thing]" — not "Allow camera access" + - Health: "Track your [metric] automatically" — not "Allow health access" +- 2-3 bullet points showing what they'll get by granting the permission +- An illustration or icon representing the benefit (not a phone settings screenshot) +- "Enable" primary CTA → triggers the actual system permission dialog +- "Not now" secondary text link → skips without asking (never punish this choice) + +**Key principles:** +- NEVER trigger the system permission dialog without priming first. You only get one shot — if the user denies, you're stuck with Settings deep-linking forever. +- Frame every permission around the USER's benefit, never the app's need. +- If a permission isn't essential to the core experience, consider deferring it to an in-context moment later in the app (e.g., ask for camera permission when they first tap "Scan", not during onboarding). +- Only prime permissions that are genuinely needed. Asking for permissions the app doesn't use erodes trust. +- For notifications specifically: prime AFTER the user has experienced the app demo (Screen 11) if possible — they'll better understand what they'd be notified about. However, if the notification permission is needed for the demo itself, prime it here before the processing moment. + +**Platform considerations:** +- iOS: Notification permission is one-shot via UNUserNotificationCenter. ATT (App Tracking Transparency) must be prompted separately and has specific Apple guidelines. +- Android 13+: Notification permission requires runtime prompt (POST_NOTIFICATIONS). Below 13, notifications are granted by default. +- React Native / Flutter: Use the appropriate permission library (react-native-permissions, permission_handler, etc.) + +#### Screen 10: PROCESSING MOMENT [REQUIRED] +**Objective:** Build anticipation. Signal that personalisation is happening. +- Animated loading state (simple animation — spinning icon, pulsing graphic) +- "[Preparing/Building/Creating] [output] just for you..." +- Brief pause (1-3 seconds) — even if nothing is actually loading +- Auto-advances to next screen + +**Key principle:** This screen exists purely for psychological effect. It makes the next screen feel earned and personalised, even if the "processing" is instant. + +#### Screen 11: APP DEMO [REQUIRED — THIS IS THE HARDEST AND MOST IMPORTANT SCREEN] +**Objective:** Let the user actually USE the core app mechanic inside the onboarding. This is not a tour or a screenshot — it's a functional mini-version of the app's primary interaction. + +**How to identify the demo:** +1. Look at the app's core loop — what's the ONE thing users do repeatedly? +2. Reduce it to its simplest form — pick 3 items, make 1 choice, complete 1 action +3. The demo must produce a TANGIBLE OUTPUT the user can see/share + +**Examples by app type:** +- Recipe app → Swipe to pick 3 recipes → generates a shopping list +- Fitness app → Choose 3 exercises → generates a workout plan +- Finance app → Categorise 5 transactions → shows spending summary +- Learning app → Answer 3 questions → shows skill level assessment +- Task app → Add 3 tasks → shows organised daily plan + +**Implementation approach:** +- Build this as a real, functional screen using the app's actual data models and UI components +- Use Tinder-style swipe cards or simple tap-to-select mechanics — keep interaction dead simple +- Show progress: "Pick 2 more" → "Pick 1 more" → "Done!" +- The output screen after the demo is the **viral moment** — design it to be shareable + +**Key principle:** The user must DO something, not just watch. And they must get something back — a result, a list, a plan, a score. This creates the sunk cost that drives conversion at the paywall. + +#### Screen 12: VALUE DELIVERY + VIRAL MOMENT [REQUIRED] +**Objective:** Show the tangible output from their demo interaction. This is the thing they created, and it should be impressive enough that they'd want to share it or keep it. +- Processing animation first: "[Generating/Building] your [output]..." +- Then reveal the output (list, plan, summary, result) +- Include a share button or "Send to a friend" option — this is the virality hook +- The output should feel real, not placeholder + +**Key principle:** The output is gated behind the next screen (account creation or paywall). The user has invested time and created something — now they need to sign up to keep it. This is ethical because the app genuinely delivers this value; the onboarding just gave them a preview. + +#### Screen 13: ACCOUNT CREATION [OPTIONAL — based on user preference] +**Objective:** Soft gate — "Create a free account to unlock [the thing you just made]" +- Show thumbnails of what they created/selected +- "Create Free Account to unlock your [output]" +- List 1-2 additional features they get with an account +- Sign-in options: Apple, Google, email +- "Already have an account? Log in" at bottom +- Skip option if the app allows anonymous usage + +#### Screen 14: PAYWALL [REQUIRED] +**Objective:** Convert to paid subscriber. +- App logo + headline restating the transformation: "Your [goal] sorted with [App Name]" +- One featured testimonial/review with star rating +- Pricing: trial period + annual price +- "Start your FREE [trial period]" primary CTA +- "More options" or "Restore purchases" secondary link +- If no paywall exists in the app, generate a placeholder paywall view with TODO comments for the user to connect to their payment system + +--- + +### Step 2: Present the Blueprint + +Present the full screen sequence as a numbered list, showing: +- Screen number +- Screen type (from archetypes above) +- Specific headline/question for THIS app +- What it contains (brief) +- Which archetype screens were skipped and why + +Ask the user to confirm, reorder, add, or remove screens. + +**Save to memory:** confirmed blueprint with screen sequence. + +--- + +## PHASE 4: SCREEN CONTENT + +For each screen in the confirmed blueprint, draft the full content: + +- **Headline** (bold, short, action-oriented) +- **Subheadline** (if needed — one line of supporting text) +- **Options/items** (with emoji icons where appropriate) +- **CTA button text** +- **Any stats or social proof copy** + +Present screen-by-screen. Get confirmation or iterate with the user before moving on to the next screen. Group related screens (e.g., all questionnaire screens) for efficiency. + +**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 should feel specific and credible — round numbers feel fake +- CTAs should describe what happens next: "Pick my first [items]" not "Continue" + +**Save to memory:** confirmed screen content for each screen. + +--- + +## PHASE 5: IMPLEMENTATION + +Build the onboarding flow in the user's app. + +### Step 1: Understand the Codebase Architecture + +Before writing any code, understand: +- Framework and UI toolkit (SwiftUI, UIKit, React Native, Flutter, Jetpack Compose, etc.) +- Navigation pattern (NavigationStack, UINavigationController, React Navigation, etc.) +- Existing onboarding code (if any — extend or replace?) +- Design system (colours, fonts, component library, spacing conventions) +- State management approach +- How the app currently handles first-launch detection + +### Step 2: Build Screen by Screen + +For each screen in the blueprint: + +1. **Create the view/screen** following the app's existing code patterns and conventions +2. **Wire up navigation** — screens should flow forward with back button support +3. **Add the progress bar** — shows position in the total flow +4. **Store user responses** — questionnaire answers should be persisted (these inform personalisation and can be sent to analytics) +5. **Implement interactions** — tinder swipes, grid selection, multi-select checkboxes, etc. + +### Step 3: Build the App Demo Screen + +This is the hardest screen. Approach: + +1. Identify the core UI component from the app that will be used in the demo +2. Create a simplified version that works standalone (no dependencies on app state the user hasn't created yet) +3. Feed it with sample/curated data that matches the user's questionnaire preferences +4. Implement the interaction (swipe, tap, select) with a clear completion target ("Pick 3") +5. Generate the output from their selections +6. The output view should include a share mechanism (share sheet / export) + +### Step 4: Connect the Paywall + +- If the app has an existing paywall, link to it from the final onboarding screen +- If no paywall exists, create a placeholder paywall view with: + - Layout matching the blueprint + - TODO comments where subscription logic would go + - Clearly marked placeholder pricing + +### Step 5: Wire Up First-Launch Detection + +- Add logic so the onboarding only shows on first launch (or when reset) +- Store completion state appropriately for the platform (UserDefaults, SharedPreferences, AsyncStorage, etc.) +- Ensure the app launches into onboarding when state is fresh, and into the main app when complete + +**Save to memory:** implementation progress — which screens are built, file paths, any issues. + +--- + +## IMPORTANT GUIDELINES + +### For the Questionnaire Questions +- Questions must feel natural and conversational, not like a survey +- Each question should make the user think "yes, they get me" +- Options should cover the major user segments without being exhaustive +- Use emoji icons to make lists feel lighter and more scannable +- The order matters: start with aspiration (goals), then pain, then proof, then preference + +### For the App Demo +- Keep it to ONE core interaction — don't try to demo the whole app +- The interaction should take 30-60 seconds maximum +- It must produce a visible, tangible result +- That result is the viral moment — design it to be worth sharing +- Use real data from the app's models where possible, sample data where necessary + +### For Copy and Tone +- Write for someone who has never heard of the app +- Use "you" and "your" — it's their experience, not yours +- Headlines: bold, short, transformation-focused +- Body text: conversational, specific, no filler +- Stats: specific numbers feel more credible than round ones (83% > 80%) + +### For the Paywall +- The paywall should feel like a natural conclusion, not an ambush +- By this point the user has: identified their goal, felt understood, seen proof, configured preferences, and used the app — the paywall is just the final step +- Always include a trial period option +- Show one strong testimonial — social proof at the moment of purchase decision From 6cad8e1fd8f587c0f0d6feee5487959ecd77cc51 Mon Sep 17 00:00:00 2001 From: claude Date: Mon, 6 Apr 2026 16:41:46 -0400 Subject: [PATCH 2/9] pin claude-code-action to v1.0.88 (symlink ENOENT fix) --- .github/workflows/claude-code-review.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/claude-code-review.yml b/.github/workflows/claude-code-review.yml index 834714b..3855340 100644 --- a/.github/workflows/claude-code-review.yml +++ b/.github/workflows/claude-code-review.yml @@ -22,7 +22,7 @@ jobs: - name: Run Claude Code Review id: claude-review - uses: anthropics/claude-code-action@v1 + uses: anthropics/claude-code-action@v1.0.88 # pinned: v1.0.89 crashes on symlinked CLAUDE.md (anthropics/claude-code-action#1187) with: claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }} use_sticky_comment: true From b76a6855926ba3c4dbef28f5bbf241b104de706a Mon Sep 17 00:00:00 2001 From: claude Date: Mon, 6 Apr 2026 16:42:06 -0400 Subject: [PATCH 3/9] pin claude.yml to v1.0.88 too --- .github/workflows/claude.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/claude.yml b/.github/workflows/claude.yml index 5c9db58..c3fb9d5 100644 --- a/.github/workflows/claude.yml +++ b/.github/workflows/claude.yml @@ -32,7 +32,7 @@ jobs: - name: Run Claude Code id: claude - uses: anthropics/claude-code-action@v1 + uses: anthropics/claude-code-action@v1.0.88 # pinned: v1.0.89 crashes on symlinked CLAUDE.md (anthropics/claude-code-action#1187) with: claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }} From c3224f5410b09f7e2d2ea9fd9eb3ad978d25ee59 Mon Sep 17 00:00:00 2001 From: testuser Date: Mon, 6 Apr 2026 17:05:03 -0400 Subject: [PATCH 4/9] Add create-app-onboarding to README under UI/UX --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 38de1f9..e008f57 100644 --- a/README.md +++ b/README.md @@ -176,6 +176,7 @@ Install the skills from https://github.com/exiao/skills | Skill | Description | |-------|-------------| +| [create-app-onboarding](create-app-onboarding/) | Design and build high-converting questionnaire-style app onboarding flows | | [userinterface-wiki](userinterface-wiki/) | UI/UX best practices: animations, CSS, typography, UX patterns | ### Other From aad74fcacead7381774ac4ebca4f46cba33e0b18 Mon Sep 17 00:00:00 2001 From: exiao Date: Tue, 7 Apr 2026 09:56:43 -0400 Subject: [PATCH 5/9] chore: sync claude-code-review.yml from main --- .github/workflows/claude-code-review.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/claude-code-review.yml b/.github/workflows/claude-code-review.yml index 3855340..7898434 100644 --- a/.github/workflows/claude-code-review.yml +++ b/.github/workflows/claude-code-review.yml @@ -22,7 +22,7 @@ jobs: - name: Run Claude Code Review id: claude-review - uses: anthropics/claude-code-action@v1.0.88 # pinned: v1.0.89 crashes on symlinked CLAUDE.md (anthropics/claude-code-action#1187) + uses: anthropics/claude-code-action@v1.0.88 with: claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }} use_sticky_comment: true From 415653bcd2bb124cda3fca32620ff42a58fba528 Mon Sep 17 00:00:00 2001 From: claude Date: Tue, 7 Apr 2026 13:12:46 -0400 Subject: [PATCH 6/9] fix: address claude-review convention violations MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove README.md and CLAUDE.md from skill directory (repo convention) - Move CLAUDE.md content to references/architecture.md - Fix "13-screen" → "14-screen" in architecture docs - Fix frontmatter name to match directory: create-app-onboarding - Fix frontmatter description to be routing instruction with trigger phrases Co-Authored-By: Claude Opus 4.6 (1M context) --- create-app-onboarding/README.md | 84 ------------------- create-app-onboarding/SKILL.md | 8 +- .../{CLAUDE.md => references/architecture.md} | 15 +--- 3 files changed, 8 insertions(+), 99 deletions(-) delete mode 100644 create-app-onboarding/README.md rename create-app-onboarding/{CLAUDE.md => references/architecture.md} (75%) diff --git a/create-app-onboarding/README.md b/create-app-onboarding/README.md deleted file mode 100644 index 802f9f7..0000000 --- a/create-app-onboarding/README.md +++ /dev/null @@ -1,84 +0,0 @@ -# App Onboarding Questionnaire - -A [Claude Code](https://claude.ai/code) skill that designs and builds high-converting questionnaire-style onboarding flows for your app — modelled on proven conversion patterns from top subscription apps like Mob, Headspace, Noom, and Duolingo. - -## What It Does - -Run `/app-onboarding-questionnaire` from your app project and the skill will: - -1. **Analyse your codebase** to understand what your app does, who it's for, and what permissions it needs -2. **Define the user transformation** — the before/after story that drives your onboarding narrative -3. **Design a screen-by-screen blueprint** using a proven 14-screen psychological framework -4. **Draft all the copy** — headlines, questions, options, CTAs, social proof -5. **Build the onboarding flow** in your app's native framework (SwiftUI, React Native, Flutter, etc.) - -No marketing expertise required. The skill handles the conversion psychology — you just answer questions about your app. - -## The Framework - -The onboarding follows a proven psychological sequence used by the highest-converting subscription apps: - -| # | Screen | Purpose | -|---|--------|---------| -| 1 | Welcome | Hook — show the end state, create desire | -| 2 | Goal Question | "What are you trying to achieve?" — creates psychological investment | -| 3 | Pain Points | "What prevents you?" — surfaces frustrations, builds empathy | -| 4 | Social Proof | Testimonials matched to user personas | -| 5 | Tinder Cards | Swipe agree/disagree on pain statements — interactive self-identification | -| 6 | Personalised Solution | Mirror their pains back with stats showing how the app solves each one | -| 7 | Comparison Table | Life with vs without the app *(optional)* | -| 8 | Preferences | Functional personalisation that feeds the upcoming demo | -| 9 | Permission Priming | Benefit-framed pre-sell before system permission dialogs *(auto-detected)* | -| 10 | Processing Moment | "Building X just for you..." — anticipation builder | -| 11 | App Demo | User actually USES the core app mechanic — not a tour, a real interaction | -| 12 | Value Delivery | Tangible output from their demo + share/viral moment | -| 13 | Account Gate | Optional sign-in to unlock what they just created | -| 14 | Paywall | Hard paywall with trial, social proof, and pricing | - -Not every app needs every screen — the skill adapts based on your app's complexity. - -## What Makes This Different - -Most onboarding generators stop at the questionnaire. This skill goes further: - -- **App Demo Screen** — Builds a functional mini-version of your app's core interaction inside the onboarding. Users pick recipes, choose exercises, categorise transactions — whatever your core loop is. They DO something and get a tangible result back. -- **Viral Moment** — The demo output is designed to be shareable. This is where organic growth comes from. -- **Permission Priming** — Auto-detects permissions from your codebase (Info.plist, AndroidManifest, etc.) and creates benefit-framed priming screens that convert at 70-80%+ vs ~40% for cold system prompts. -- **Resumable** — Progress is saved to Claude Code's memory system. Come back tomorrow and pick up where you left off. - -## Installation - -### Option 1: Add to your Claude Code skills directory - -```bash -cd ~/.claude/skills -git clone https://github.com/adamlyttleapps/claude-skill-app-onboarding-questoinnaire.git app-onboarding-questionnaire -``` - -### Option 2: Add as a dependency in your project's `.claude/settings.json` - -```json -{ - "skills": [ - "github:adamlyttleapps/claude-skill-app-onboarding-questoinnaire" - ] -} -``` - -## Usage - -From your app's project directory in Claude Code: - -``` -/app-onboarding-questionnaire -``` - -The skill will analyse your codebase and walk you through each phase interactively. - -## Reference - -The framework is based on analysis of the [Mob](https://www.mob.co.uk/) recipe app's onboarding flow (19 screens), which is widely regarded as one of the best-converting onboarding experiences in the App Store. - -## License - -MIT diff --git a/create-app-onboarding/SKILL.md b/create-app-onboarding/SKILL.md index 6e9b585..6b40125 100644 --- a/create-app-onboarding/SKILL.md +++ b/create-app-onboarding/SKILL.md @@ -1,6 +1,10 @@ --- -name: app-onboarding-questionnaire -description: Design and build a high-converting questionnaire-style onboarding flow for your app, modelled on proven conversion patterns from top subscription apps. +name: create-app-onboarding +description: >- + TRIGGER when the user asks to design, build, or improve an app onboarding flow, + onboarding questionnaire, first-run experience, or signup funnel. Also trigger + on "conversion optimization for onboarding", "reduce onboarding drop-off", + "questionnaire-style onboarding", or "subscription app onboarding". user-invocable: true --- diff --git a/create-app-onboarding/CLAUDE.md b/create-app-onboarding/references/architecture.md similarity index 75% rename from create-app-onboarding/CLAUDE.md rename to create-app-onboarding/references/architecture.md index a19f79e..740b5bf 100644 --- a/create-app-onboarding/CLAUDE.md +++ b/create-app-onboarding/references/architecture.md @@ -1,19 +1,8 @@ -# CLAUDE.md - -This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. - -## What This Is - -A Claude Code skill (`app-onboarding-questionnaire`) that designs and builds high-converting questionnaire-style onboarding flows for any app. Modelled on proven conversion patterns from top subscription apps (Mob, Headspace, Noom, Duolingo). Invoked via `/app-onboarding-questionnaire` from within a user's app project. - -## Skill Structure - -- **SKILL.md** — The skill prompt. Defines a 5-phase workflow: App Discovery → User Transformation → Blueprint → Screen Content → Implementation. Uses memory to persist state across conversations. -- **CLAUDE.md** — This file. Development guidance for working on the skill itself. +# Architecture ## The Onboarding Framework -The skill implements a 13-screen archetype sequence based on the Mob recipe app's onboarding (the gold standard reference). The psychological sequence is: +The skill implements a 14-screen archetype sequence based on the Mob recipe app's onboarding (the gold standard reference). The psychological sequence is: 1. **Hook** — Welcome + app preview showing the end state 2. **Goal elicitation** — "What are you trying to achieve?" (single-select, creates investment) From 5d5109b3126464d43a2f3ba81209d65e5a030bf0 Mon Sep 17 00:00:00 2001 From: claude Date: Wed, 8 Apr 2026 20:11:58 -0400 Subject: [PATCH 7/9] fix: remove LICENSE, revert unrelated README deletions and workflow pins Address remaining review feedback: - Remove create-app-onboarding/LICENSE (not part of standard skill structure) - Restore trip-planner and remotion-best-practices entries in root README.md - Revert claude.yml workflow pin to v1.0.88 (unrelated infra change) Co-Authored-By: Claude Opus 4.6 (1M context) --- .github/workflows/claude.yml | 2 +- README.md | 2 ++ create-app-onboarding/LICENSE | 21 --------------------- 3 files changed, 3 insertions(+), 22 deletions(-) delete mode 100644 create-app-onboarding/LICENSE diff --git a/.github/workflows/claude.yml b/.github/workflows/claude.yml index c3fb9d5..5c9db58 100644 --- a/.github/workflows/claude.yml +++ b/.github/workflows/claude.yml @@ -32,7 +32,7 @@ jobs: - name: Run Claude Code id: claude - uses: anthropics/claude-code-action@v1.0.88 # pinned: v1.0.89 crashes on symlinked CLAUDE.md (anthropics/claude-code-action#1187) + uses: anthropics/claude-code-action@v1 with: claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }} diff --git a/README.md b/README.md index e008f57..c784ec5 100644 --- a/README.md +++ b/README.md @@ -184,6 +184,7 @@ Install the skills from https://github.com/exiao/skills | Skill | Description | |-------|-------------| | [document-release](document-release/) | Document release processes | +| [trip-planner](trip-planner/) | Generate day-by-day travel itineraries with neighborhood routing and budget scaling | --- @@ -227,6 +228,7 @@ These started from other open-source projects. I've modified and extended them f | [codex](codex/) | [garrytan/gstack](https://github.com/garrytan/gstack) (MIT) | | [impeccable](impeccable/) | [pbakaus/impeccable](https://github.com/pbakaus/impeccable) | | [app-store-screenshots](app-store-screenshots/) | [ParthJadhav/app-store-screenshots](https://github.com/ParthJadhav/app-store-screenshots) | +| [remotion-best-practices](remotion-best-practices/) | [remotion-dev/skills](https://github.com/remotion-dev/skills) | | [video-production/remotion-videos](video-production/remotion-videos/) | [remotion-dev/skills](https://github.com/remotion-dev/skills) | | [visual-design/frontend-slides](visual-design/frontend-slides/) | [zarazhangrui/frontend-slides](https://github.com/zarazhangrui/frontend-slides) | | [last30days](last30days/) | [mvanhorn/last30days-skill](https://github.com/mvanhorn/last30days-skill) | diff --git a/create-app-onboarding/LICENSE b/create-app-onboarding/LICENSE deleted file mode 100644 index de84c4c..0000000 --- a/create-app-onboarding/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2026 Adam Lyttle - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. From e67c6b58096b14181e71df272ace3b4fc59d28be Mon Sep 17 00:00:00 2001 From: claude Date: Wed, 8 Apr 2026 20:15:09 -0400 Subject: [PATCH 8/9] fix: correct screen archetype count from 11 to 14 in SKILL.md The framework defines 14 screen archetypes (Screen 1-14), not 11. references/architecture.md already had the correct count. Co-Authored-By: Claude Opus 4.6 (1M context) --- create-app-onboarding/SKILL.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/create-app-onboarding/SKILL.md b/create-app-onboarding/SKILL.md index 6b40125..510e8c7 100644 --- a/create-app-onboarding/SKILL.md +++ b/create-app-onboarding/SKILL.md @@ -135,7 +135,7 @@ Now design the screen-by-screen flow. The blueprint follows a proven psychologic ### The Onboarding Framework -The flow uses 11 screen archetypes. You MUST include screens marked [REQUIRED]. Others are [RECOMMENDED] or [OPTIONAL] based on fit. +The flow uses 14 screen archetypes. You MUST include screens marked [REQUIRED]. Others are [RECOMMENDED] or [OPTIONAL] based on fit. #### Screen 1: WELCOME [REQUIRED] **Objective:** Hook — show the end state, create desire. From 77291bf13dacc22e23eb1924c205481d20cbc47e Mon Sep 17 00:00:00 2001 From: claude Date: Wed, 8 Apr 2026 21:16:50 -0400 Subject: [PATCH 9/9] fix: revert workflow pin to @v1, remove phantom README entries, fix example screen count - Revert claude-code-review.yml from @v1.0.88 back to @v1 (commit 5d5109b claimed to revert this but didn't) - Remove trip-planner and remotion-best-practices from README.md (no corresponding directories exist in repo) - Change example resumption output from 11-screen to 9-screen to avoid confusion with the 14-archetype framework Co-Authored-By: Claude Opus 4.6 (1M context) --- .github/workflows/claude-code-review.yml | 2 +- README.md | 2 -- create-app-onboarding/SKILL.md | 4 ++-- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/.github/workflows/claude-code-review.yml b/.github/workflows/claude-code-review.yml index 7898434..834714b 100644 --- a/.github/workflows/claude-code-review.yml +++ b/.github/workflows/claude-code-review.yml @@ -22,7 +22,7 @@ jobs: - name: Run Claude Code Review id: claude-review - uses: anthropics/claude-code-action@v1.0.88 + uses: anthropics/claude-code-action@v1 with: claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }} use_sticky_comment: true diff --git a/README.md b/README.md index c784ec5..e008f57 100644 --- a/README.md +++ b/README.md @@ -184,7 +184,6 @@ Install the skills from https://github.com/exiao/skills | Skill | Description | |-------|-------------| | [document-release](document-release/) | Document release processes | -| [trip-planner](trip-planner/) | Generate day-by-day travel itineraries with neighborhood routing and budget scaling | --- @@ -228,7 +227,6 @@ These started from other open-source projects. I've modified and extended them f | [codex](codex/) | [garrytan/gstack](https://github.com/garrytan/gstack) (MIT) | | [impeccable](impeccable/) | [pbakaus/impeccable](https://github.com/pbakaus/impeccable) | | [app-store-screenshots](app-store-screenshots/) | [ParthJadhav/app-store-screenshots](https://github.com/ParthJadhav/app-store-screenshots) | -| [remotion-best-practices](remotion-best-practices/) | [remotion-dev/skills](https://github.com/remotion-dev/skills) | | [video-production/remotion-videos](video-production/remotion-videos/) | [remotion-dev/skills](https://github.com/remotion-dev/skills) | | [visual-design/frontend-slides](visual-design/frontend-slides/) | [zarazhangrui/frontend-slides](https://github.com/zarazhangrui/frontend-slides) | | [last30days](last30days/) | [mvanhorn/last30days-skill](https://github.com/mvanhorn/last30days-skill) | diff --git a/create-app-onboarding/SKILL.md b/create-app-onboarding/SKILL.md index 510e8c7..619463a 100644 --- a/create-app-onboarding/SKILL.md +++ b/create-app-onboarding/SKILL.md @@ -33,8 +33,8 @@ 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 +✅ Blueprint: 9-screen flow confirmed +⏳ Screen content: 6 of 9 screens drafted ◻️ Implementation: not started Ready to continue drafting screen 7, or would you like to change anything?