skills.rest
MyHeavenDyf
MyHeavenDyfCOMMUNITY
Explore all skills by this author →
GitHub

mobile-app

Generate mobile app screen mockups inside an iPhone 15 Pro frame.

1|Updated May 8, 2026
Search Tags:#design system#UI design#iPhone#mobile app#screen mockup
One-click install
npx skills add https://github.com/MyHeavenDyf/UXAI --skill mobile-app-myheavendyf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-app
Source: https://github.com/MyHeavenDyf/UXAI/tree/main/packages/app/octoapp/templates/mobile-app
Command: npx skills add https://github.com/MyHeavenDyf/UXAI --skill mobile-app-myheavendyf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill solves the challenge of creating pixel-perfect mobile app UIs, framed inside an iPhone 15 Pro device, with ease and efficiency.

Core Features & Use Cases

  • iPhone 15 Pro Frame: Renders UIs in a realistic iPhone 15 Pro frame, including Dynamic Island, status bar, and home indicator.
  • Multiple Archetypes: Offers a selection of 6 screen archetype layouts to choose from for different mobile app screen types.
  • Design System Integration: Supports design systems by requiring them to be present for proper rendering.

Quick Start

Generate a mobile app screen mockup for "feed" by using the mobile-app skill and referencing the A — Feed archetype.

Frequently Asked Questions about mobile-app

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a mobile app screen mockup with an iPhone 15 Pro frame?▼

To create a mobile app screen mockup, this Skill renders your UI design inside a realistic iPhone 15 Pro frame, complete with the Dynamic Island, status bar, and home indicator.

What mobile app UI layouts are available for screen mockup generation?▼

Screen mockup generation offers 6 predefined screen archetype layouts, such as the feed layout, allowing you to quickly match different mobile app UI types.

Do I need a design system to render mobile app UIs?▼

Yes, a design system must be present to ensure proper rendering, and certain animation and state-coverage features are required to simulate interactions correctly.

Can I use this to generate mockups for different mobile app screen types?▼

Yes, you can generate mockups for different mobile app screen types by selecting from 6 predefined screen archetype options tailored for various app UI layouts.

What's the best way to render a feed layout in an iPhone 15 Pro device frame?▼

The best way to render a feed layout is to reference the predefined feed archetype, which generates the mobile app UI inside the iPhone 15 Pro device frame.

Why does my mobile app UI not render properly inside the device frame?▼

Your mobile app UI may not render properly if a design system is missing or if required animation and state-coverage features for interaction simulation are absent.

Related Skills

Explore More Design & Creative Skills→
PiercingXXPiercingXX
1

colorful

Generate Colorful design-system guidelines with WCAG 2.2 AA accessibility requirements.

Community
Intermediate
nexu-ionexu-io
84.7k

mobile-app

Generate pixel-accurate iPhone 15 Pro mobile-app screen mockups from archetypes.

Official
Intermediate
PiercingXXPiercingXX
1

mobile-app

Generate pixel-accurate iPhone 15 Pro framed HTML mockups from DESIGN.md tokens.

Community
Basic
asnar00asnar00
1

iphone-screen-capture

Mirror a connected iPhone's screen on macOS via a Swift app.

Community
Advanced