What problem does it solve? Designing a convincing mobile app mockup from scratch is slow and often produces generic cards that don't look like a real phone. This Skill produces a single, polished mobile screen inside a pixel-accurate iPhone 15 Pro frame (Dynamic Island, SVG status bar, home indicator) by copying a seed template and pasting one of six proven screen archetypes. ## Core Features & Use Cases - Pixel-accurate device frame: The seed assets/template.html pre-draws the Dynamic Island, status bar SVG icons, home indicator, side rails, and tab bar so the result looks like a real phone, not a card. - Six screen archetypes: references/layouts.md provides paste-ready layouts for Feed, Detail, Onboarding, Profile, Checkout, and Focus/hero-card screens, mapped to common brief language. - Design-system integration: Six :root CSS variables map directly to an active DESIGN.md, with serif display type, mono numerics, and a strict two-use accent budget. - Use Case: Given a brief like "a focus timer app screen", copy the seed, paste Archetype F, fill in real copy, run the P0 checklist, and emit a single self-contained HTML artifact. ## Quick Start Use the mobile-app skill to create an iPhone mockup of a focus timer screen with a countdown card, today's stats, and an up-next task list.
