Guide · Agent skill
How to use the iPhone App Screen Mockup agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The iPhone App Screen Mockup skill (skill name: mobile-app) lets an AI agent turn a plain description of a mobile app into one HTML page showing a single iPhone 15 Pro screen. It is aimed at designers, product managers and developers who need a quick visual concept. After reading this guide you will know what the skill produces, how to install it, how to ask for a screen, and where its limits are.
iPhone App Screen Mockupnexu-io/html-anything · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Get the mobile-app skill ZIP from our page.
- 2Unzip the skill. Extract it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. Go to Settings → Capabilities → Skills and upload the ZIP.
- 4Open the example. Open example.html in a browser to see the expected style.
- 5Describe one screen. Ask the agent for a single iPhone app screen, naming the app, its purpose and a feed, list, detail or form layout.
- 6Review and iterate. Check the status bar, header, content and 4-5 tab bar, then ask for changes to content or layout.
What the skill makes the agent do
An agent skill is a folder of instructions (a SKILL.md file plus any supporting files) that an AI agent loads when your request matches the skill. This one tells the agent to build a single-screen mobile app design inside a realistic iPhone 15 Pro frame.
Each output has a fixed set of parts: a status bar showing time, battery and signal; an app header with title, avatar and search; a main content area; and a bottom tab bar with 4 to 5 tabs. The dynamic island is drawn, and the layout leaves safe-area spacing. The main content is one clear archetype: a feed, list, detail page or form.
Install the mobile-app skill
Download the skill ZIP from our page and unzip it. You can install it for yourself or for a single project.
For a personal install, unzip it into ~/.claude/skills/. For a project-only install, unzip it into the project's .claude/skills/ folder. You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Project only: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Trigger the skill with a natural request
You do not need a special command. Describe a single app screen in plain language and mention an iPhone or mobile screen so the agent matches the request to this skill.
Good requests name the app, the purpose of the screen and the content type. The source says the main content can be a feed, list, detail page or form, so asking for one of those gives the most predictable result.
- Make an iPhone screen mockup for a recipe app's saved recipes list, with a search bar and five tabs.
- Create a single-screen iPhone 15 Pro design for a fitness tracker's daily activity detail page.
- Give me a mobile app form screen for booking a dentist appointment, inside an iPhone frame.
Review the example output
The package includes example.html, which shows the expected output style. Open it in a browser to see the phone frame, status bar, dynamic island, header, content area and tab bar before you make your own request.
What the skill needs and how it runs
The skill lists no requirements. It does not run scripts and does not use the network, according to its listing. Its files are example.html and SKILL.md.
Limits to keep in mind
The output is a static HTML picture of one screen. It is not a working iOS app and is not built with native iOS tools, so it is not production app code.
The layout is a generic template. It is good for concepts and placeholders, but not for exact brand matching or pixel-perfect handoff to engineers.
What people use it for
- Pitching a new app idea with a realistic phone screen
- Reviewing a single screen layout with a product team before design work starts
- Creating a placeholder iOS-style screen for a developer prototype
- Showing a stakeholder what a feed, list, detail page or form could look like
Frequently asked questions
How do I install the mobile-app agent skill?
Download the skill ZIP from our page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
What do I need to use this skill?
The skill's listing does not list any requirements. It does not run scripts and does not use the network. You need an agent environment that supports skills.
Is the mobile-app skill free?
This page does not state pricing. The source material gives the licence as Apache-2.0, which you should check in the repository for its terms.
Does it generate a working iPhone app?
No. The output is a static HTML page showing one iPhone 15 Pro screen. It is not a working iOS app and is not built with native iOS tools.
Can I use the output for engineering handoff?
Not for exact handoff. The layout is a generic template, so it suits concepts, pitches and placeholders rather than pixel-perfect specs for engineers.
What can the agent put on the screen?
The main content is one archetype: a feed, list, detail page or form. The header includes a title, avatar and search, and the bottom tab bar has 4 to 5 tabs.
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 quick, realistic single-screen iPhone concept for a design review, pitch or prototype placeholder. Pick something else if you need a working iOS app, native iOS code, or exact brand and pixel-perfect specs for engineers.
Download the skill