Agent Skills
Discover and share powerful Agent Skills for AI assistants
react-native-design - Agent Skill - Agent Skills
/ Skills / react-native-design Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.
Use the skills CLI to install this skill with one command. Auto-detects all installed AI assistants.
Method 1 - skills CLI
npx skills i wshobson/agents/plugins/ui-design/skills/react-native-designMethod 2 - openskills (supports sync & update)
npx openskills install wshobson/agentsAuto-detects Claude Code, Cursor, Codex CLI, Gemini CLI, and more. One install, works everywhere.
Installation Path
Download and extract to one of the following locations:
Claude Code Cursor OpenCode Gemini CLI Codex CLI
~/.claude/skills/react-native-design/ Back No setup needed. Let our cloud agents run this skill for you.
Select Model
Claude Haiku 4.5 $0.10 Claude Sonnet 4.5 $0.20 Claude Opus 4.5 $0.50 Claude Sonnet 4.5 $0.20 /task
Best for coding tasks
Environment setup included
Master React Native styling patterns, React Navigation, and Reanimated 3 to build performant, cross-platform mobile applications with native-quality user experiences.
Building cross-platform mobile apps with React Native
Implementing navigation with React Navigation 6+
Creating performant animations with Reanimated 3
Styling components with StyleSheet and styled-components
Building responsive layouts for different screen sizes
Implementing platform-specific designs (iOS/Android)
Creating gesture-driven interactions with Gesture Handler
Optimizing React Native performance
Originally a 6471-byte section in this SKILL.md. Moved to references/details.md to fit Codex's 8 KB skill body cap.
import React from 'react' ; import { View, Text, StyleSheet, Pressable, Image, } from 'react-native' ; import Animated, { useSharedValue, useAnimatedStyle, withSpring, } from 'react-native-reanimated' ;
interface ItemCardProps { title : string ; subtitle : string ;
Use TypeScript : Define navigation and prop types for type safetyMemoize Components : Use React.memo and useCallback to prevent unnecessary rerendersRun Animations on UI Thread : Use Reanimated worklets for 60fps animationsAvoid Inline Styles : Use StyleSheet.create for performanceHandle Safe Areas : Use SafeAreaView or useSafeAreaInsetsTest on Real Devices : Simulator/emulator performance differs from real devicesUse FlatList for Lists : Never use ScrollView with map for long listsPlatform-Specific Code : Use Platform.select for iOS/Android differences
Gesture Conflicts : Wrap gestures with GestureDetector and use simultaneousHandlersNavigation Type Errors : Define ParamList types for all navigatorsAnimation Jank : Move animations to UI thread with runOnUI workletsMemory Leaks : Cancel animations and cleanup in useEffectFont Loading : Use expo-font or react-native-asset for custom fontsSafe Area Issues : Test on notched devices (iPhone, Android with cutouts) imageUrl
:
string
;
onPress : () => void ;
}
const AnimatedPressable = Animated. createAnimatedComponent (Pressable);
export function ItemCard ({ title , subtitle , imageUrl , onPress } : ItemCardProps ) {
const scale = useSharedValue ( 1 );
const animatedStyle = useAnimatedStyle (() => ({
transform: [{ scale: scale.value }],
}));
return (
< AnimatedPressable
style = {[styles.card, animatedStyle]}
onPress={onPress}
onPressIn={() => { scale.value = withSpring(0.97); }}
onPressOut={() => { scale.value = withSpring(1); }}
>
<Image source={{ uri: imageUrl }} style = {styles.image} />
< View style = {styles.content} >
< Text style = {styles.title} numberOfLines = { 1 } >
{ title }
</ Text >
< Text style = {styles.subtitle} numberOfLines = { 2 } >
{ subtitle }
</ Text >
</ View >
</ AnimatedPressable >
);
}
const styles = StyleSheet. create ({
card: {
backgroundColor: '#ffffff' ,
borderRadius: 16 ,
overflow: 'hidden' ,
shadowColor: '#000' ,
shadowOffset: { width: 0 , height: 2 },
shadowOpacity: 0.1 ,
shadowRadius: 8 ,
elevation: 4 ,
},
image: {
width: '100%' ,
height: 160 ,
backgroundColor: '#f3f4f6' ,
},
content: {
padding: 16 ,
gap: 4 ,
},
title: {
fontSize: 18 ,
fontWeight: '600' ,
color: '#1f2937' ,
},
subtitle: {
fontSize: 14 ,
color: '#6b7280' ,
lineHeight: 20 ,
},
});
Claude Sonnet 4.5