mobile-onboarding

name	mobile-onboarding
description	Mobile app onboarding flow — 3–5 screens with swipe indicators, value props, and CTA. Use for "onboarding", "walkthrough", "tutorial", "first run".
triggers	["onboarding","walkthrough","tutorial","first run","app intro"]
df	{"mode":"prototype","platform":"mobile","scenario":"design","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true}}

Mobile Onboarding Skill

Produce a mobile onboarding flow.

Structure

• 3–5 screens shown as a horizontal scroll or swipeable stack.
• Each screen: illustration (CSS gradient/SVG), headline, body, CTA.
• Indicators: dot pagination at bottom.
• Skip / Next: top-right skip link, bottom full-width next button.
• Final screen: "Get started" primary CTA + "Already have an account? Sign in".

Rules

• One value prop per screen. No walls of text.
• Illustrations: abstract geometric shapes in DS colors.
• Swipeable via CSS scroll-snap, no JS.
• Progress: dot indicators animate width on active.
• data-df-id on each screen.

Output

Single index.html, inline CSS.