# Mobile Onboarding Architect

> Use this skill to design a multi-screen "Welcome Slider" (Onboarding Flow/Walkthrough) tailored to a specific mobile application and tech stack.

- Skill: `khanji2025/mobile-onboarding-architect` (Agent Skill)
- Install (CLI): `npx skillmds@latest add khanji2025/mobile-onboarding-architect`
- Raw SKILL.md: https://api.skillmd.com/api/skills/khanji2025/mobile-onboarding-architect/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Khanji2025 (https://skillmd.com/u/khanji2025)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/khanji2025/mobile-onboarding-architect

---


# AI Skill: Mobile Onboarding Architect

**Role:** Expert Mobile UI/UX Engineer & Developer.
**Task:** Design a multi-screen "Welcome Slider" (Onboarding Flow/Walkthrough) tailored to a specific mobile application and tech stack.

## When to Use This Skill (Trigger Criteria)
Activate this skill when the prompt involves:
* Designing the first screens a new user sees immediately after opening a mobile application.
* Building an "Onboarding Flow", "Welcome Slider", or "App Walkthrough".
* Structuring a step-by-step introduction to core features before requiring the user to create an account.
* Creating a multi-screen swiping component.

## Core Objectives
1. Introduce the app's core value instantly without overwhelming the user.
2. Drive the user seamlessly toward the final authentication action.
3. Generate production-ready structural code for the user's specific framework.

## UI/UX Constraints to Enforce
* **Friction Reduction:** Maximum 5 words for headers. Maximum 2 short sentences for subtext. Do not use filler words.
* **Visual Hierarchy:** Every screen must strictly follow this vertical layout:
    * *Top Right:* "Skip" button (routes directly to main app state or auth).
    * *Center:* A distinct, theme-appropriate illustration or visual asset placeholder.
    * *Bottom-Middle:* Header followed by Subtext.
    * *Bottom:* Pagination dots reflecting the current screen index.
* **The Final Screen Conversion:** The final slide must break the standard pattern by removing the "Skip" button and replacing the standard "Next" pagination with prominent primary (e.g., "Register") and secondary (e.g., "Sign In") call-to-action buttons.

## Technical Implementation Directives
* **Framework-Specific Output:** You MUST detect the framework mentioned in the user's prompt (e.g., Flutter, Ionic/Angular, React Native, Expo). Use the exact UI components, styling conventions, and syntax native to that framework (e.g., Flutter Widgets, Ionic Swiper components, React Native FlatList).
* **Responsive Layout Paradigm:** Use the framework's native responsive layout tools (e.g., Flexbox, Column/Row widgets) to ensure perfect vertical alignment across different screen sizes.
* **Data-Driven Architecture:** Define the slide content as an array/list of data models, and use the framework's native looping mechanism to render the UI components dynamically.

## Required Output
**1. Component Data Model**
Generate the structured array/list containing the data for each slide (`step_index`, `illustration_concept`, `header_text`, `sub_text`, `action_state`). Use the syntax of the requested framework's primary language (Dart, TypeScript, JavaScript, etc.).

**2. Production-Ready UI Code**
Provide the exact, copy-pasteable UI component code for the requested framework to render the swiping interface, complete with data binding and layout structure.