Best for
- Use when the brief asks for "mobile app", "iOS app", "Android app", "phone screen", or "app UI".
Source profileQuality 77/100
nexu-io/open-design/design-templates/mobile-app/SKILL.md
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".
- Source repository stars
- 82,073
- Declared platforms
- 0
- Static risk flags
- 0
- Last source update
- 2026-07-28
- Source checked
- 2026-07-28
Decision brief
What it does—and where it fits
Produce a single mobile-app screen mockup, framed inside a real-feeling iPhone 15 Pro device.
Not for
- Tasks that require unconfirmed production actions or broad system permissions.
- Environments where the pinned source and install steps cannot be inspected.
Compatibility matrix
Platform support, with evidence labels
| Platform | Status | Evidence | What to check |
|---|---|---|---|
| Codex | Not declared | No explicit evidence | Portability before use |
| Claude Code | Not declared | No explicit evidence | Portability before use |
| Cursor | Not declared | No explicit evidence | Portability before use |
| Gemini CLI | Not declared | No explicit evidence | Portability before use |
Installation
Inspect first. Install second.
The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.
Source-detected install commandSource
npx skills add https://github.com/nexu-io/open-design --skill "design-templates/mobile-app"Safe inspection promptEditorial
Inspect the Agent Skill "mobile-app" from https://github.com/nexu-io/open-design/blob/89d6d4ef21baf80f871595abdf6f7de6e941dd44/design-templates/mobile-app/SKILL.md at commit 89d6d4ef21baf80f871595abdf6f7de6e941dd44. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.
Workflow
What the source asks the agent to do
- 01
Workflow
1. Read assets/template.html end-to-end through the 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 arch…
Read assets/template.html end-to-end through the 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 scree…Read references/layouts.md so you know which 6 archetypes exist.Read the active DESIGN.md — map its tokens to the six :root variables in the seed. - 02
Step 0 — Pre-flight
1. Read assets/template.html end-to-end through the 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 arch…
Read assets/template.html end-to-end through the 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 scree…Read references/layouts.md so you know which 6 archetypes exist.Read the active DESIGN.md — map its tokens to the six :root variables in the seed. - 03
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 and the caption above the device.
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 and the caption above the device. - 04
Step 2 — Pick exactly one archetype
A mobile screen does one job. If the brief seems to combine two, ship one screen and offer the other as a follow-up.
A mobile screen does one job. If the brief seems to combine two, ship one screen and offer the other as a follow-up.
Permission review
Static risk signals and limitations
No configured static risk pattern was detected
This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.
Evidence record
Why each signal appears
EvidenceSourceComputedTestedEditorial
| Signal | Value | Evidence type | Meaning |
|---|---|---|---|
| Quality score | 77/100 | Computed | Documentation, specificity, maintenance, and trust rules |
| Repository stars | 82,073 | Source | Repository attention, not individual Skill quality |
| Compatibility | 0 platforms | Source | Declared in the catalog source record |
| Usage guide | automated source guide | Editorial | Generated or reviewed according to the visible evidence level |
Pinned source
Provenance and original SKILL.md
- Repository
- nexu-io/open-design
- Skill path
- design-templates/mobile-app/SKILL.md
- Commit
- 89d6d4ef21baf80f871595abdf6f7de6e941dd44
- License
- Apache-2.0
- Collected
- 2026-07-28
- Default branch
- main
View the original SKILL.md
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.
Alternatives
Compare before choosing
Computed 997
event4u-app/agent-config
design-review
Use when the user says "review the design", "check the UI", or wants a comprehensive UI/UX review. Uses a 7-phase methodology covering interaction, responsiveness, accessibility, and more.
Computed 9827
MoizIbnYousaf/marketing-cli
higgsfield-generate
Use when the user wants to generate an image or video via Higgsfield AI. Covers 30+ models: Soul V2, Seedance 2.0, Kling 3.0, Veo 3.1, GPT Image 2, Nano Banana 2. Also covers Marketing Studio — branded ad video/image with avatars and products. Use whenever: "generate an image", "make a video", "animate this photo", "image-to-video", "img2vid", "edit this image with AI", "produce a clip", "create an ad", "make a UGC video", "marketing video", "brand video", "TV spot", "import product from URL", "
Computed 9637,126
github/awesome-copilot
arize-evaluator
Handles LLM-as-judge evaluation workflows on Arize including creating/updating evaluators, running evaluations on spans or experiments, managing tasks, trigger-run operations, column mapping, and continuous monitoring. Use when the user mentions create evaluator, LLM judge, hallucination, faithfulness, correctness, relevance, run eval, score spans, score experiment, trigger-run, column mapping, continuous monitoring, or improve evaluator prompt.
Computed 9631,966
K-Dense-AI/scientific-agent-skills
neuropixels-analysis
Analyze Neuropixels extracellular recordings end-to-end with SpikeInterface. Covers loading SpikeGLX/Open Ephys/NWB data, preprocessing, drift/motion correction, Kilosort4 (and CPU) spike sorting, quality metrics, and unit curation (threshold-based, model-based UnitRefine, and AI-assisted visual review). Use when working with Neuropixels 1.0/2.0 recordings, spike sorting, or extracellular electrophysiology analysis.