Guide · Agent skill
How to use the Mobile Onboarding Screens agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The mobile-onboarding skill is a ready-made layout template that tells an AI agent how to lay out the first-run screens of a mobile app as HTML: three phone-sized screens side by side. It is aimed at designers, product teams and developers who need a quick visual mockup of sign-up or first-run flow. By the end of this guide you will know what a skill is, how to install this one, how to ask for its output, and what it can and cannot do.
Mobile Onboarding Screensnexu-io/html-anything · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Download the mobile-onboarding skill ZIP from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 4Describe the flow. Ask for three onboarding screens (splash, value prop and sign-in) in plain language, adding your app's copy.
- 5Review the HTML output. Open the generated page and check the three phone frames against the layout.
- 6Restyle for your brand. Replace placeholder colours, type and imagery with your own before sharing with users.
What an agent skill is and what this one makes the agent do
An agent skill is a folder containing a SKILL.md file that gives an AI agent extra instructions for a specific kind of task. When the skill is installed and relevant, the agent can follow its structure instead of inventing one from scratch.
This skill asks the agent to show three phone screens next to each other. Phone 1 is a splash screen with a logo and tagline. Phone 2 is a value-proposition screen with an illustration, one short sentence and dot indicators. Phone 3 is a sign-in screen with email, Apple and Google options plus a main call-to-action button.
- Phone 1: Splash (logo + tagline)
- Phone 2: Value-prop (illustration + one sentence + dot indicators)
- Phone 3: Sign-in (email / Apple / Google + main CTA)
How to install the mobile-onboarding skill
Download the skill ZIP from this page and unzip it. You can install it in one of two places: your personal skills folder at ~/.claude/skills/, or a project's .claude/skills/ folder if you want it available only inside that project.
Alternatively, in the Claude apps, open Settings, go to Capabilities, and upload the skill under Skills.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload the skill
How to trigger the skill with a natural request
You do not need a special command. Describe the result you want in plain language that mentions the kind of screens you need: first-run flow, onboarding screens, splash and sign-in, or a three-screen app intro. The agent should recognise the request and apply the layout.
Be specific about the content if you have it. The skill gives structure, but it still needs real text, a product name and a tagline to produce something useful.
- "Make me three mobile onboarding screens for a note-taking app: splash, value prop and sign-in."
- "Sketch the first-run sign-up flow for a fitness tracker as three phone screens side by side."
- "Give me a quick onboarding mockup for my prototype with Apple and Google sign-in options."
What to expect in the output
The output is an HTML page showing three phone-sized frames in a row. Each frame follows the layout described in SKILL.md. The skill is a generic structure, so colours, typography and imagery will be placeholders unless you supply them.
Review the result as a discussion piece. It is useful for agreeing on what the first-run flow contains, not for final visual design.
What the skill needs and safety notes
The source lists no requirements beyond the agent itself. It does not run scripts and does not use the network. The package contains two files: SKILL.md, which holds the instructions, and example.html, an example page.
Because the skill runs no scripts and makes no network calls, the main safety question is simply what you do with the HTML it produces. Treat it as a mockup and check any copy before sharing it externally.
- Requires: nothing listed beyond the agent
- Runs scripts: no
- Uses network: no
- Files: SKILL.md and example.html
Tips for better onboarding mockups
Give the agent the exact tagline, the single value-proposition sentence and the sign-in options you want. The skill's sign-in screen covers email, Apple and Google, so say if you need fewer or different options.
Use the example.html file in the package as a reference for what the finished layout looks like before you ask for your own version.
- Supply real copy for the logo, tagline and value sentence.
- Name the sign-in methods you actually support.
- Open example.html first to see the expected structure.
- Expect to restyle the output with your brand before it goes to users.
What people use it for
- Designers sketching the first-run flow of a mobile app before building it.
- Product teams discussing which sign-up options to offer, using a quick visual mockup.
- Developers who need placeholder onboarding screens for a prototype.
- Stakeholder reviews where a three-screen first-run sequence needs to be agreed on.
Frequently asked questions
How do I install the mobile-onboarding agent skill?
Download the skill ZIP from this page and unzip it into ~/.claude/skills/ for personal use or a project's .claude/skills/ folder. In the Claude apps you can instead go to Settings → Capabilities → Skills and upload it there.
What does the mobile onboarding skill require?
The source lists no requirements beyond the agent itself. It does not run scripts and does not use the network.
Is the mobile-onboarding skill free?
The source states its licence as Apache-2.0. It does not list pricing, so check the repository for terms before relying on it commercially.
Can the skill generate production-ready app code?
No. It only describes a visual layout for three screens. It does not produce functional screens or app logic, so it suits mockups and prototypes rather than shipping code.
What is the difference between this skill and designing screens by hand?
The skill gives the agent a consistent three-screen structure to follow instead of inventing a layout each time. It is generic, so you still need to add real content, brand styling and any exact design requirements yourself.
Why doesn't my output match the example or my brand?
The skill is a generic structure with placeholder content. Supply your own logo text, tagline, value sentence and sign-in options, then restyle the result with your brand's colours and typography.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want a fast, consistent three-screen onboarding mockup to discuss sign-up flow with a team or to drop into a prototype. Skip it if you need production app code, functional screens, or designs that must follow strict brand rules, since it only provides a generic visual structure.
Download the skill