React Native

What it does

When your agent uses it

• Tasks that involve Cross-platform mobile apps
• Tasks that involve State management
• Tasks that involve App store release

Example prompts

• “/react-native”

Requirements

• Node.js
• Compatibility (from SKILL.md): opencode
• Pre-approved tools (allowed-tools): bash, edit, glob, grep, read, write, websearch, webfetch

Workflow steps

10 steps, taken from the first numbered list in SKILL.md.

1. 1Scaffold — npx create-expo-app@latest MyApp --template blank-typescript, configure SDK 53+
2. 2Navigation — Choose between Expo Router (greenfield Expo) or React Navigation v7 (bare RN / brownfield). Set up layouts, typed routes…
3. 3State management — Zustand for local client state, TanStack Query for server state. Avoid Redux unless dealing with massive synchronous…
4. 4New Architecture — Ensure Fabric + TurboModules enabled (default in SDK 53+). Verify third-party lib compatibility
5. 5Lists — Replace all FlatLists with FlashList from Shopify. Configure estimatedItemSize. Optimize renderItem with React.memo
6. 6Animations — Reanimated 4 for gesture-driven animations. Use useSharedValue + useAnimatedStyle instead of Animated API
7. 7Images — expo-image with cached, resized variants. Never bare without dimensions
8. 8Notifications — expo-notifications for push. Handle foreground, background, tap-to-navigate
9. 9Performance — Enable Hermes, lazy-load tab screens, freeze inactive screens via react-native-screens…
10. 10Ship — eas build --platform all --profile production, eas submit, configure CI/CD with GitHub Actions

What it can do on your machine

Read from SKILL.md and the folder at commit 4c68e5b. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves these tools, so the agent can use them without asking each time:

  • bash
  • edit
  • glob
  • grep
  • read
  • write
  • websearch
  • webfetch

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Shell commands in SKILL.md call:

  • eas
  • npx

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

• Compatibility

  opencode

  From compatibility in the SKILL.md frontmatter.

Context cost

React Native loads about 3k tokens when it runs. Until then it costs about 61 tokens; SKILL.md has 801 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~61

When it runs · the whole SKILL.md, loaded when a task matches

~3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from EliasOulkadi/shokunin at commit 4c68e5b, republished under its MIT licence (© EliasOulkadi). 801 words, ~3,020 tokens.

name

react-native

description

Build production React Native apps with Expo SDK 53+, Expo Router (file-based navigation), New Architecture (Fabric + TurboModules), FlashList, Reanimated 4, Zustand for state, Hermes, EAS Build, and App Store/Play Store deployment.

allowed-tools

bash, edit, glob, grep, read, write, websearch, webfetch

compatibility

opencode

triggers

create a React Native app, set up navigation, optimize list performance, handle deep links, configure push notifications, deploy to stores, Expo Router…

negatives

Flutter, web-only React, PWA, mobile web, Ionic, Cordova, Capacitor, Xamarin

license

MIT

metadata.workflow

mobile

metadata.audience

developers

metadata.version

3.0.0

app/
├ _layout.tsx       # Root layout (tabs, stack)
├ index.tsx         # /
├ (tabs)/
│   ├ _layout.tsx   # Tab config
│   ├ feed.tsx      # /feed
│   └ profile.tsx   # /profile
├ product/
│   ├ [id].tsx      # /product/:id
│   └ review.tsx    # /product/:id/review
└ auth/
    ├ login.tsx     # /auth/login
    └ signup.tsx    # /auth/signup

// app/product/[id].tsx
import { useLocalSearchParams } from 'expo-router'

export default function ProductScreen() {
  const { id } = useLocalSearchParams<{ id: string }>()
  // id is typed as string
}

type RootStackParamList = {
  Home: undefined
  ProductDetail: { id: string }
  Cart: undefined
}

const Stack = createNativeStackNavigator<RootStackParamList>()

export function RootNavigator() {
  return (
    <NavigationContainer
      linking={{
        prefixes: ['myapp://', 'https://myapp.com'],
        config: {
          screens: {
            Home: '',
            ProductDetail: 'product/:id',
            Cart: 'cart',
          },
        },
      }}>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="ProductDetail" component={ProductDetailScreen} />
        <Stack.Screen name="Cart" component={CartScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'
import AsyncStorage from '@react-native-async-storage/async-storage'

interface CartStore {
  items: CartItem[]
  total: number
  addItem: (item: Product) => void
  removeItem: (id: string) => void
  clear: () => void
}

export const useCartStore = create<CartStore>()(
  persist(
    (set, get) => ({
      items: [],
      total: 0,
      addItem: (product) => set((state) => ({
        items: [...state.items, { ...product, quantity: 1 }],
        total: state.total + product.price,
      })),
      removeItem: (id) => set((state) => ({
        items: state.items.filter((i) => i.id !== id),
        total: state.items.filter((i) => i.id !== id).reduce((s, i) => s + i.price, 0),
      })),
      clear: () => set({ items: [], total: 0 }),
    }),
    { name: 'cart-storage', storage: createJSONStorage(() => AsyncStorage) }
  )
)

import { FlashList } from '@shopify/flash-list'

<FlashList
  data={items}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
  estimatedItemSize={120}
/>

// app.json
{
  "expo": {
    "platforms": ["ios", "android"]
  }
}

import { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated'

export function AnimatedCard() {
  const scale = useSharedValue(1)

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }))

  return (
    <Animated.View
      style={animatedStyle}
      onTouchStart={() => { scale.value = withSpring(0.95) }}
      onTouchEnd={() => { scale.value = withSpring(1) }}
    />
  )
}

{
  "expo": {
    "scheme": "myapp",
    "plugins": [["expo-linking"]]
  }
}

import * as Notifications from 'expo-notifications'

const { status } = await Notifications.requestPermissionsAsync()
if (status !== 'granted') return

const token = await Notifications.getExpoPushTokenAsync()

Notifications.addNotificationResponseReceivedListener((response) => {
  const { screen, params } = response.notification.request.content.data
  router.push({ pathname: screen as any, params: params as any })
})

eas build --platform all --profile production
eas submit --platform ios
eas submit --platform android

© EliasOulkadi, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .pack/skills/react-native of EliasOulkadi/shokunin.

Open the folder on GitHubat commit 4c68e5b