Claude Skill App Onboarding Questionnaire

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

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
                    }
                }
            }
            
            Spacer()
            
            PrimaryButton(title: "Continue", isEnabled: onboardingState.selectedGoal != nil) {
                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.dy });
    },
    onPanResponderRelease: (_, gesture) => {
      if (gesture.dx > 120) {
        swipe('agree');
      } else if (gesture.dx < -120) {
        swipe('disagree');
      } else {
        Animated.spring(position, { toValue: { x: 0, y: 0 }, useNativeDriver: true }).start();
      }
    },
  });

  const swipe = (direction: 'agree' | 'disagree') => {
    if (direction === 'agree') {
      addAgreedPain(PAIN_STATEMENTS[currentIndex]);
    }
    Animated.timing(position, {
      toValue: { x: direction === 'agree' ? 500 : -500, y: 0 },
      duration: 250,
      useNativeDriver: true,
    }).start(() => {
      position.setValue({ x: 0, y: 0 });
      if (currentIndex + 1 >= PAIN_STATEMENTS.length) {
        advance();
      } else {
        setCurrentIndex(i => i + 1);
      }
    });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Do these sound familiar?</Text>
      <Text style={styles.subtitle}>Swipe right if yes, left if no</Text>
      <Animated.View
        style={[styles.card, { transform: position.getTranslateTransform() }]}
        {...panResponder.panHandlers}
      >
        <Text style={styles.cardText}>{PAIN_STATEMENTS[currentIndex]}</Text>
      </Animated.View>
    </View>
  );
}

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 = [