skills.rest
openvetta
openvettaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mobile-ui-design

Generates single-file HTML mobile screens with correct safe-area handling for device-frame previews.

154|27|Updated Aug 3, 2026
Search Tags:#html#css#mockup#mobile ui#ios design#safe area#android material
One-click install
npx skills add https://github.com/openvetta/open-vetta --skill mobile-ui-design-openvetta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mobile-ui-design
Source: https://github.com/openvetta/open-vetta/tree/main/packages/plugins/externals/mobile-ui-preview/agent/skills/mobile-ui-design
Command: npx skills add https://github.com/openvetta/open-vetta --skill mobile-ui-design-openvetta

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Mobile-style HTML pages previewed inside device frames often break because content collides with the status bar at the top or the home indicator at the bottom. This Skill enforces explicit safe-area reservation so titles, buttons, and tab bars never hide under the notch, Dynamic Island, or gesture bar. ## Core Features & Use Cases - Safe-area enforcement: Defines --safe-top and --safe-bottom CSS variables with max(env(...), fallback) so layouts work both in the preview iframe and on real devices. - Reusable scaffold: Provides a complete single-file HTML template with fixed header, scrollable content region, and bottom tab bar using 100dvh layout. - Platform style cues: Applies iOS or Android (Material) design conventions including colors, typography, and component patterns. - Use Case: Ask for an iOS-style settings page or an Android app home screen, and get a ready-to-preview HTML file that renders correctly in the Mobile UI Preview panel across iPhone, Android, and iPad frames. ## Quick Start Ask the agent to design an iOS-style profile page as a single HTML file and preview it in the Mobile UI Preview panel.

Frequently Asked Questions about mobile-ui-design

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

FAQPage Schema
How do I make an HTML page look like a native mobile app?▼

Use a single-file HTML page with viewport-fit=cover, a 100dvh app root, platform-matching fonts and colors, and explicit safe-area padding. The provided scaffold includes a fixed header, scrollable content region, and bottom tab bar styled for iOS or Android.

How to prevent content from hiding under the iPhone notch or Dynamic Island?▼

Reserve the top safe area with a CSS variable like --safe-top: max(env(safe-area-inset-top), 54px) and apply it as padding-top on fixed headers. The fallback value matters because env() resolves to 0 inside preview iframes without a real notch.

Why does env(safe-area-inset-top) return 0 in a preview iframe?▼

Preview iframes have no real device notch, so the browser reports zero safe-area insets. Always pair env() with a pixel fallback using max(), such as 54px for Dynamic Island iPhones or 28px for Android.

Does this approach support both iOS and Android design styles?▼

Yes, the Skill defines platform style cues for both. iOS uses system blue #007aff, -apple-system fonts, and grouped rounded cards, while Android uses Material elevation, FABs, Roboto, and a smaller 28px top inset.

Why is my bottom button cut off by the home indicator?▼

Bottom-fixed bars must add padding-bottom equal to --safe-bottom, typically max(env(safe-area-inset-bottom), 34px). Without this, CTAs and tab bars sit inside the gesture area on modern iPhones and Android devices.

Related Skills

Explore More Design & Creative Skills→
coalesce-labscoalesce-labs
20

napkin-sketch

Generate ASCII wireframes and browser-captured references for UI designs.

Official
Advanced
elihuvillarauselihuvillaraus
2

mobile-builder

Develop native iOS and Android apps with SwiftUI, Kotlin, React Native, or Flutter.

Community
Advanced
hadimiftahulfhadimiftahulf

ux-polish

Review user interfaces for design consistency, responsiveness, and accessibility.

Community
Intermediate
dabowmandabowman

figma-guidelines

Guide Figma design principles, component architecture, auto layout, and collaboration tools.

Community
Advanced