--- 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] --- # 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 1. **Read `assets/template.html`** end-to-end through the `