Skip to content
Get packs

Mobile Onboarding Screens

Lays out three side-by-side phone mockups for an app's splash, value-prop and sign-in screens

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
2 files

What it does

This skill is a ready-made layout template for HTML-based design output. When installed, the agent can produce a page showing three phone-sized screens next to each other: a splash screen with logo and tagline, a value-proposition screen with an illustration and short text, and a sign-in screen with email, Apple and Google options plus a main call-to-action button. It gives the agent a consistent structure to follow instead of inventing the layout from scratch.

Great for

  • Designers sketching the first-run flow of a mobile app before building it
  • Product teams who want a quick visual mockup to discuss sign-up options
  • Developers who need placeholder onboarding screens for a prototype

Skip it if

  • Producing production-ready app code: it only describes a visual layout, not functional screens or logic
  • Teams needing exact brand-compliant designs, since it is a generic structure that still needs real content and styling

Try asking

  • “Create a three-phone onboarding mockup for a fitness app with splash, value proposition and sign-in screens”
  • “Make an iOS-style sign-up flow preview with email, Apple and Google login buttons”
  • “Show a side-by-side onboarding walkthrough for a meditation app”
Step-by-step guide: how to use Mobile Onboarding ScreensInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    mobile-onboarding.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip mobile-onboarding.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip mobile-onboarding.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent your app name, tagline and brand colours so the mockup reflects your product rather than placeholder text
  • Ask for the illustration to be described or swapped for your own image, since the template only specifies its position
  • The included example.html shows the expected look, so mention it if you want closer matching output

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.