mcpField
M
mobile-onboarding

mobile-onboarding

github.com/mphinanceDesign & UI3285 installsUpdated 4d ago
Repository

About mobile-onboarding

A skill that produces a three-screen mobile onboarding flow as a single HTML page. It structures the screens around app audience, onboarding content, and a final sign-in or continuation screen.

Key features

  1. 01Three phone frames in one page
  2. 02Hero artwork or icon
  3. 03Headline and supporting text
  4. 04Pagination and primary CTA
  5. 05Final sign-in or continue screen

Use cases

  1. 01Draft onboarding for a mobile app
  2. 02Present a three-step welcome flow
  3. 03Create a sign-in screen concept

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mphinance/alpha-skills --skill mobile-onboarding

After installing, type/mobile-onboardingin Claude Code to confirm it loaded.

Bundled filesexample.htmlREADME.md

Details

From the project README

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>

Comments

Markdown supported