| name | mobile-app |
| description | A mobile-app screen rendered inside a pixel-accurate iPhone 15 Pro frame
on the page. Built by copying the seed `assets/template.html` and pasting
one screen archetype from `references/layouts.md`. Use when the brief asks
for "mobile app", "iOS app", "Android app", "phone screen", or "app UI".
|
| triggers | ["mobile app","ios app","android app","phone screen","app ui","app mockup","移动端","手机 app"] |
| od | {"mode":"prototype","platform":"mobile","scenario":"design","preview":{"type":"html","entry":"index.html"},"design_system":{"requires":true,"sections":["color","typography","layout","components"]},"craft":{"requires":["state-coverage","animation-discipline"]}} |
Mobile App Skill
Produce a single mobile-app screen mockup, framed inside a real-feeling iPhone 15 Pro device.
Resource map
mobile-app/
├── SKILL.md ← you're reading this
├── assets/
│ └── template.html ← seed: device frame + screen primitives (READ FIRST)
└── references/
├── layouts.md ← 6 screen archetypes (Feed / Detail / Onboarding / Profile / Checkout / Focus)
└── checklist.md ← P0/P1/P2 self-review (anti-fake-device)
Workflow
Step 0 — Pre-flight
- Read
assets/template.html end-to-end through the <style> block. The Dynamic Island, status bar SVG icons, home indicator, side rails, and tab bar are all already drawn in HTML/SVG — do not re-implement them inline on each screen.
- so you know which 6 archetypes exist.
