Zakaria
a46764fb1b
ci / Validate workspace (push) Has been cancelled
landing-page-ci / Validate landing page (push) Has been cancelled
landing-page-deploy / Deploy landing page (push) Has been cancelled
github-metrics / Generate repository metrics SVG (push) Has been cancelled
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
53 lines
1.4 KiB
Markdown
53 lines
1.4 KiB
Markdown
---
|
|
name: mobile-onboarding
|
|
description: |
|
|
A multi-screen mobile onboarding flow rendered as three phone frames
|
|
side by side — splash, value-prop, sign-in. Status bar, swipe dots,
|
|
primary CTA. Use when the brief mentions "mobile onboarding", "iOS
|
|
onboarding", "phone signup", or "移动端引导".
|
|
triggers:
|
|
- "mobile onboarding"
|
|
- "ios onboarding"
|
|
- "android onboarding"
|
|
- "phone signup"
|
|
- "app onboarding"
|
|
- "移动端引导"
|
|
od:
|
|
mode: prototype
|
|
platform: mobile
|
|
scenario: design
|
|
featured: 13
|
|
preview:
|
|
type: html
|
|
entry: index.html
|
|
design_system:
|
|
requires: true
|
|
sections: [color, typography, layout, components]
|
|
example_prompt: "Design a 3-screen mobile onboarding flow for a meditation app — welcome, value props, sign-in."
|
|
---
|
|
|
|
# Mobile Onboarding Skill
|
|
|
|
Produce a three-screen mobile onboarding flow on a single HTML page.
|
|
|
|
## Workflow
|
|
|
|
1. Read DESIGN.md.
|
|
2. Identify the app + audience.
|
|
3. Layout: three phone frames side by side. Each phone:
|
|
- Status bar (time, battery, signal).
|
|
- Hero artwork or icon.
|
|
- Headline + supporting paragraph.
|
|
- 3-dot pagination.
|
|
- Primary CTA (full-width pill button).
|
|
- "Skip" or alt action top-right.
|
|
4. Last phone is the sign-in / continue-with options screen.
|
|
5. Strong typography, gentle gradients, accessible contrast.
|
|
|
|
## Output contract
|
|
|
|
```
|
|
<artifact identifier="mobile-onboarding-name" type="text/html" title="Mobile Onboarding">
|
|
<!doctype html>...</artifact>
|
|
```
|