CtrlK
BlogDocsLog inGet started
Tessl Logo

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

70

Quality

86%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

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.
Repository
nexu-io/open-design
Path

design-templates/mobile-app/SKILL.md

Commit

1a7a23d

Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill