Agent skill · design visual · nexu-io
mobile-app
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".
Why this skill is useful
Provides a detailed workflow for creating mobile app mockups using specific design archetypes and templates that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
Mobile App Skill Produce a single mobile-app screen mockup, framed inside a real-feeling iPhone 15 Pro device. Resource map Workflow Step 0 — Pre-flight 1. 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. 2. Read references/layouts.md so you know which 6 archetypes exist. 3. Read the active DESIGN.md — map its tokens to the six :root variables in the seed. Step 1 — Copy the seed Copy assets/template.html to the project root as index.html. Replace the six :root variables with the active design system's tokens. Replace the page <title> and the caption above the device. Step 2 — Pick exactly one archetype Brief language Use --- --- feed, inbox, timeline, list, messages, notifications A — Feed article, post, item, recipe, song, product, song detail B — Detail sign-up, welcome, intro, walkthrough, tour C — Onboarding profile, account, user page, someone's bio D — Profile checkout, payment, order, form, settings step E — Checkout timer, map, dashboard widget, single big number F — Focus / hero card A mobile screen does one job. If the brief seems to combine two, ship one screen and offer the other as a follow-up. Step 3 — Paste and fill Copy the archetype block from layouts.md into <main class="content">, replacing the placeholder card. Fill bracketed text with real, specific copy from the brief. Drop the <nav class="tabbar"> block entirely for archetypes that don't show one (B, C, E). Step 4 — Self-check Run through references/checklist.md. Pay extra attention to: Frame still has the Dynamic Island, status bar SVGs, and home indicator Tap targets ≥ 44px One accent, used ≤ 2× on the screen Display headings still use var(--font-display) (serif) Step 5 — Emit the artifact One sentence before describing what's there. Stop after </artifact>. Hard rules The phone is real. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/mobile-app--815ad4