Deep integration with React Native ecosystem for cross-platform mobile development
Generates React Native mobile apps with CLI tools, component creation, and debugging for cross-platform development.
npx claudepluginhub a5c-ai/babysitterThis skill inherits all available tools. When active, it can use any tool Claude has access to.
README.mdThis skill provides deep integration with the React Native ecosystem for cross-platform mobile development. It enables execution of React Native CLI commands, component generation, build optimization, and comprehensive debugging capabilities.
bash - Execute React Native CLI, Expo CLI, and npm/yarn commandsread - Analyze React Native project files, configurations, and componentswrite - Generate and modify React Native components and configurationsedit - Update existing React Native code and configurationsglob - Search for React Native components and configuration filesgrep - Search for patterns in React Native codebaseReact Native CLI Operations
Expo CLI Operations
Component Generation
Redux Toolkit Integration
Zustand/Jotai/Recoil
Performance Optimization
Native Module Integration
This skill integrates with the following processes:
react-native-app-setup.js - Project initialization and configurationcross-platform-ui-library.js - Shared component developmentmobile-testing-strategy.js - Test implementation and coveragemobile-performance-optimization.js - Performance tuningnpx react-native)npx expo)project-root/
├── src/
│ ├── components/
│ ├── screens/
│ ├── navigation/
│ ├── store/
│ ├── hooks/
│ ├── services/
│ ├── utils/
│ └── types/
├── __tests__/
├── android/
├── ios/
├── metro.config.js
├── babel.config.js
├── tsconfig.json
└── package.json
// metro.config.js
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const config = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};
module.exports = mergeConfig(getDefaultConfig(__dirname), config);
# Create new React Native project
npx react-native init MyApp --template react-native-template-typescript
# Or with Expo
npx create-expo-app MyApp --template expo-template-blank-typescript
// src/components/Button/Button.tsx
import React from 'react';
import { TouchableOpacity, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native';
interface ButtonProps {
title: string;
onPress: () => void;
variant?: 'primary' | 'secondary';
disabled?: boolean;
}
export const Button: React.FC<ButtonProps> = ({
title,
onPress,
variant = 'primary',
disabled = false,
}) => {
return (
<TouchableOpacity
style={[styles.button, styles[variant], disabled && styles.disabled]}
onPress={onPress}
disabled={disabled}
activeOpacity={0.8}
>
<Text style={[styles.text, styles[`${variant}Text`]]}>{title}</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
button: {
paddingVertical: 12,
paddingHorizontal: 24,
borderRadius: 8,
alignItems: 'center',
},
primary: {
backgroundColor: '#007AFF',
},
secondary: {
backgroundColor: 'transparent',
borderWidth: 1,
borderColor: '#007AFF',
},
disabled: {
opacity: 0.5,
},
text: {
fontSize: 16,
fontWeight: '600',
},
primaryText: {
color: '#FFFFFF',
},
secondaryText: {
color: '#007AFF',
},
});
// src/navigation/RootNavigator.tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { HomeScreen } from '../screens/HomeScreen';
import { DetailsScreen } from '../screens/DetailsScreen';
export type RootStackParamList = {
Home: undefined;
Details: { id: string };
};
const Stack = createNativeStackNavigator<RootStackParamList>();
export const RootNavigator: React.FC = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
// src/store/store.ts
import { configureStore } from '@reduxjs/toolkit';
import { setupListeners } from '@reduxjs/toolkit/query';
import { api } from './api';
import userReducer from './slices/userSlice';
export const store = configureStore({
reducer: {
user: userReducer,
[api.reducerPath]: api.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(api.middleware),
});
setupListeners(store.dispatch);
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
Metro bundler cache issues
npx react-native start --reset-cache
iOS pod installation failures
cd ios && pod install --repo-update
Android Gradle sync issues
cd android && ./gradlew clean
Native module linking issues
npx react-native link
# Or for newer versions, use autolinking
flutter-dart - Alternative cross-platform frameworkmobile-testing - Comprehensive testing frameworksmobile-perf - Performance profiling and optimizationpush-notifications - Push notification implementationActivates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.