claude-skill-app-onboarding-questionnaire

What this skill does

# App Onboarding Questionnaire

> Skill by [ara.so](https://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

```bash
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`:

```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

```swift
// 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

```tsx
// 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

```dart
// 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 = [
    'An