Skill353 repo starsupdated 3mo ago

mobile

This Claude Code skill provides React Native and Flutter development patterns, covering project structure organization, navigation setup with React Navigation, styling approaches using both StyleSheet and styled-components, performance optimization techniques for FlatList rendering, component memoization strategies, and platform-specific code handling for iOS and Android. Use this skill when building cross-platform mobile applications or seeking guidance on React Native architectural best practices and performance optimization methods.

View source Repository: gemini-kit

Install in Claude Code

Copy

git clone --depth 1 https://github.com/nth5693/gemini-kit /tmp/mobile && cp -r /tmp/mobile/skills/mobile ~/.claude/skills/mobile

Then start a new Claude Code session; the skill loads automatically.

Definition

SKILL.md

# Mobile Development Skill

## Overview
React Native, Flutter, and mobile development best practices.

## React Native Patterns

### 1. Project Structure
```
src/
├── components/       # Reusable UI components
│   ├── Button.tsx
│   └── Card.tsx
├── screens/          # Screen components
│   ├── Home.tsx
│   └── Profile.tsx
├── navigation/       # Navigation config
│   └── AppNavigator.tsx
├── hooks/            # Custom hooks
├── services/         # API calls
├── stores/           # State management
└── utils/            # Utilities
```

### 2. Navigation
```tsx
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
```

### 3. Styling
```tsx
import { StyleSheet, View, Text } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 12,
  },
});

// Or use styled-components
import styled from 'styled-components/native';

const Container = styled.View`
  flex: 1;
  padding: 16px;
`;
```

## Performance Optimization

### FlatList Best Practices
```tsx
<FlatList
  data={items}
  renderItem={({ item }) => <ItemCard item={item} />}
  keyExtractor={(item) => item.id}
  
  // Performance props
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  windowSize={5}
  initialNumToRender={10}
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
/>
```

### Memoization
```tsx
// Memoize expensive components
const MemoizedItem = React.memo(({ item }) => (
  <View>
    <Text>{item.title}</Text>
  </View>
));

// useCallback for event handlers
const handlePress = useCallback(() => {
  navigation.navigate('Details', { id: item.id });
}, [item.id]);
```

## 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.25,
    },
    android: {
      elevation: 5,
    },
  }),
});

// Or use file extensions
// Button.ios.tsx
// Button.android.tsx
```

## Testing
```typescript
import { render, fireEvent } from '@testing-library/react-native';

test('button press', () => {
  const onPress = jest.fn();
  const { getByText } = render(<Button onPress={onPress} title="Click" />);
  
  fireEvent.press(getByText('Click'));
  expect(onPress).toHaveBeenCalled();
});
```