Mobile Onboarding Skill
SkillMediamobile-onboarding is a skill that guides an AI agent through designing a three-screen mobile onboarding sequence, splash, value proposition, and sign-in, laid out as phone frames on a single HTML page. It handles the details of status bars, pagination dots, CTAs, and skip actions, and outputs the result as an HTML artifact.
Available today. Use it from your connected AI after setup.
No other account needed.
Have a project with a DESIGN.md covering color, typography, layout, and components.
Then ask your AI: use the Mobile Onboarding Skill skill
What your AI can do with it
- Renders three phone frames side by side: splash, value-prop, and sign-in screens
- Adds status bar details (time, battery, signal) to each phone frame
- Includes 3-dot pagination and full-width pill primary CTAs
- Places a Skip or alternate action in the top-right of each screen
- Reads the project's DESIGN.md and applies its color, typography, layout, and components
- Outputs the flow as a single HTML artifact
Getting started
- Have a project with a DESIGN.md covering color, typography, layout, and components.
- Add the mobile-onboarding skill to the agent's available skills.
- Ask for a mobile onboarding flow, mentioning terms like "mobile onboarding", "phone signup", or "移动端引导" so the skill triggers.
- Review the resulting HTML artifact showing the three phone screens.
What this skill tells your AI
The instructions your AI receives, as published by nexu-io/open-design in design-templates/mobile-onboarding/SKILL.md and read by ahel’s review.
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>
Signals
- GitHub stars
- 98k
- Forks
- 11k
- Last commit
- Sep 2026
Others that do the same job
Questions
- When should this skill be used?
- When the brief mentions "mobile onboarding", "iOS onboarding", "phone signup", or "移动端引导".
- What does the output look like?
- A single HTML page with three phone frames side by side, splash, value-prop, and sign-in, each with a status bar, hero artwork, headline, pagination dots, primary CTA, and a skip action.
- Does it need a design system?
- Yes. The skill requires a design system and reads DESIGN.md sections on color, typography, layout, and components before designing.
- Which screen handles sign-in?
- The last of the three phones is the sign-in / continue-with options screen.
Advanced
- Item type
- skill
- Key
mobile-onboarding-2- Source
- github.com/nexu-io/open-design