mobile-design

name	mobile-design
description	Distinctive, production-grade mobile interfaces for Flutter/RN. Platform-native patterns, adaptive layouts, fluid motion. iOS/Android conventions.

Mobile Design Skill

Distinctive, production-grade mobile interfaces. Native to platform while maintaining unique aesthetic.

Design Thinking

Before coding:

• Platform: iOS (Cupertino), Android (Material 3), or cross-platform?
• Tone: luxury, playful, utilitarian, editorial, organic, bold, soft...
• Constraints: low-end device perf, offline, accessibility
• Differentiation: signature interaction

CRITICAL: Respect platform conventions (nav patterns, gestures, system UI) while injecting personality through typography, color, motion, layout.

Guidelines

Platform

• iOS: bottom tab bar, large title nav, swipe-back, Cupertino widgets
• Android: Material 3, nav rail/drawer, FAB, top app bar
• Cross: adaptive widgets rendering platform-appropriate UI

Typography

• Readable at mobile sizes (16px+ body). Respect dynamic type (never hardcode sizes).
• TextTheme in Flutter. Characterful display + legible body.

Color & Theme

• ALWAYS support light + dark. ColorScheme/ThemeData. OLED + LCD contrast.
• Color purposefully: primary actions, status, brand.

Motion

• Meaningful (communicate state, not decorate). ≤300ms interactions, ≤500ms transitions.
• Hero for shared elements. Stagger list items. Respect reduceMotion — always static fallback.

Layout

• One-handed: critical actions in bottom 60% (thumb zone). Safe area insets.
• Responsive: compact (<600dp), medium (600-840dp), expanded (>840dp).
• Touch targets: min 48×48dp.

Performance

• const constructors. ListView.builder for lists. cached_network_image.
• Profile on real devices.

Flutter Patterns

// ✅ Adaptive platform widget
Widget buildButton(BuildContext context) {
  return Platform.isIOS
    ? CupertinoButton(child: text, onPressed: onTap)
    : ElevatedButton(child: text, onPressed: onTap);
}

// ✅ Responsive breakpoints
Widget build(BuildContext context) {
  final width = MediaQuery.of(context).size.width;
  if (width >= 840) return _expandedLayout();
  if (width >= 600) return _mediumLayout();
  return _compactLayout();
}

// ❌ Hardcoded sizes
Container(width: 375, height: 812) // iPhone X only!

Compliance

• Project Structure @.gemini/rules/project-structure.md (Flutter layout)
• Testing Strategy @.gemini/rules/testing-strategy.md (widget/integration tests)
• Security Principles @.gemini/rules/security-principles.md (secure storage)
• Accessibility — load accessibility-principles skill
• Architectural Patterns @.gemini/rules/architectural-pattern.md (Riverpod 3)

Mobile constraints: battery, network variability, one-handed use. Beautiful UI that drains battery or stutters = failure. Every pixel and interaction intentional.