Mobile Onboarding
- 281 installs
- 83.7k repo stars
- Updated August 5, 2026
- nexu-io/open-design
mobile-onboarding is a prototyping skill that designs mobile onboarding screens and first-run flows for developers who need to test comprehension, permission timing, and activation steps.
About
mobile-onboarding is a prototyping skill that helps developers design and iterate on mobile onboarding screens and first-run flows before native implementation or app submission. mobile-onboarding focuses on activation-critical details such as permission timing, sequencing of steps, and clarity of first-run instructions so teams can validate that users understand what to do next. mobile-onboarding is useful when a developer is translating product requirements into concrete screens and states, including edge cases like skipped permissions, retries, and partial onboarding completion. mobile-onboarding is best used during early validation and UX iteration, when rapid prototypes and flow diagrams can prevent expensive rewrites in iOS or Android code and can improve activation by aligning screens, copy, and permission prompts.
- First-run flow design
- Mobile screen sequences
- Permission step planning
- Activation-focused copy
- Testable UX mock
Mobile Onboarding by the numbers
- 281 all-time installs (skills.sh)
- +2 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #845 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill mobile-onboardingAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 281 |
|---|---|
| repo stars | ★ 83.7k |
| Last updated | August 5, 2026 |
| Repository | nexu-io/open-design ↗ |
How do you prototype a mobile onboarding flow?
Prototype mobile onboarding screens and flows to test first-run comprehension, permission timing, and activation steps before native implementation or App Store submission.
Who is it for?
mobile-onboarding fits developers building a mobile app who need a validated first-run and permissions flow before implementation.
Skip if: mobile-onboarding is not for developers who only need backend APIs or database schema design.
When should I use this skill?
Invoke when a developer asks to design onboarding screens, test first-run comprehension, or decide when to request mobile permissions.
What you get
Onboarding flow map, screen prototypes, permission timing plan, activation step checklist.
- flow map
- screen prototypes
- permission plan
Files
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><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lull · Mobile onboarding</title>
<style>
:root {
--canvas: #efece4;
--ink: #232118;
--muted: #76715f;
--accent: #c66e3a;
--warm: #e8a76e;
--display: 'Iowan Old Style', 'Charter', Georgia, serif;
--body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); font-family: var(--body); color: var(--ink); }
.stage {
min-height: 100vh;
padding: 56px 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
background:
radial-gradient(ellipse 80% 60% at 50% -10%, rgba(232,167,110,0.35), transparent 70%),
radial-gradient(ellipse 80% 50% at 50% 110%, rgba(198,110,58,0.16), transparent 70%),
var(--canvas);
}
.stage h1 {
font-family: var(--display);
font-size: 28px;
margin: 0;
letter-spacing: -0.005em;
}
.stage p.lede { color: var(--muted); margin: 0; max-width: 50ch; text-align: center; }
.phones {
display: grid;
grid-template-columns: repeat(3, auto);
gap: 36px;
align-items: center;
}
.phone {
width: 320px;
aspect-ratio: 9 / 19.5;
background: #fff;
border-radius: 44px;
border: 8px solid #1a1814;
overflow: hidden;
position: relative;
box-shadow:
0 32px 60px rgba(28,27,26,0.18),
0 12px 18px rgba(28,27,26,0.08);
display: flex;
flex-direction: column;
}
.phone .notch {
position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 100px; height: 22px;
background: #1a1814;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
z-index: 5;
}
.statusbar {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 24px 4px;
font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.statusbar .right { display: flex; gap: 6px; align-items: center; font-size: 11px; }
.status-icon { display: inline-block; width: 14px; height: 8px; background: var(--ink); border-radius: 2px; }
.phone-body {
flex: 1;
padding: 18px 24px 24px;
display: flex;
flex-direction: column;
}
.phone-top { display: flex; justify-content: flex-end; align-items: center; }
.skip { font-size: 13px; color: var(--muted); }
.hero { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 0; }
.hero .art { width: 220px; height: 220px; }
.copy { display: flex; flex-direction: column; gap: 10px; padding: 14px 4px; }
.copy h2 { font-family: var(--display); font-size: 30px; line-height: 1.1; margin: 0; letter-spacing: -0.01em; font-weight: 700; }
.copy p { color: var(--muted); margin: 0; font-size: 15px; line-height: 1.5; }
.pager { display: flex; justify-content: center; gap: 6px; padding: 14px 0 8px; }
.pager span { width: 6px; height: 6px; border-radius: 50%; background: rgba(35,33,24,0.18); }
.pager span.active { width: 22px; background: var(--accent); border-radius: 999px; }
.cta {
background: var(--ink); color: #fef9ee;
padding: 16px 22px; border-radius: 999px;
text-align: center; font-weight: 600; font-size: 15px;
}
.alt { text-align: center; color: var(--muted); padding-top: 12px; font-size: 13px; }
.alt a { color: var(--accent); font-weight: 600; }
/* Phone 3 — sign-in */
.signin-options { display: flex; flex-direction: column; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid rgba(35,33,24,0.12); border-radius: 14px; font-weight: 500; font-size: 14.5px; }
.opt .glyph { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.opt.apple .glyph { background: #000; }
.opt.google .glyph { background: linear-gradient(135deg, #ea4335, #fbbc05, #34a853, #4285f4); }
.opt.email .glyph { background: var(--accent); }
.terms { font-size: 11px; color: var(--muted); text-align: center; padding-top: 14px; line-height: 1.5; }
.terms a { color: var(--accent); }
@media (max-width: 1100px) {
.phones { grid-template-columns: 1fr; }
.phone { width: 92vw; max-width: 360px; }
}
</style>
</head>
<body>
<div class="stage">
<h1>Lull · onboarding flow</h1>
<p class="lede">Three screens, one tone of voice. Designed in the Lull design system — warm canvas, serif headings, single accent.</p>
<div class="phones">
<!-- Screen 1: welcome -->
<div class="phone">
<div class="notch"></div>
<div class="statusbar"><span>9:41</span><div class="right"><span>5G</span><span class="status-icon"></span></div></div>
<div class="phone-body">
<div class="phone-top"><span class="skip">Skip</span></div>
<div class="hero">
<svg class="art" viewBox="0 0 220 220">
<defs>
<radialGradient id="moon1" cx="50%" cy="40%" r="60%">
<stop offset="0%" stop-color="#fcebd0"/>
<stop offset="100%" stop-color="#e8a76e"/>
</radialGradient>
</defs>
<circle cx="110" cy="110" r="78" fill="url(#moon1)"/>
<circle cx="146" cy="92" r="14" fill="#fff" opacity="0.6"/>
<circle cx="78" cy="74" r="3" fill="#c66e3a" opacity="0.7"/>
<circle cx="60" cy="120" r="2" fill="#c66e3a" opacity="0.5"/>
<circle cx="170" cy="140" r="2.5" fill="#c66e3a" opacity="0.6"/>
<path d="M 30 200 Q 110 170 200 200 L 200 220 L 30 220 Z" fill="#c66e3a" opacity="0.18"/>
</svg>
</div>
<div class="copy">
<h2>Quiet beats noise.</h2>
<p>Twelve minutes a day. A practice that fits in a coffee break. No streaks, no badges — just a calmer evening.</p>
</div>
<div class="pager"><span class="active"></span><span></span><span></span></div>
<div class="cta">Continue</div>
</div>
</div>
<!-- Screen 2: value props -->
<div class="phone">
<div class="notch"></div>
<div class="statusbar"><span>9:41</span><div class="right"><span>5G</span><span class="status-icon"></span></div></div>
<div class="phone-body">
<div class="phone-top"><span class="skip">Skip</span></div>
<div class="hero">
<svg class="art" viewBox="0 0 220 220">
<rect x="38" y="48" width="144" height="100" rx="14" fill="#fff" stroke="#c66e3a" stroke-width="1.5"/>
<rect x="56" y="68" width="56" height="6" rx="3" fill="#c66e3a"/>
<rect x="56" y="84" width="100" height="4" rx="2" fill="#76715f" opacity="0.4"/>
<rect x="56" y="96" width="80" height="4" rx="2" fill="#76715f" opacity="0.4"/>
<rect x="56" y="116" width="40" height="20" rx="10" fill="#c66e3a"/>
<circle cx="170" cy="160" r="22" fill="#e8a76e"/>
<path d="M 162 160 L 168 166 L 178 154" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="copy">
<h2>Practice that meets you where you are.</h2>
<p>Adaptive sessions that get shorter on busy days, deeper on quiet ones. The kind of routine that survives a Wednesday.</p>
</div>
<div class="pager"><span></span><span class="active"></span><span></span></div>
<div class="cta">Continue</div>
</div>
</div>
<!-- Screen 3: sign in -->
<div class="phone">
<div class="notch"></div>
<div class="statusbar"><span>9:41</span><div class="right"><span>5G</span><span class="status-icon"></span></div></div>
<div class="phone-body">
<div class="phone-top"><span class="skip">Help</span></div>
<div style="padding: 24px 0;">
<h2 style="font-family: var(--display); font-size: 32px; margin: 0 0 8px; letter-spacing: -0.01em; line-height: 1.05; font-weight: 700;">Make a place for it.</h2>
<p style="margin: 0; color: var(--muted); font-size: 15px;">Save your sessions across devices. We don't email, we don't share.</p>
</div>
<div class="signin-options">
<div class="opt apple"><span class="glyph"></span>Continue with Apple</div>
<div class="opt google"><span class="glyph"></span>Continue with Google</div>
<div class="opt email"><span class="glyph">@</span>Continue with email</div>
</div>
<div style="flex: 1;"></div>
<div class="terms">By continuing, you agree to Lull's <a>Terms</a> and <a>Privacy Policy</a>.</div>
<div class="pager"><span></span><span></span><span class="active"></span></div>
</div>
</div>
</div>
</div>
</body>
</html>
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kHow it compares
Pick this when you need onboarding UX validation and permission sequencing rather than email lifecycle automation or compliance workflows.
FAQ
What should a mobile onboarding prototype include?
mobile-onboarding prototypes should include the full first-run sequence, key activation steps, and permission timing decisions, so developers can validate comprehension and define fallback states when users deny or skip permissions before native implementation.
When is the best time to request permissions?
mobile-onboarding treats permission timing as part of the UX flow by aligning prompts with clear user intent and benefit messaging, which helps developers avoid early permission spam and reduces denial rates that can block activation.