# Anilcancakir My Claude Code Mobile App Design Mastery

> Mobile App Design Mastery

- Skill: `tomevault-io/anilcancakir-my-claude-code-mobile-app-design-mastery` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/anilcancakir-my-claude-code-mobile-app-design-mastery`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/anilcancakir-my-claude-code-mobile-app-design-mastery/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/anilcancakir-my-claude-code-mobile-app-design-mastery

---


# 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 |

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/anilcancakir) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->