Back to browse

nexu-io/open-design

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".

77Collecting
See how to use itView GitHub source
npx skills add https://github.com/nexu-io/open-design --skill "design-templates/mobile-app"
Automated source guideDesignStandard source

Source checked Jul 28, 2026·Refresh due Oct 26, 2026

Reorganized from the pinned upstream SKILL.md

Source-grounded design guide: mobile-app

Produce a single mobile-app screen mockup, framed inside a real-feeling iPhone 15 Pro device.

npx skills add https://github.com/nexu-io/open-design --skill "design-templates/mobile-app"
Check the pinned source

The pinned source supports a structured brief, but not an expanded tutorial. Only detected inputs, outputs, and sections are shown.

426 source words · 9 usable sections

Best fit

  • Use when the brief asks for "mobile app", "iOS app", "Android app", "phone screen", or "app UI".

Design process

Read mobile-app through these 4 source sections

Sections are extracted automatically from the pinned SKILL.md and link back to the source.

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…

SKILL.md · Workflow
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…

SKILL.md · Step 0 — Pre-flight
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.

SKILL.md · 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.
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.

SKILL.md · 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.

Design checklist

Verify each item before delivery

The source section “Workflow” has been checked.

The source section “Step 0 — Pre-flight” has been checked.

The source section “Step 1 — Copy the seed” has been checked.

The source section “Step 2 — Pick exactly one archetype” has been checked.

Choose a different workflow

When another Skill is the better fit

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.

A separate implementation from event4u-app/agent-config; compare its source, maintenance signals, and permission requirements.

Open source detail

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", "

A separate implementation from MoizIbnYousaf/marketing-cli; compare its source, maintenance signals, and permission requirements.

Open source detail

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.

A separate implementation from github/awesome-copilot; compare its source, maintenance signals, and permission requirements.

Open source detail

FAQ

What does the mobile-app source document cover?

Produce a single mobile-app screen mockup, framed inside a real-feeling iPhone 15 Pro device.

How do I install mobile-app?

The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "design-templates/mobile-app". Inspect the command and pinned source before running it.

Repository stars
82,073
Repository forks
9,485
Quality
77/100
Source repository last pushed

Quality breakdown

Based on traceable docs and repository signals; stars are not treated as quality.

77/100
Documentation26/30
Specificity14/25
Maintenance20/20
Trust signals17/25

Compare before choosing

Related Agent Skills and source variants

These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.

design-review by event4u-app

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.

higgsfield-generate by MoizIbnYousaf

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", "

arize-evaluator by github

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.

neuropixels-analysis by k-dense-ai

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.

scientific-brainstorming by k-dense-ai

Facilitates evidence-aware scientific ideation with independent generation, structured discussion, explicit assumptions, transparent evaluation, adversarial review, and decision logs. Use for early-stage research brainstorming or prioritizing candidate directions; hand off empirical validation, study design, ethics or regulatory review, and clinical questions to appropriate experts or skills.

View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 2 min

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 languageUse
feed, inbox, timeline, list, messages, notificationsA — Feed
article, post, item, recipe, song, product, song detailB — Detail
sign-up, welcome, intro, walkthrough, tourC — Onboarding
profile, account, user page, someone's bioD — Profile
checkout, payment, order, form, settings stepE — Checkout
timer, map, dashboard widget, single big numberF — 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 .num class.
  • Display in serif via var(--font-display).
  • No external images — use .ph-img placeholders.
Skill path
design-templates/mobile-app/SKILL.md
Commit SHA
89d6d4ef21ba
Repository license
Apache-2.0
Data collected