react-native-mobile-design

# Mobile Design (React Native)

Create distinctive, production-grade mobile interfaces that prioritize design quality and avoid generic AI aesthetics. This skill adapts web design principles for native mobile experiences.

## Design Philosophy

### Before You Code

1. **Establish a Visual Direction**: Define the aesthetic before implementation
   - Minimal & Clean (Apple-inspired)
   - Bold & Expressive (Spotify, Duolingo)
   - Luxury & Refined (banking apps)
   - Playful & Colorful (social apps)
   - Brutalist & Raw (artistic apps)

2. **Avoid Generic Patterns**:
   - Don't default to boring grays and blues
   - Don't use predictable card-based layouts everywhere
   - Don't rely on stock icons without customization
   - Don't use system fonts when custom fonts would elevate the design

3. **Match Complexity to Vision**:
   - Expressive designs → elaborate animations, bold colors, creative layouts
   - Minimal designs → precise spacing, refined typography, subtle interactions

## Tech Stack

| Tool | Purpose |
|------|---------|
| NativeWind | Tailwind CSS for React Native |
| tailwind-variants | Type-safe component variants |
| react-native-reanimated | Performant animations |
| react-native-gesture-handler | Touch interactions |
| expo-image | Optimized images with blur hash |
| @gorhom/bottom-sheet | Beautiful bottom sheets |

## Color System

### Define a Bold Palette

```javascript
// components/ui/colors.js
module.exports = {
  // Primary - Make it memorable
  primary: {
    50: '#fff1f3',
    100: '#ffe0e5',
    200: '#ffc6cf',
    300: '#ff9dac',
    400: '#ff637b',
    500: '#ff3355',  // Your signature color
    600: '#ed1144',
    700: '#c70d38',
    800: '#a50f33',
    900: '#8a1232',
  },

  // Neutrals - Warm grays feel more human
  neutral: {
    50: '#fafaf9',
    100: '#f5f5f4',
    200: '#e7e5e4',
    300: '#d6d3d1',
    400: '#a8a29e',
    500: '#78716c',
    600: '#57534e',
    700: '#44403c',
    800: '#292524',
    900: '#1c1917',
    950: '#0c