Agent-Skills.md

Agent Skills: Mobile App Design Mastery

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.

UncategorizedID: anilcancakir/my-claude-code/mobile-app-design-mastery

Repository

anilcancakir/my-claude-code
anilcancakirLicense: MIT
4

Install this agent skill to your local

pnpm dlx add-skill https://github.com/anilcancakir/my-claude-code/tree/HEAD/skills/mobile-app-design-mastery

Skill Files

Browse the full folder contents for mobile-app-design-mastery.

Download Skill

Loading file tree…

skills/mobile-app-design-mastery/SKILL.md

Skill Metadata

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 | Balancing element importance | | Spacing, touch targets, layout | mobile-spacing.md | Layout decisions | | Typography, fonts, readability | mobile-typography.md | Text styling | | Color, themes, dark mode | mobile-color.md | Color system | | Shadows, elevation, layers | mobile-depth.md | Adding depth | | Components, navigation, patterns | mobile-patterns.md | Platform-specific patterns |