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".
Profile →npx skills add nexu-io/open-design --skill mobile-app --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 `<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,
- Resource map
- Workflow
- Step 0 — Pre-flight
- Step 1 — Copy the seed
- Step 2 — Pick exactly one archetype
- Step 3 — Paste and fill
- Step 4 — Self-check
- Step 5 — Emit the artifact
- Hard rules
What does the mobile-app skill do?
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".
How do I install it?
Run `npx skills add nexu-io/open-design --skill mobile-app --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.