react-native-onboarding

Installs and wires the `@rocapine/react-native-onboarding-ui` UI SDK on top of the headless SDK. Use when the user wants prebuilt onboarding screens, asks "add the UI SDK", "render the onboarding step", or "use OnboardingPage".

Builds the inner UIElement tree of a ComposableScreen step. Inspects the target app's design system before composing. Use when authoring a ComposableScreen, asks "compose a screen", "build the UIElement tree", "design the layout", or needs branching/variables in a single screen.

Authors a new Rocapine Onboarding Studio step using exclusively the ComposableScreen step type. Inspects the target app for design system, fonts, tokens, and copy voice before generating. Use when the user wants to add an onboarding screen, draft a step, or asks "give me JSON for an onboarding step".

Customizes how Rocapine ComposableScreen UIElements render in the host app — via element props (primary path) and host-wired `custom` button actions (advanced path). Use when the user wants a different look for buttons / radio cards / inputs, wants the onboarding to share components with the rest of the app, or asks "customize the button", "use my own component for X", "wire a custom action".

Finds an existing onboarding flow already implemented in the target app's source code (screens/modules named onboarding, welcome, intro, getting-started) and converts each screen into a Rocapine ComposableScreen step JSON. Preserves the app's exact design — colors, fonts, radii, copy, navigation order — pulled from the source code. Use when the user says "export my existing onboarding", "convert my onboarding screens to Rocapine", "I already have onboarding in the app — generate the JSON", "migrate the onboarding to the SDK", or "recreate my onboarding as steps".

Validates a Rocapine ComposableScreen step JSON against the headless SDK Zod schemas. Use when the user pastes step JSON and asks "is this valid", "check this onboarding step", "validate this payload", or after creating step JSON.

Installs and wires the `@rocapine/react-native-onboarding` headless SDK in an Expo or React Native app. Use when the user wants to add Rocapine onboarding data layer to their app, asks "set up the onboarding SDK", "install rocapine headless", or "connect to onboarding studio".

Provides conversion-optimized onboarding patterns for Rocapine ComposableScreen-only flows. Includes the target-app inspection protocol. Use when the user asks "how should I design this onboarding", "what's the best order", "how to improve conversion", or any open-ended onboarding strategy question.

Run the example app's Metro bundler and watch for errors — either a one-shot bundle check, or a live background agent that wakes the session and diagnoses the moment a runtime/bundle error hits the Metro log. Use when the user wants to "run the example app and detect errors", "set up an error-watch background agent", "warn me while I work on features", check the example bundles cleanly, or after changing packages/.

Detects version mismatch between this Rocapine plugin and the installed `@rocapine/react-native-onboarding` / `@rocapine/react-native-onboarding-ui` SDKs in the target app. Proposes upgrade if mismatched. Auto-triggers at the start of setup-headless-sdk, setup-ui-sdk, and sdk-integration-verifier flows, and whenever the user says "check sdk version", "is my onboarding sdk up to date", "do I need to upgrade", or "match plugin version".

Builds or extends Rocapine Onboarding UI theme tokens (colors, typography, light/dark). Use when the user wants to brand the onboarding, change colors, change fonts, set up dark mode, or asks "customize the onboarding theme", "make it match our design system".

Bump version of both SDK packages (headless + UI), update both CHANGELOGs, and commit. Use when the user wants to release a new version, bump the SDK, or cut a release.

Diagnose ComposableScreen UIElement layout failures (zero size, clipped content, overflow, broken flex). Use when an element renders blank, collapses, or content is cut off.

Generate the onboarding-studio schema-mirror prompt from staged/recent changes to ComposableScreen types. Use after editing UIElement schemas, e.g. "draft studio sync prompt", "what do I tell studio".

Update an existing UIElement type in the Rocapine Onboarding monorepo (props, schema, or renderer changes). Use when modifying an existing ComposableScreen element, e.g. "add fontSize to TextElement", "change CarouselElement props", "update RadioGroup schema".

Add a new UIElement type to the Rocapine Onboarding monorepo (both headless SDK and onboarding-ui). Use when the user wants to add a new element type to ComposableScreen, e.g. "add a Slider UIElement", "add a Checkbox element".