mobile-onboarding
Helps your agent create an onboarding flow for mobile apps. It shows multiple screens in sequence, like splash, value proposition, and sign-in. It's useful for designing the first user experience in an app.
What it does
Creates a welcome flow for mobile apps, showing three screens in sequence within phone frames. It includes elements like a status bar, buttons, and explanatory text.
When to use it
- ✓When you need to show how a new app works.
- ✓To create a phone signup page.
- ✓When describing the login process for an app.
Example of what to ask your AI
“Create an onboarding flow for a meditation app.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The AI reads instructions, identifies the app and audience, and arranges three phone screens side-by-side. Each screen has a status bar, image, text, progress indicators, and a main button.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill mobile-onboardingOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/design-templates/mobile-onboarding/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Mobile Onboarding Skill
Produce a three-screen mobile onboarding flow on a single HTML page.
Workflow
- Read DESIGN.md.
- Identify the app + audience.
- 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.
- Last phone is the sign-in / continue-with options screen.
- Strong typography, gentle gradients, accessible contrast.
Output contract
<artifact identifier="mobile-onboarding-name" type="text/html" title="Mobile Onboarding">
<!doctype html>...</artifact>
FAQ
What are the 'three screens'?
These are the initial screens a user sees when opening an app for the first time, such as an introduction, benefit explanation, and the login/signup screen.
What is the 'status bar'?
It's the bar at the top of the phone that shows the time, battery, and network signal.
What is 'CTA'?
It stands for 'Call To Action'. It's the main button that encourages the user to do something, like 'Get Started' or 'Log In'.
Details
Original description by the author
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 "移动端引导".
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #483
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC