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`
Install / Use
npx skills add nexu-io/open-design --skill mobile-appInstalls into whichever agent you are using.
SKILL.md
Installable skill definition
Quality Score
Category
DesignSupported Platforms
Our assessment of mobile-app
mobile-app scores 90/100 on our quality scale, 28th of 133 Design skills we index (top 22%).
Its SKILL.md is 3.7 KB long, well organised into 10 sections with 2 code examples: a solid amount of guidance for an agent.
With 97,896 GitHub stars, it is one of the more widely adopted skills in the catalogue.
Maintenance, license and trust
- The repository was last updated today, so mobile-app is actively maintained.
- It is released under the Apache-2.0 license, a permissive license that allows use, modification and commercial use with attribution.
- Its trust signals score 100/100, with no cautions. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.
mobile-app compared with similar skills
All 4 of these similar skills score higher than mobile-app; compare them before choosing.
| Skill | Score | Stars | Updated | Format |
|---|---|---|---|---|
| mobile-app (this skill)by nexu-io | 90 | 97.9k | today | SKILL.md |
| algorithmic-artby anthropics | 100 | 177.9k | 2d ago | SKILL.md |
| pptxby anthropics | 100 | 177.9k | 2d ago | SKILL.md |
| designby nextlevelbuilder | 100 | 130.2k | 3d ago | SKILL.md |
| ui-ux-pro-maxby nextlevelbuilder | 100 | 130.2k | 3d ago | SKILL.md |
Frequently asked questions
- How do I install mobile-app?
- Run
npx skills add nexu-io/open-design --skill mobile-app. The install tabs above show the steps for each supported agent. - Which AI agents does mobile-app work with?
- It is written for Universal, as a SKILL.md file. Other agents that read the same format can often use it too.
- Is mobile-app safe to use?
- It is Apache-2.0-licensed and scores 100/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
- Is mobile-app still maintained?
- The repository was last updated today, so mobile-app is actively maintained.
Skill content
View source on GitHubname: 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.htmlend-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. - Read
references/layouts.mdso you know which 6 archetypes exist. - Read the active DESIGN.md — map its tokens to the six
:rootvariables 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
<artifact identifier="mobile-slug" type="text/html" title="Mobile — Screen Name">
<!doctype html>
<html>...</html>
</artifact>
One sentence before describing what's there. Stop after </artifact>.
Hard rules
- The phone is real. Dynamic Island gap, SVG status icons, home indicator. The seed protects all three — don't rewrite the frame.
- Single screen, single job. No multi-tab tours, no spliced flows.
- Accent budget = 2. One active tab + one primary action is the default.
- Numerics in mono via
.numclass. - Display in serif via
var(--font-display). - No external images — use
.ph-imgplaceholders.
Related Skills
algorithmic-art
177.9kCreating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.
pptx
177.9kUse this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an em…
design
130.2kComprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG…
ui-ux-pro-max
130.2kUI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation.
Languages
Trust signals
From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.