Claude MarketplacesSubmit
nexu-io avatar

Mobile Onboarding

nexu-io/open-design

Renders three phone frames side by side showing a complete onboarding sequence: splash screen, value prop, and sign-in. Each frame gets a status bar, hero artwork, headline and copy, swipe dots, and a primary CTA button. The skill automatically handles the layout so you get all three screens in a single HTML artifact instead of building them one at a time. Useful when you need to prototype the first-launch experience quickly or show stakeholders the full flow without jumping between files. Triggers on "mobile onboarding", "iOS onboarding", or "phone signup". The output is polished enough for design reviews but still just HTML and CSS.

skills.sh installs
276
GitHub stars
106.9K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add nexu-io/open-design --skill mobile-onboarding --agent claude-code

Installs into .claude/skills of the current project.

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>
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/nexu-io/open-design
Categories
Mobile Development, Design & UI/UX, CLI & Terminal
First seen
Jun 3, 2026

More from nexu-io/open-design

All 217

Recommended

More Mobile Development
1charleswiltgen avataraxiom-swiftui-architecturecharleswiltgen/axiomUse when separating logic from SwiftUI views, choosing architecture patterns, refactoring view files, or asking 'where should this code go', 'how do I organize 273skills.sh installs
2existential-birds avatarswiftui-code-reviewexistential-birds/beagleReviews SwiftUI code for view composition, state management, performance, and accessibility. Use when reviewing .swift files containing SwiftUI views, property 273skills.sh installs
3pproenca avatarios-tastepproenca/dot-skillsDesigns iOS 18+ SwiftUI experiences with real taste — starting from user goals, not pixels. Use this skill whenever the user asks you to build SwiftUI views, sc272skills.sh installs
4charleswiltgen avataraxiom-xcode-debuggingcharleswiltgen/axiomUse when encountering BUILD FAILED, test crashes, simulator hangs, stale builds, zombie xcodebuild processes, "Unable to boot simulator", "No such module" after269skills.sh installs
5pproenca avatarios-chaos-monkeypproenca/dot-skillsCrash-hunter skill for iOS 26 / Swift 6.2 clinic-architecture codebases that finds and fixes concurrency, memory, and I/O bugs using TDD. Covers data races, act267skills.sh installs
6everyinc avatartest-xcodeeveryinc/compound-engineering-pluginBuild and test iOS apps on simulator using XcodeBuildMCP. Use after making iOS code changes, before creating a PR, or when verifying app behavior and checking f255skills.sh installs