mobile-development
"Use — Mobile development patterns for React Native and Flutter including navigation, state management, and responsive"
소스 정보
- 저장소
- thiagofernandes1987-create/APEX
- 최근 소스 활동
- 2026년 4월 18일 09:35
- 감지된 SKILL.md 언어
- 영어
- 스타
- 2
- 포크
- 0
설치 방법
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
소스 파일 검토
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
SKILL.md 표시 중
SKILL.md
소스 지침 · 읽기 전용 미리보기- name
- mobile-development
- description
- "Use — Mobile development patterns for React Native and Flutter including navigation, state management, and responsive"
# 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/native-stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
type RootStackParams = {
Tabs: undefined;
ProductDetail: { productId: string };
Cart: undefined;
};
const Stack = createNativeStackNavigator<RootStackParams>();
const Tab = createBottomTabNavigator();
function TabNavigator() {
return (
<Tab.Navigator screenOptions={{ headerShown: false }}>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Search" component={SearchScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
);
}
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Tabs" component={TabNavigator} options={{ headerShown: false }} />
<Stack.Screen name="ProductDetail" component={ProductDetailScreen} />
<Stack.Screen name="Cart" component={CartScreen} options={{ presentation: "modal" }} />
</Stack.Navigator>
</NavigationContainer>
);
}
```
## Flutter Widget Pattern
```dart
class ProductCard extends StatelessWidget {
final Product product;
final VoidCallback onTap;
const ProductCard({
super.key,
required this.product,
required this.onTap,
});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Card(
elevation: 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ClipRRect(
borderRadius: const BorderRadius.vertical(top: Radius.circular(8)),
child: Image.network(
product.imageUrl,
height: 200,
width: double.infinity,
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => const Icon(Icons.broken_image, size: 64),
),
),
Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(product.name, style: Theme.of(context).textTheme.titleMedium),
const SizedBox(height: 4),
Text("\$${product.price.toStringAsFixed(2)}",
style: Theme.of(context).textTheme.bodyLarge),
],
),
),
],
),
),
);
}
}
```
## Responsive Layout
```tsx
import { useWindowDimensions } from "react-native";
function useResponsive() {
const { width } = useWindowDimensions();
return {
isPhone: width < 768,
isTablet: width >= 768 && width < 1024,
isDesktop: width >= 1024,
columns: width < 768 ? 1 : width < 1024 ? 2 : 3,
};
}
function ProductGrid({ products }: { products: Product[] }) {
const { columns } = useResponsive();
return (
<FlatList
data={products}
numColumns={columns}
key={columns}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View style={{ flex: 1, maxWidth: `${100 / columns}%`, padding: 8 }}>
<ProductCard product={item} />
</View>
)}
/>
);
}
```
## 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: 4,
},
android: {
elevation: 4,
},
default: {},
}),
});
```
## Anti-Patterns
- Using `ScrollView` with `.map()` for dynamic lists (use `FlatList` or `SectionList`)
- Storing all state in a global store instead of colocating with components
- Not handling safe areas (notch, status bar, home indicator)
- Inline styles on every render (define with `StyleSheet.create`)
- Blocking the JS thread with heavy computation (use `InteractionManager`)
- Ignoring platform-specific UX conventions (iOS back swipe, Android back button)
## Checklist
- [ ] `FlatList` used for all scrollable lists with `keyExtractor`
- [ ] Navigation typed with TypeScript route params
- [ ] Safe area insets handled with `SafeAreaView`
- [ ] Styles defined with `StyleSheet.create` (not inline objects)
- [ ] Responsive layouts adapt to phone, tablet, and desktop
- [ ] Platform-specific styles handled with `Platform.select`
- [ ] Images cached and loaded with error/loading states
- [ ] Heavy computation offloaded from the JS thread
## Diff History
- **v00.33.0**: Ingested from awesome-claude-code-toolkit
---
## Why This Skill Exists
Use — Mobile development patterns for React Native and Flutter including navigation, state management, and responsive
<!-- SR_40: auto-generated from frontmatter `purpose`/`description` (OPP-Phase3). Expand with domain-specific rationale. -->
## When to Use
Use this skill when the task requires mobile development capabilities.
<!-- SR_40: auto-generated from frontmatter `when`/`description` (OPP-Phase3). -->
## What If Fails
- condition: Código não disponível para análise
<!-- SR_40: auto-generated from frontmatter `what_if_fails` (OPP-Phase3). -->
GitHub에서 보기