mcpField
M
mobile-onboarding

mobile-onboarding

github.com/nexu-ioDesign & UI104.6k275 installsUpdated today
Repository

About mobile-onboarding

mobile-onboarding is a design skill for agents producing a three-screen mobile onboarding flow. It lays out three phone frames on one HTML page, with sign-in or continue options on the final screen.

Key features

  1. 01Creates a three-screen flow on one page
  2. 02Shows phone frames side by side
  3. 03Includes status bars, artwork, and pagination
  4. 04Adds a primary CTA and skip action
  5. 05Offers sign-in or continue options on the last screen

Use cases

  1. 01Designing first-run mobile app onboarding
  2. 02Presenting a product before sign-in
  3. 03Drafting a mobile onboarding page

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nexu-io/open-design --skill mobile-onboarding

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

Bundled filesexample.html

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