Agent skill

react-native-mobile-design

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.

View SKILL.md on GitHub Repository
Stars 1
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/saaip7/ipdev-mobileApps-skill/tree/main/skills/react-native-mobile-design

SKILL.md

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

tsx
<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

tsx
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 }),
}));

Navigation Setup

tsx
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

tsx
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

tsx
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

tsx
// 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.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

saaip7/ipdev-mobileApps-skill

flutter-mobile-design

Create distinctive, production-grade Flutter mobile applications with Material Design 3. Use this skill when the user asks to build Flutter widgets, screens, pages, or complete mobile apps. Handles UI creation from scratch, design-to-code conversion (Figma/mockups), architecture patterns (Riverpod, BLoC), and Flutter best practices. Generates beautiful, performant Flutter code that avoids generic aesthetics.

1 0
Explore
mattpocock/skills

edit-article

Edit and improve articles by restructuring sections, improving clarity, and tightening prose. Use when user wants to edit, revise, or improve an article draft.

111,310 9,758
Explore
mattpocock/skills

handoff

Compact the current conversation into a handoff document for another agent to pick up.

111,310 9,758
Explore
mattpocock/skills

obsidian-vault

Search, create, and manage notes in the Obsidian vault with wikilinks and index notes. Use when user wants to find, create, or organize notes in Obsidian.

111,310 9,758
Explore
mattpocock/skills

scaffold-exercises

Create exercise directory structures with sections, problems, solutions, and explainers that pass linting. Use when user wants to scaffold exercises, create exercise stubs, or set up a new course section.

111,310 9,758
Explore
mattpocock/skills

git-guardrails-claude-code

Set up Claude Code hooks to block dangerous git commands (push, reset --hard, clean, branch -D, etc.) before they execute. Use when user wants to prevent destructive git operations, add git safety hooks, or block git push/reset in Claude Code.

111,310 9,758
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results