---
name: mobile-app-ui-designer
description: "Native-feel mobile UI: iOS HIG, Material 3, navigation patterns, touch targets, gesture flows. Designs mobile UI that respects platform conventions: iOS HIG and Material 3 patterns, accessible touch targets, and the gesture flows users expect."
license: MIT
---

# Mobile App UI Designer

Design mobile screens that feel native instead of like a website squeezed onto a phone. This skill applies the conventions of each platform — Apple's Human Interface Guidelines on iOS and Material 3 on Android — so your layouts use the right navigation model, touch target sizes, type scale, and gesture affordances. It's aimed at designers and mobile developers who are building (or reviewing) SwiftUI, Jetpack Compose, Flutter, or React Native UI and want it to pass platform smell tests.

## When to use it

- You have a feature spec and need screen layouts, not just a moodboard.
- A screen "looks fine" but feels off on device — wrong back behavior, tab bar where a nav drawer belongs, controls too small to tap.
- You're porting a design between iOS and Android and need to know what actually changes (and what shouldn't).
- Reviewing a PR or Figma file for HIG / Material compliance before handoff.

## What it does

The skill reasons over concrete platform rules rather than vague "best practices":

- **iOS**: tab bars vs. navigation stacks, large titles, swipe-back, SF Symbols usage, safe-area insets, the 44×44 pt minimum tap target, sheet detents and the grabber.
- **Android / Material 3**: bottom navigation bars, navigation rail for tablets/foldables, top app bars (small/medium/large), FAB placement, dynamic color/tonal elevation, 48×48 dp touch targets, and the predictive back gesture.
- **Cross-cutting**: thumb-zone reachability, gesture conflicts (horizontal swipe vs. carousels), form and keyboard handling, and accessibility (contrast ratios, Dynamic Type / font scaling, VoiceOver/TalkBack labels).

It outputs annotated layout descriptions, component choices mapped to real framework widgets, and a platform-divergence checklist you can hand to engineering or paste into Figma notes.

## Usage example

```bash
curl -fsSL --create-dirs -o ~/.claude/skills/mobile-app-ui-designer/SKILL.md https://claudeskil.com/skills/mobile-app-ui-designer/SKILL.md

# then, in a session:
"Design the onboarding flow for a habit-tracker app, iOS and Android.
3 screens: welcome, permissions, first-habit. Flag where the two
platforms should diverge and give touch-target sizes."
```

You'll get per-platform screen breakdowns (e.g. iOS large-title + bottom sheet for permissions, Android top app bar + Material dialog), with target sizes and gesture notes called out inline.

## Tips & gotchas

- **Don't ask for one design for both platforms.** Request both and let the skill flag divergences — a shared design usually means one platform loses.
- iOS back is a left-edge **swipe**; Android has a system back. Never put your own control where these gestures live, or you'll create conflicts.
- Material's 48dp and HIG's 44pt targets differ — the skill sizes per platform, so don't normalize them to one number.
- Specify whether you're on **SwiftUI / Compose / Flutter / RN** so component suggestions map to widgets you can actually use.

## FAQ

**Does it generate Figma files or code?** It produces structured layout and component specs (Figma-ready notes, widget mappings). It doesn't render pixels or emit compilable screens.

**Material 2 or 3?** Material 3 (Material You) by default; ask explicitly if you need M2.

**Can it audit an existing screen?** Yes — describe or paste the current layout and ask for an HIG/Material compliance review with specific fixes.