skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

mobile-onboarding

Generates a three-screen mobile onboarding flow as a single HTML page with phone frames.

Updated May 20, 2026
Search Tags:#design system#ios#ui design#mobile onboarding#html prototype#sign-in screen#phone frames
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill mobile-onboarding-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-onboarding
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/mobile-onboarding
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill mobile-onboarding-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing a mobile onboarding flow from scratch requires laying out multiple phone screens with consistent status bars, pagination dots, CTAs, and sign-in options, which is repetitive and time-consuming to prototype by hand. ## Core Features & Use Cases - Three-Screen Flow: Produces splash, value-prop, and sign-in screens rendered side by side as phone frames on one HTML page. - Complete Mobile UI Details: Includes status bar, notch, 3-dot pagination, full-width pill CTA, skip action, and continue-with Apple/Google/email options. - Design System Integration: Reads DESIGN.md for color, typography, layout, and component guidance to keep output on-brand. - Use Case: Ask for a 3-screen onboarding flow for a meditation app and receive a self-contained HTML artifact with warm gradients, serif headings, and accessible contrast. ## Quick Start Design a 3-screen mobile onboarding flow for a meditation app with welcome, value props, and sign-in screens.

Frequently Asked Questions about mobile-onboarding

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a mobile onboarding flow prototype in HTML?▼

Provide a brief mentioning mobile onboarding, iOS onboarding, or phone signup, and the skill generates three phone frames side by side on one HTML page. Each frame includes a status bar, hero artwork, headline, pagination dots, and a primary CTA.

What screens are included in a mobile onboarding flow?▼

The flow contains three screens: a splash or welcome screen, a value-proposition screen, and a sign-in screen with continue-with Apple, Google, and email options. The last screen also includes terms and privacy links.

Does the onboarding prototype support a custom design system?▼

Yes, the workflow reads a DESIGN.md file covering color, typography, layout, and components before generating the screens. The output inherits those tokens so the prototype matches the project's visual language.

What output format does the mobile onboarding skill produce?▼

It produces a single self-contained text/html artifact with inline CSS and SVG artwork. The page renders three phone frames in a grid and collapses to a single column on narrow viewports.

When should I not use a static HTML onboarding prototype?▼

Avoid it when you need interactive swipe gestures, real authentication logic, or native platform behavior, since the output is a static visual prototype. Use a native or framework-based prototype for functional testing.

Related Skills

Explore More Design & Creative Skills→
KaziNizamulKaziNizamul

design-md

Extract design tokens from Stitch screens into a semantic DESIGN.md.

Community
Advanced
clovernguyen1010-ship-itclovernguyen1010-ship-it

ba-html-to-react-native-ds-code-gen

Convert HTML prototypes into Expo-compatible React Native components with TypeScript.

Community
Advanced
cenjiecenjie

app-store-screenshots

Generate App Store marketing screenshots from design and device assets via Next.js.

Community
Advanced
BekhruzTursunboevBekhruzTursunboev
7

bexa-mobile

Enforce platform-aware interaction patterns for React Native and Expo mobile UIs.

Community
Advanced