Mobile Onboarding Skill
SkillMediaThis is a skill that generates a mockup of a mobile onboarding flow shown as three phone screens side by side. It walks the agent through designing a splash screen, a value-proposition screen, and a sign-in screen, each rendered inside its own phone frame on a single HTML page. Use it when a brief mentions mobile onboarding, iOS onboarding, phone signup, or 移动端引导.
Use Mobile Onboarding Skill in Claude, ChatGPT or Ahel Desktop
Free. Sign in, add Mobile Onboarding Skill and connect your AI. About a minute.
Also: Claude Code · Cursor · Codex
Then ask your AI: use the Mobile Onboarding Skill skill
Details
Instructions available. Your AI can read the instructions. Execution depends on the setup they require.
Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.
No other account needed.
Have a project with a DESIGN.md file describing the visual direction.
What your AI can do with it
- Render three phone frames side by side on one HTML page
- Build a splash screen with a status bar
- Build a value-proposition screen with swipe dots
- Build a sign-in screen with a primary CTA
- Add skip actions to the onboarding screens
- Read the project's DESIGN.md before laying out screens
Getting started
- Have a project with a DESIGN.md file describing the visual direction.
- Ask the agent for a mobile onboarding flow, or mention iOS onboarding, phone signup, or 移动端引导.
- Let the agent read DESIGN.md and draft the splash, value-prop, and sign-in screens.
- Review the three phone frames with status bars, swipe dots, CTAs, and skip actions.
- Collect the result as an HTML artifact.
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
- 99k
- Forks
- 11k
- Last commit
- Oct 2026
Questions
- What does the skill produce?
- A single HTML page showing three phone frames side by side: a splash screen, a value-proposition screen, and a sign-in screen, with status bars, swipe dots, a primary CTA, and skip actions.
- When should this skill be used?
- When the brief mentions mobile onboarding, iOS onboarding, phone signup, or 移动端引导.
- Does it need a design file?
- Yes. The steps include reading the project's DESIGN.md before adding status bars, pagination dots, CTAs, and skip actions.
- How many screens does the flow have?
- Three: splash, value-prop, and sign-in, each shown in its own phone frame.
Advanced
- Item type
- skill
- Key
mobile-onboarding-2- Source
- github.com/nexu-io/open-design