What is react-native-mobile-design?

This Claude skill enables the rapid creation of production-grade, high-performance React Native mobile applications for both iOS and Android. It streamlines the development process by generating clean, maintainable TypeScript code following modern best practices, including design-to-code conversion, robust state management, and advanced performance optimization to ensure a premium user experience.

When should I use react-native-mobile-design?

react-native-mobile-design is useful in the following scenarios: • Transforming Figma designs or UI mockups into functional, responsive React Native components using NativeWind and TypeScript. • Architecting scalable mobile applications with pre-configured stacks including Expo, React Navigation, and Zustand for state management. • Optimizing mobile app performance by implementing high-fps animations with Reanimated and efficient list rendering with FlashList. • Building cross-platform interfaces that automatically adapt to platform-specific design conventions and safe area requirements for iOS and Android.

react-native-mobile-design – AI Agent Skills

name	react-native-mobile-design
description	Create distinctive, production-grade React Native mobile applications with modern best practices. Use this skill when the user asks to build React Native components, screens, or complete mobile apps for iOS and Android. Handles UI creation from scratch, design-to-code conversion (Figma/mockups), state management (Zustand, Redux Toolkit), navigation (React Navigation), styling (NativeWind, StyleSheet), and performance optimization. Generates beautiful, performant cross-platform code.

This skill guides creation of distinctive, production-grade React Native mobile applications. Implement real working TypeScript/React Native code with attention to aesthetics, performance, and platform conventions.

Design Thinking

Before coding, understand context and commit to a design direction:

Purpose: What problem does this app solve? Who uses it?
Platform: iOS, Android, or both? Consider platform-specific patterns.
Tone: Vibrant & playful, calm & professional, bold & expressive, minimal & clean.
Design System: React Native Paper (M3), NativeBase, Tamagui, or custom.

Recommended Stack

Category	Recommended	Alternative
Runtime	Expo	Bare React Native
Language	TypeScript	-
State	Zustand	Redux Toolkit, Jotai
Server State	TanStack Query	SWR
Navigation	React Navigation 6+	Expo Router
Styling	NativeWind	StyleSheet, Tamagui
UI Library	React Native Paper	NativeBase
Animations	Reanimated 3	Animated API
Lists	FlashList	FlatList

Quick Patterns

NativeWind Styling

<View className="flex-1 bg-white p-4">
  <Text className="text-xl font-bold text-gray-900">Title</Text>
  <Pressable className="bg-blue-500 py-3 px-6 rounded-xl active:opacity-80">
    <Text className="text-white font-semibold text-center">Button</Text>
  </Pressable>
</View>

Zustand Store

import { create } from 'zustand';

interface AuthStore {
  user: User | null;
  login: (user: User) => void;
  logout: () => void;
}

export const useAuthStore = create<AuthStore>((set) => ({
  user: null,
  login: (user) => set({ user }),
  logout: () => set({ user: null }),
}));

const Stack = createNativeStackNavigator<RootStackParamList>();

function RootNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
}

Optimized List

import { FlashList } from '@shopify/flash-list';

<FlashList
  data={items}
  renderItem={({ item }) => <ItemCard item={item} />}
  estimatedItemSize={100}
  keyExtractor={(item) => item.id}
/>

Project Structure

src/
├── app/                    # Expo Router or entry
├── components/
│   ├── ui/                 # Button, Input, Card
│   └── features/           # ProductCard, CartItem
├── hooks/                  # Custom hooks
├── stores/                 # Zustand stores
├── services/               # API calls
├── utils/                  # Helpers
└── types/                  # TypeScript types

Platform-Specific Code

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  shadow: Platform.select({
    ios: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 8,
    },
    android: {
      elevation: 4,
    },
  }),
});

Quality Checklist

TypeScript strict mode
Dark mode support (useColorScheme)
Safe area handling
Accessibility labels
Loading & error states
Keyboard avoiding for forms
60fps animations

Advanced Topics

For detailed implementation guides:

Performance & Optimization: See references/optimization.md for startup time, memory, bundle size, rendering optimization
Component Patterns & Architecture: See references/patterns.md for reusable patterns, animations, advanced navigation

Code Style

// Prefer: TypeScript, memo, proper typing
import { memo, useCallback } from 'react';

interface Props {
  item: Product;
  onPress?: (id: string) => void;
}

export const ProductCard = memo(function ProductCard({ item, onPress }: Props) {
  const handlePress = useCallback(() => onPress?.(item.id), [item.id, onPress]);

  return (
    <Pressable onPress={handlePress} className="bg-white rounded-2xl p-4">
      <Text className="text-lg font-semibold">{item.name}</Text>
    </Pressable>
  );
});

Restricted

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.

Generate distinctive, crafted React Native code. Avoid generic boilerplate.

react-native-mobile-design

When & Why to Use This Skill

Use Cases