mobile-onboarding
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 "移动端引导".
Source facts
- Repository
- nexu-io/open-design
- Last source activity
- August 18, 2026 at 07:09
- Detected SKILL.md language
- English
- Stars
- 98,525
- Forks
- 11,424
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
File Explorer
3 filesShowing SKILL.md
SKILL.md
Source instructions · Read-only preview- 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"]},"craft":{"requires":["state-coverage","animation-discipline","accessibility-baseline","form-validation","laws-of-ux"]},"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>
```
View on GitHub