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.