Skip to main content

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 "移动端引导".

Jump to install

Source facts

Repository
nexu-io/open-design
Last source activity
July 27, 2026 at 14:02
Detected SKILL.md language
English
Stars
97,471
Forks
11,317

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
2 files

Showing 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","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