Summary
Introduce a new skill: react-native:components, similar to react:components, focused on generating, understanding, and optimizing React Native UI components.
While react:components is useful for web-based React, there is currently no dedicated skill tailored for React Native, which has different primitives, styling systems, and platform constraints.
This makes it harder to:
- Generate native-friendly components
- Follow React Native best practices
- Handle platform-specific behavior (iOS vs Android)
Proposed Solution
Add a new skill:
react-native:components
This skill should:
- Generate reusable React Native components using:
- View, Text, Image, ScrollView, etc.
- Support styling via:
- StyleSheet
- Tailwind (if configured, e.g. NativeWind)
- Encourage best practices:
- Functional components + hooks
- Separation of logic & UI
- Performance optimizations (memo, FlatList usage, etc.)
- Handle platform-specific code:
- Platform.select
- Safe area handling
- Keyboard avoiding view handling
- Optionally integrate:
- Gesture handlers
- Animations (react-native-reanimated)
Summary
Introduce a new skill: react-native:components, similar to react:components, focused on generating, understanding, and optimizing React Native UI components.
While
react:componentsis useful for web-based React, there is currently no dedicated skill tailored for React Native, which has different primitives, styling systems, and platform constraints.This makes it harder to:
Proposed Solution
Add a new skill:
react-native:componentsThis skill should: