claude-skill-app-onboarding-questionnaire

name	claude-skill-app-onboarding-questionnaire
description	Claude Code skill that designs and builds high-converting questionnaire-style app onboarding flows modelled on proven conversion patterns from top subscription apps like Noom, Headspace, and Duolingo.
triggers	["build onboarding flow for my app","create app onboarding questionnaire","design subscription app onboarding","add onboarding screens to my app","build high converting onboarding","create paywall onboarding flow","generate onboarding questionnaire screens","design app welcome flow with questions"]

App Onboarding Questionnaire

Skill by ara.so — Daily 2026 Skills collection.

A Claude Code skill that analyses your existing app codebase and generates a complete, high-converting questionnaire-style onboarding flow — including all copy, screen designs, and production-ready code — modelled on proven patterns from top subscription apps.

What It Does

When you run /app-onboarding-questionnaire in your project, the skill:

1. Analyses your codebase — reads your app's source, manifest/plist files, and existing screens to understand your app's purpose, target users, and required permissions
2. Defines the user transformation — constructs a before/after narrative that drives the onboarding story
3. Designs a screen-by-screen blueprint — using a 14-screen psychological conversion framework
4. Drafts all copy — headlines, questions, answer options, CTAs, testimonials, social proof
5. Builds the screens — in your app's native framework (SwiftUI, React Native, Flutter, Jetpack Compose, etc.)

Installation

Option 1: Global skills directory

cd ~/.claude/skills
git clone https://github.com/adamlyttleapps/claude-skill-app-onboarding-questionnaire.git app-onboarding-questionnaire

Option 2: Project-level dependency

Add to your project's .claude/settings.json:

{
  "skills": [
    "github:adamlyttleapps/claude-skill-app-onboarding-questionnaire"
  ]
}

Usage

Navigate to your app project directory and run:

/app-onboarding-questionnaire

The skill is interactive — it asks clarifying questions and builds incrementally. Progress is saved to Claude Code's memory system so you can resume across sessions.

The 14-Screen Framework

#	Screen	Conversion Purpose
1	Welcome	Hook — show the end state, create desire
2	Goal Question	"What are you trying to achieve?" — psychological investment
3	Pain Points	"What prevents you?" — builds empathy
4	Social Proof	Persona-matched testimonials
5	Tinder Cards	Swipe agree/disagree on pain statements
6	Personalised Solution	Mirror pains back with app solution stats
7	Comparison Table	Life with vs without the app (optional)
8	Preferences	Functional personalisation for the demo
9	Permission Priming	Benefit-framed pre-sell before system dialogs
10	Processing Moment	"Building X just for you..." anticipation builder
11	App Demo	User actually uses the core app mechanic
12	Value Delivery	Tangible output + share/viral moment
13	Account Gate	Optional sign-in to save what they created
14	Paywall	Hard paywall with trial, social proof, pricing

Not every app needs every screen — the skill adapts based on your app's complexity and type.

Key Differentiators

App Demo Screen

Instead of a tour, users do something — pick recipes, complete an exercise, categorise a transaction — and receive a tangible result. This is Screen 11 and is the highest-impact screen for conversion.

Permission Priming (Screen 9)

The skill auto-detects required permissions from your codebase:

• iOS: reads Info.plist for NSCameraUsageDescription, NSLocationWhenInUseUsageDescription, etc.
• Android: reads AndroidManifest.xml for uses-permission entries
• React Native / Flutter: checks both

For each permission found, it generates a benefit-framed priming screen shown before the system dialog. This converts at 70–80%+ vs ~40% for cold prompts.

Viral / Share Moment (Screen 12)

The demo output is designed to be shareable — a meal plan, a workout, a savings projection. This is where organic growth originates.

Code Examples

SwiftUI — Goal Question Screen

// Generated by /app-onboarding-questionnaire
import SwiftUI

struct GoalQuestionView: View {
    @EnvironmentObject var onboardingState: OnboardingState
    
    let goals = [
        OnboardingOption(id: "lose_weight", emoji: "⚖️", title: "Lose weight", subtitle: "Reach a healthier body"),
        OnboardingOption(id: "build_muscle", emoji: "💪", title: "Build muscle", subtitle: "Get stronger and leaner"),
        OnboardingOption(id: "eat_healthier", emoji: "🥗", title: "Eat healthier", subtitle: "Improve my nutrition"),
        OnboardingOption(id: "save_time", emoji: "⏱️", title: "Save time cooking", subtitle: "Quick, easy meals")
    ]
    
    var body: some View {
        VStack(spacing: 24) {
            OnboardingHeader(
                title: "What's your main goal?",
                subtitle: "We'll personalise everything around this"
            )
            
            VStack(spacing: 12) {
                ForEach(goals) { goal in
                    OnboardingOptionRow(
                        option: goal,
                        isSelected: onboardingState.selectedGoal == goal.id
                    ) {
                        onboardingState.selectedGoal  goal.id
                    }
                }
            }
            
            ()
            
            (title: , isEnabled: onboardingState.selectedGoal  ) {
                onboardingState.advance()
            }
        }
        .padding()
    }
}

React Native — Tinder Swipe Cards Screen

// Generated by /app-onboarding-questionnaire
import React, { useState } from 'react';
import { View, Text, StyleSheet, Animated, PanResponder } from 'react-native';
import { useOnboarding } from '../context/OnboardingContext';

const PAIN_STATEMENTS = [
  "I don't know what to cook each week",
  "I end up wasting food I've bought",
  "Healthy eating feels too complicated",
  "I spend too long deciding what to make",
];

export function TinderCardsScreen() {
  const { addAgreedPain, advance } = useOnboarding();
  const [currentIndex, setCurrentIndex] = useState(0);
  const position = new Animated.ValueXY();

  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: (_, gesture) => {
      position.setValue({ x: gesture.dx, y: gesture. });
    },
    :  {
       (gesture. > ) {
        ();
      }   (gesture. < -) {
        ();
      }  {
        .(position, { : { : , :  }, :  }).();
      }
    },
  });

    = () => {
     (direction === ) {
      ([currentIndex]);
    }
    .(position, {
      : { : direction ===  ?  : -, :  },
      : ,
      : ,
    }).( {
      position.({ : , :  });
       (currentIndex +  >= .) {
        ();
      }  {
        ( i + );
      }
    });
  };

   (
    
  );
}

Flutter — Processing / Loading Screen

// Generated by /app-onboarding-questionnaire
import 'package:flutter/material.dart';

class ProcessingScreen extends StatefulWidget {
  final VoidCallback onComplete;
  const ProcessingScreen({required this.onComplete, super.key});

  @override
  State<ProcessingScreen> createState() => _ProcessingScreenState();
}

class _ProcessingScreenState extends State<ProcessingScreen>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  int _stepIndex = 0;

  final List<String> _steps = [
    'Analysing your goals...',
    'Matching your preferences...',
    'Crafting your personal plan...',
    'Almost ready!',
  ];

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: const Duration(seconds: 4))
      ..addListener(() {
        final newIndex = (_controller.value * _steps.length).floor().clamp(0, _steps.length - 1);
        if (newIndex != _stepIndex) {
          setState(() => _stepIndex = newIndex);
        }
      })
      ..forward().whenComplete(widget.onComplete);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator(value: _controller.value),
            const SizedBox(height: 32),
            AnimatedSwitcher(
              duration: const Duration(milliseconds: 400),
              child: Text(
                _steps[_stepIndex],
                key: ValueKey(_stepIndex),
                style: Theme.of(context).textTheme.titleMedium,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

SwiftUI — Permission Priming Screen (auto-generated from Info.plist)

// Generated from detected NSCameraUsageDescription in Info.plist
struct CameraPermissionPrimingView: View {
    @EnvironmentObject var onboardingState: OnboardingState
    
    var body: some View {
        VStack(spacing: 32) {
            Image(systemName: "camera.fill")
                .font(.system(size: 64))
                .foregroundColor(.accentColor)
            
            VStack(spacing: 12) {
                Text("Scan ingredients instantly")
                    .font(.title2.bold())
                Text("Point your camera at any ingredient or barcode and we'll find matching recipes in seconds — no typing needed.")
                    .multilineTextAlignment(.center)
                    .foregroundColor(.secondary)
            }
            
            VStack(spacing: 8) {
                Label("Identify 10,000+ ingredients", systemImage: "checkmark.circle.fill")
                Label("Scan barcodes for nutrition info", systemImage: "checkmark.circle.fill")
                Label("Works offline for pantry items", systemImage: "checkmark.circle.fill")
            }
            .foregroundColor(.primary)
            
            Spacer()
            
            PrimaryButton(title: "Enable Camera Access") {
                // System prompt shown AFTER this priming screen
                onboardingState.requestCameraPermission()
            }
            
            Button("Not now") {
                onboardingState.skipPermission(.camera)
            }
            .foregroundColor(.secondary)
        }
        .padding()
    }
}

Onboarding State Management Pattern

The skill generates a central state object to track progress across all screens:

// SwiftUI example
class OnboardingState: ObservableObject {
    @Published var currentScreen: OnboardingScreen = .welcome
    @Published var selectedGoal: String?
    @Published var agreedPains: [String] = []
    @Published var preferences: UserPreferences = .default
    @Published var demoResult: DemoOutput?
    
    // Persisted to UserDefaults so onboarding survives app restarts
    func advance() {
        let next = currentScreen.next(given: self)
        withAnimation { currentScreen = next }
        save()
    }
    
    func save() {
        // Skill generates serialisation code appropriate to your stack
    }
}

Configuration Options

When you run /app-onboarding-questionnaire, the skill asks about:

Option	Description
App type	Subscription, freemium, one-time purchase
Core loop	The single thing users do in your app
Target audience	Who the app is for (used for copy tone)
Paywall timing	Whether to show paywall before or after account creation
Screens to skip	Comparison table, account gate, etc.
Brand colours	Used in generated SwiftUI/CSS/Flutter theme code

Resuming a Session

Progress is saved to Claude Code's memory. To resume:

/app-onboarding-questionnaire resume

To restart from a specific screen:

/app-onboarding-questionnaire --from=paywall

Troubleshooting

Skill doesn't detect my permissions correctly

• iOS: ensure Info.plist is at the project root or <AppName>/Info.plist
• Android: ensure AndroidManifest.xml is at app/src/main/AndroidManifest.xml
• React Native: the skill checks both locations automatically

Generated code uses wrong framework

• The skill infers your framework from file extensions (.swift, .tsx, .dart, .kt)
• If detection fails, specify explicitly: /app-onboarding-questionnaire --framework=swiftui

Paywall screen doesn't match my payment provider

• The skill generates a UI shell; wire up your payment provider (RevenueCat, StoreKit 2, stripe-react-native) separately
• RevenueCat is the recommended integration — the skill generates compatible purchase call sites

Want fewer screens for a simpler app

• The skill asks about complexity during setup
• You can also specify: /app-onboarding-questionnaire --screens=welcome,goal,processing,paywall

Reference

The framework is based on analysis of the Mob recipe app's 19-screen onboarding flow, widely regarded as one of the highest-converting onboarding experiences on the App Store, combined with patterns from Noom, Headspace, and Duolingo.