Description
react-native-design is an agent skill from the wshobson/agents collection for building cross-platform mobile apps with React Native. It covers the styling patterns for iOS and Android, including StyleSheet, dynamic styling, Flexbox layouts and platform-specific designs, along with navigation set up with React Navigation 6 or later, using stack and tab navigators with typed routes. It also covers animations with Reanimated 3, which run on the native thread so motion stays smooth, and gesture-driven interactions with Gesture Handler. The skill includes styling with StyleSheet and styled-components, responsive layouts for different screen sizes, and performance optimization for React Native apps. Its aim is native-quality user experience from a shared codebase. Detailed core concepts sit in a separate reference file, which the agent reads when the main guidance is not enough. The skill applies when building cross-platform mobile apps with React Native, implementing navigation, creating performant animations, styling components, building responsive layouts, implementing platform-specific designs, creating gesture-based interactions, and optimizing performance. Mobile design also depends on each platform's conventions, so the agent's choices should be tested on real iOS and Android devices or simulators before release. The skill is installed with the skills CLI from the wshobson/agents repository. Its skills.sh page showed about 15.2K installs and passing results from three security audits at the time of the scan.…
Highlights
- StyleSheet, Flexbox and dynamic styling
- React Navigation 6+ stack and tab navigators
- Reanimated 3 animations
- Gesture Handler interactions
- Platform-specific designs for iOS and Android
- Installs with the skills CLI
Ratings & Reviews
No ratings yet
Be the first to rate react-native-design.
People also visit
expo-brownfield
Integrate Expo and React Native into an existing native iOS or Android app
google-mobile-ads-banner
Provides instructions to implement, integrate, or configure Google Mobile Ads
google-mobile-ads-get-started
Provides instructions for integrating the Google Mobile Ads (GMA) SDK
react-native-design FAQ
Which platforms does it target?
iOS and Android, from a React Native codebase, with platform-specific designs where needed.
Which navigation library does it use?
React Navigation 6 or later, with stack and tab navigators and typed routes.
Does it cover animations?
Yes. It covers animations with Reanimated 3 and gesture-driven interactions with Gesture Handler.
Is there more detail?
Yes. The core concepts are in a reference file that the agent reads when needed.
How do I install it?
Run npx skills add https://github.com/wshobson/agents --skill react-native-design.
What security audits does it have?
skills.sh lists three audits: Gen Agent Trust Hub Pass, Socket Pass and Snyk Pass.
What are the best react-native-design alternatives?
Popular alternatives to react-native-design include expo-brownfield, react-native-patterns and animate-expo. See all react-native-design alternatives