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.