mobile-design

name	mobile-design
description	Generate distinctive, production-grade mobile interfaces for Flutter and React Native with platform-native patterns, adaptive layouts, and fluid motion. Use when building mobile app screens, widgets, or when the user requests visually striking mobile UI with proper iOS/Android conventions.

Mobile Design Skill

This skill guides creation of distinctive, production-grade mobile interfaces that feel native to the platform while maintaining a unique aesthetic identity. Implement real working code with exceptional attention to platform conventions and creative design choices.

The user provides mobile UI requirements: a screen, widget, feature, or complete app interface. They may include context about the platform (iOS/Android), audience, or technical constraints.

Design Thinking

Before coding, understand the context and commit to a platform-aware aesthetic direction:

• Platform: iOS (Cupertino), Android (Material 3), or cross-platform? Each has distinct expectations.
• Tone: Pick a direction — refined luxury, playful/energetic, utilitarian/efficient, editorial/content-first, organic/warm, bold/geometric, soft/pastel, etc.
• Constraints: Performance on low-end devices, offline capability, accessibility.
• Differentiation: What makes this app memorable? What's the signature interaction?

CRITICAL: Mobile users have muscle memory. Respect platform conventions (navigation patterns, gesture zones, system UI) while injecting personality through typography, color, motion, and layout composition.

Mobile Design Guidelines

Platform Conventions

• iOS: Bottom tab bar, large title navigation, swipe-to-go-back, Cupertino widgets
• Android: Material 3, navigation rail/drawer, FAB, top app bar
• Cross-platform: Use adaptive widgets that render platform-appropriate UI

Typography

• Choose distinctive but highly readable fonts at mobile sizes (16px+ body)
• Respect dynamic type / font scaling — never hardcode font sizes
• Use TextTheme in Flutter, keep a consistent type scale
• Pair a characterful display font with a supremely legible body font

Color & Theme

• Support both light and dark themes — always
• Use ColorScheme / ThemeData for consistency
• Ensure contrast ratios work on OLED (pure black) and LCD displays
• Use color purposefully — primary actions, status indicators, brand identity

Motion & Animation

• Use meaningful motion — animations should communicate state changes, not decorate
• Keep animations under 300ms for interactions, up to 500ms for transitions
• Use Hero animations for shared element transitions
• Stagger list item animations for visual polish
• Respect reduceMotion / accessibility settings — always provide a static fallback

Layout & Spacing

• Design for one-handed use — critical actions in thumb-reach zone (bottom 60% of screen)
• Use safe area insets — never overlap system UI (notch, home indicator, status bar)
• Design for varying screen sizes — phones, tablets, foldables
• Use responsive breakpoints: compact (<600dp), medium (600-840dp), expanded (>840dp)
• Generous touch targets: minimum 48x48dp

Performance

• Avoid rebuilding expensive widget trees — use const constructors
• Lazy-load lists with ListView.builder (never ListView for large lists)
• Optimize images — use cached_network_image, proper resolution variants
• Profile on real devices, not just emulators

Flutter-Specific Patterns

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

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

// ❌ Bad: Hardcoded sizes that break on different devices
Container(width: 375, height: 812) // iPhone X only!

Rule Compliance

Before implementing, verify against:

• Project Structure @.claude/rules/project-structure.md (Flutter/Mobile layout, feature organization)
• Testing Strategy @.claude/rules/testing-strategy.md (widget tests, integration tests)
• Security Principles @.claude/rules/security-principles.md (secure storage, API key handling)
• Accessibility Principles — load the accessibility-principles skill (screen reader, dynamic type, contrast)
• Architectural Patterns @.claude/rules/architectural-pattern.md (Riverpod 3 Notifier, repository pattern)

IMPORTANT: Mobile has unique constraints — battery life, network variability, and user context (one-handed, on-the-go). Every design choice should respect these realities. Beautiful UI that drains battery or stutters on scroll is a failure.

Remember: The best mobile apps feel like they were designed specifically for the device in your hand. Make every pixel and every interaction intentional.