# Mobile Design

> Generates distinctive, production-grade mobile interfaces for Flutter and React Native. Prioritizes platform-native patterns, adaptive layouts, and fluid motion. Use when building mobile apps, screens, widgets, or when the user requests to style or create visually striking mobile UI.

- Skill: `irahardianto/mobile-design-2` (Agent Skill)
- Install (CLI): `npx skillmds@latest add irahardianto/mobile-design-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/irahardianto/mobile-design-2/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: irahardianto (https://skillmd.com/u/irahardianto)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/irahardianto/mobile-design-2

---


# 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

```dart
// ✅ 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 @project-structure.md (Flutter/Mobile layout, feature organization)
- Testing Strategy @testing-strategy.md (widget tests, integration tests)
- Security Principles @security-principles.md (secure storage, API key handling)
- Accessibility Principles @accessibility-principles.md (screen reader, dynamic type, contrast)
- Architectural Patterns @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.