About mobile-app
A design skill for a single-screen mobile app layout shown inside an iPhone 15 Pro frame. It specifies the status bar, app header, main content, bottom tabs, Dynamic Island, and safe-area spacing.
Key features
- 01iPhone 15 Pro frame
- 02Status bar and app header
- 03Feed, list, detail, or form layout
- 04Four-to-five-item bottom tab bar
- 05Dynamic Island and safe-area spacing
Use cases
- 01Designing a single-screen mobile app
- 02Creating an iPhone 15 Pro mockup
Install
Copy the command and run it in a terminal.
$
npx skills add https:/ / github.com/ nexu-io/ html-anything --skill mobile-appAfter installing, type/mobile-appin Claude Code to confirm it loaded.
Bundled filesexample.html
Details
From the project README【模板: iPhone 单屏 App】 【意图】一个屏幕的 mobile app 设计, 放在像素级 iPhone 15 Pro frame 里。 【布局】
- Status bar (时间 + 电池 + 信号)
- App header (标题 / 头像 / 搜索)
- Main content (一个清晰的 archetype: feed / list / detail / form)
- Bottom tab bar (4-5 tab) 【设计细节】
- 真实的 dynamic island; safe-area 留白
Comments
Markdown supported