How to use the Mobile App Screen Mockup agent skill

What does the mobile-app skill make the agent do?

An agent skill is a folder of instructions that an agent-compatible runtime loads when a request matches the skill. This one tells the agent to build a single phone-app screen. It starts from a ready-made template that already draws the iPhone 15 Pro frame, including the Dynamic Island, status bar, home indicator and tab bar.

The agent then picks one of six common screen layouts (feed, detail, onboarding, profile, checkout, or a single-metric focus card), fills it with copy from your brief, and applies colours and fonts from a design system. Before delivering the file, it runs a self-check against a written checklist.

Install the mobile-app skill

Download the ZIP for the skill from the directory page and unzip it. You can install it in one of two places. For a personal install, unzip it into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder.

You can also upload the skill in the Claude apps by going to Settings → Capabilities → Skills and uploading the ZIP there.

• Personal: ~/.claude/skills/
• Project: .claude/skills/ inside your project folder
• Claude apps: Settings → Capabilities → Skills

Check what you need before you start

The skill needs an agent runtime that supports SKILL.md-format skills. It also expects an active DESIGN.md design system file, because the skill reads colour and font tokens from it and maps them onto the template's variables.

The skill does not run scripts and does not use the network, according to its listing.

• A SKILL.md-compatible agent runtime
• An active DESIGN.md file with colour and font tokens

Trigger the skill with a natural request

The skill activates when your brief uses phrases such as "mobile app", "iOS app", "Android app", "phone screen", "app UI" or "app mockup". Describe the one job the screen should do and include real copy where you can. The agent maps your wording to a layout: for example, words like feed, inbox or notifications lead to the feed layout, while checkout, payment or order lead to the checkout layout.

Keep the brief to one screen. If it mixes two jobs, the skill is designed to ship one screen and offer the other as a follow-up.

• "Make a phone screen for a recipe detail page with a save button and a short ingredients list."
• "Design an iOS app onboarding screen with a welcome headline and a sign-up button."
• "Create an app UI for a single big-number focus card showing today's step count."

Review the output

The skill outputs one HTML file, delivered as an artifact. The agent is instructed to keep the phone frame intact, keep the status bar and home indicator, use tap targets of at least 44px, limit the accent colour to about two uses on the screen, and use a monospace class for numbers and a serif display font for headings.

Open the file in a browser and check these points yourself. Because the skill forbids external images, expect grey placeholder boxes where photos would go.

• Scrolling should happen inside the screen, not the whole device frame.
• Images appear as placeholders, not real photos.
• The screen should show one clear job, not several flows.

Know the limits

The skill is built for one screen only. It does not produce full multi-screen app flows or clickable prototypes. It outputs HTML mockups, not native iOS or Android code, so it is not a route to production app code. If you need real external images, this skill will not supply them.

• Not for multi-screen flows or clickable prototypes
• Not for production iOS or Android code
• Not for work that needs real external images