home / skills / anilcancakir / my-claude-code / mobile-app-design-mastery
This skill delivers production-grade mobile UI design guidance for Flutter and native apps, improving touch targets, typography, spacing, and platform-aware
npx playbooks add skill anilcancakir/my-claude-code --skill mobile-app-design-masteryReview the files below or copy the command above to add this skill to your agents.
---
name: mobile-app-design-mastery
description: "Production-grade mobile application UI design based on Refactoring UI principles. ALWAYS activate for: Flutter app, mobile app, iOS app, Android app, mobile UI, app screens, mobile navigation, bottom sheets, mobile forms, touch targets, mobile typography, app color scheme, mobile cards, list views, mobile modals, tab bars, app bars, floating action buttons. Provides mobile design workflow, touch-optimized spacing, mobile typography scale, platform-aware patterns. Turkish: mobil uygulama tasarımı, Flutter tasarım, uygulama arayüzü, mobil UI, telefon uygulaması, Android tasarım, iOS tasarım. English: app design, mobile interface, touch-friendly, native feel, mobile UX."
---
# Mobile App Design Mastery
Production-grade mobile UI design principles adapted from Refactoring UI for Flutter/native apps.
---
## Core Mobile Design Workflow
### 1. Start with a Screen, Not a Shell
- Design the core functionality of a single screen first
- Don't start with navigation, tab bars, or app chrome
- Work in greyscale first—add color after hierarchy is clear
- Design for the primary device size, then adapt
### 2. Establish Mobile Systems
**Spacing Scale (dp/logical pixels):**
| Token | Size | Use Case |
|-------|------|----------|
| xs | 4 | Micro gaps, icon padding |
| sm | 8 | Tight, within components |
| md | 12 | Related elements |
| base | 16 | Standard padding |
| lg | 24 | Between sections |
| xl | 32 | Major separation |
| 2xl | 48 | Screen margins on tablets |
**Touch Targets:**
| Platform | Minimum Size |
|----------|-------------|
| iOS | 44×44 pt |
| Android | 48×48 dp |
| Comfortable | 56×56 |
**Type Scale (sp/pt):**
| Size | Use Case |
|------|----------|
| 11-12 | Captions, labels |
| 14 | Body text, default |
| 16 | Emphasized body |
| 18-20 | Subheadings |
| 24 | Screen titles |
| 28-34 | Large titles (iOS style) |
**Shadow/Elevation Scale (dp):**
| Level | Elevation | Use Case |
|-------|-----------|----------|
| 0 | 0 | Flat surfaces |
| 1 | 1-2 | Cards, tiles |
| 2 | 4 | Raised buttons, app bar |
| 3 | 8 | Bottom sheets, dialogs |
| 4 | 16 | Navigation drawers |
| 5 | 24 | Modals |
### 3. Build Mobile Hierarchy
Mobile screens have limited space—hierarchy is even more critical.
- **Primary**: Key action/content (one per screen)
- **Secondary**: Supporting info (visible but not competing)
- **Tertiary**: Metadata, timestamps (smallest/lightest)
Key principles:
- Size matters more on mobile—but don't overdo it
- Use weight and color before increasing size
- Emphasize by de-emphasizing competing elements
- Icons need softer colors to balance with text
### 4. Design for Touch
- Generous touch targets (minimum 44pt/48dp)
- Adequate spacing between interactive elements
- Visual feedback on press (ripples, scale, opacity)
- Swipe actions for common operations
### 5. Apply Platform-Aware Depth
- **iOS**: Subtle shadows, blur/frosted glass, less elevation
- **Android**: Material elevation system, layered surfaces
- Use depth to indicate interactivity and focus
---
## Mobile Anti-Patterns
**NEVER do:**
- Touch targets smaller than 44×44
- Text smaller than 11sp (illegible)
- Grey text on colored backgrounds
- Ambiguous spacing between groups
- Full-width buttons edge-to-edge without padding
- Relying on color alone for meaning
- Ignoring safe areas (notch, home indicator)
---
## Reference Files
| Topic | File | When to Read |
|-------|------|--------------|
| Visual hierarchy, labels, emphasis | [mobile-hierarchy.md](references/mobile-hierarchy.md) | Balancing element importance |
| Spacing, touch targets, layout | [mobile-spacing.md](references/mobile-spacing.md) | Layout decisions |
| Typography, fonts, readability | [mobile-typography.md](references/mobile-typography.md) | Text styling |
| Color, themes, dark mode | [mobile-color.md](references/mobile-color.md) | Color system |
| Shadows, elevation, layers | [mobile-depth.md](references/mobile-depth.md) | Adding depth |
| Components, navigation, patterns | [mobile-patterns.md](references/mobile-patterns.md) | Platform-specific patterns |
This skill delivers production-grade mobile UI design guidance adapted from Refactoring UI for Flutter and native apps. It focuses on single-screen workflows, touch-optimized spacing, platform-aware patterns, and a practical type/spacing/elevation system. Use it to create usable, native-feeling iOS and Android screens that scale from phones to tablets.
The skill inspects the target screen and recommends a design-first workflow: gray-scale prototyping, establishing spacing and type scales, then applying color and depth. It enforces touch targets, spacing tokens, and elevation rules and offers platform-specific adjustments (iOS vs Android). It also flags anti-patterns like undersized taps, illegible type, and unsafe edge-to-edge controls.
Do the spacing and type scales differ by platform?
The token sizes are shared as a baseline, but apply platform nuances—iOS prefers slightly softer elevation and larger title scales; Android follows Material elevation and density rules.
What minimum touch target should I enforce?
Enforce at least 44×44 pt for iOS and 48×48 dp for Android; 56×56 is a comfortable option for prominent actions.
Should I design for one device size or multiple?
Design the primary device size first to perfect hierarchy, then adapt tokens and margins for other breakpoints (larger margins on tablets).