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.md § Project Structure (Flutter layout)
- Testing Strategy GEMINI.md § Testing Strategy (widget/integration tests)
- Security Principles GEMINI.md § Security Principles (secure storage)
- Accessibility — load
accessibility-principles skill
- Architectural Patterns GEMINI.md § Architectural Patterns (Riverpod 3)
Mobile constraints: battery, network variability, one-handed use. Beautiful UI that drains battery or stutters = failure. Every pixel and interaction intentional.
1---2name: mobile-design3description: Distinctive, production-grade mobile interfaces for Flutter/RN. Platform-native patterns, adaptive layouts, fluid motion. iOS/Android conventions.4---56# Mobile Design Skill78Distinctive, production-grade mobile interfaces. Native to platform while maintaining unique aesthetic.910## Design Thinking1112Before coding:13- **Platform:** iOS (Cupertino), Android (Material 3), or cross-platform?14- **Tone:** luxury, playful, utilitarian, editorial, organic, bold, soft...15- **Constraints:** low-end device perf, offline, accessibility16- **Differentiation:** signature interaction1718**CRITICAL:** Respect platform conventions (nav patterns, gestures, system UI) while injecting personality through typography, color, motion, layout.1920## Guidelines2122### Platform23- **iOS:** bottom tab bar, large title nav, swipe-back, Cupertino widgets24- **Android:** Material 3, nav rail/drawer, FAB, top app bar25- **Cross:** adaptive widgets rendering platform-appropriate UI2627### Typography28- Readable at mobile sizes (16px+ body). Respect dynamic type (never hardcode sizes).29- `TextTheme` in Flutter. Characterful display + legible body.3031### Color & Theme32- ALWAYS support light + dark. `ColorScheme`/`ThemeData`. OLED + LCD contrast.33- Color purposefully: primary actions, status, brand.3435### Motion36- Meaningful (communicate state, not decorate). ≤300ms interactions, ≤500ms transitions.37- `Hero` for shared elements. Stagger list items. Respect `reduceMotion` — always static fallback.3839### Layout40- One-handed: critical actions in bottom 60% (thumb zone). Safe area insets.41- Responsive: compact (<600dp), medium (600-840dp), expanded (>840dp).42- Touch targets: min 48×48dp.4344### Performance45- `const` constructors. `ListView.builder` for lists. `cached_network_image`.46- Profile on real devices.4748## Flutter Patterns4950```dart51// ✅ Adaptive platform widget52Widget buildButton(BuildContext context) {53 return Platform.isIOS54 ? CupertinoButton(child: text, onPressed: onTap)55 : ElevatedButton(child: text, onPressed: onTap);56}5758// ✅ Responsive breakpoints59Widget build(BuildContext context) {60 final width = MediaQuery.of(context).size.width;61 if (width >= 840) return _expandedLayout();62 if (width >= 600) return _mediumLayout();63 return _compactLayout();64}6566// ❌ Hardcoded sizes67Container(width: 375, height: 812) // iPhone X only!68```6970## Compliance71- Project Structure GEMINI.md § Project Structure (Flutter layout)72- Testing Strategy GEMINI.md § Testing Strategy (widget/integration tests)73- Security Principles GEMINI.md § Security Principles (secure storage)74- Accessibility — load `accessibility-principles` skill75- Architectural Patterns GEMINI.md § Architectural Patterns (Riverpod 3)7677Mobile constraints: battery, network variability, one-handed use. Beautiful UI that drains battery or stutters = failure. Every pixel and interaction intentional.
irahardianto