mobile-development
Mobile development patterns for React Native and Flutter including navigation, state management, and responsive design
Profile →npx skills add rohitg00/awesome-claude-code-toolkit --skill mobile-development --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Mobile Development ## React Native Component Structure ```tsx import { View, Text, FlatList, StyleSheet, Platform } from "react-native"; import { SafeAreaView } from "react-native-safe-area-context"; interface Product { id: string; name: string; price: number; image: string; } function ProductList({ products }: { products: Product[] }) { return ( <SafeAreaView style={styles.container}> <FlatList data={products} keyExtractor={(item) => item.id} renderItem={({ item }) => <ProductCard product={item} />} contentContainerStyle={styles.list} ItemSeparatorComponent={() => <View style={styles.separator} />} ListEmptyComponent={<EmptyState message="No products found" />} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} /> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", }, list: { padding: 16, }, separator: { height: 12, }, }); ``` Use `FlatList` for scrollable lists (never `ScrollView` with `.map()`). Set `windowSize` and `maxToRenderPerBatch` for large lists. ## React Native Navigation ```tsx import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/na
- React Native Component Structure
- React Native Navigation
- Flutter Widget Pattern
- Responsive Layout
- Platform-Specific Code
- Anti-Patterns
- Checklist
What does the mobile-development skill do?
Mobile development patterns for React Native and Flutter including navigation, state management, and responsive design
How do I install it?
Run `npx skills add rohitg00/awesome-claude-code-toolkit --skill mobile-development --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From rohitg00/awesome-claude-code-toolkit, a repository with 2,438 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.