mobile-app

Generate mobile app screen prototypes inside device frames from HTML templates.

3|2|Updated May 28, 2026
One-click install
npx skills add https://github.com/Clos01/Kenbun-Agent --skill mobile-app-clos01
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mobile-app
Source: https://github.com/Clos01/Kenbun-Agent/tree/main/core/tools/skills/mobile-app
Command: npx skills add https://github.com/Clos01/Kenbun-Agent --skill mobile-app-clos01

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps designers and developers quickly create realistic mobile app screen prototypes without rebuilding device frames, UI primitives, and layout structures from scratch.

Core Features & Use Cases

  • iPhone-Style Prototypes: Generate a single mobile app screen inside a pixel-accurate iPhone 15 Pro frame with Dynamic Island, status bar, rails, and home indicator.
  • Screen Archetypes: Build common app experiences using prepared layouts for feeds, detail pages, onboarding flows, profiles, checkout screens, and focus dashboards.
  • Design System Integration: Map existing design tokens into reusable mobile UI variables while enforcing spacing, typography, accent usage, and component consistency.
  • Use Case: Create a polished mobile banking checkout screen, productivity timer, or social profile mockup from a design brief while maintaining realistic device presentation.

Quick Start

Use the mobile-app skill to create a mobile app screen mockup for a fitness tracking dashboard using the provided device template and the closest matching layout archetype.

Frequently Asked Questions about mobile-app

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a mobile app screen mockup inside an iPhone frame?

To create a mobile app screen mockup, this Skill generates pixel-accurate HTML prototypes inside an iPhone 15 Pro device frame, complete with Dynamic Island, status bar, and home indicator for realistic UI design presentation.

Can I map existing design tokens into a mobile app prototype?

Yes, you can map existing design tokens into reusable mobile UI variables. The Skill enforces spacing, typography, accent usage, and component consistency to ensure your mockup aligns with your established design system.

What mobile app screen layouts can I generate using HTML mockups?

You can generate HTML mockups for common app screen layouts including feeds, detail pages, onboarding flows, profiles, checkout screens, and focused dashboard views using prepared layout archetypes.

What's the best way to prototype a mobile checkout flow without rebuilding UI primitives?

The best way to prototype a mobile checkout flow is using this Skill's prepared layout archetypes and reusable HTML templates, which prevent you from rebuilding device frames and UI primitives from scratch for validated single-screen artifacts.

Does this mobile UI design tool support both iOS and Android interface concepts?

Yes, the mobile UI design tool supports both iOS and Android interface concepts. It provides accurate device frames for iOS, like the iPhone 15 Pro, while applying its layout archetypes to broader mobile application screen prototypes.