React Native Skills for Claude Code, Codex & AI Agents

These skills help an agent design and implement cross-platform mobile screens. The page currently combines a mobile design entry with Vercel React Native guidance.

7 skills

Explore React Native skills

3 skills

Build beautiful, native-feeling Expo screens. Covers Apple HIG styling, semantic colors, native controls, SF Symbols, media, visual effects, gradients, storage, and responsive layout. For routing and navigation, use the expo-router skill; for motion and animation, use the expo-animation skill.

  • expo
  • react native
4.2KStars269Forks
Repository last pushed

Build and maintain a design system inside an Expo app - a reusable theme of design tokens (color, spacing, typography, radius, shadow, motion), reusable component structure with variant/size/state prop conventions, and rules for when to extract a repeated view into a shared component. Use when creating or organizing theme files and design tokens (theme.ts / theme/), extending an existing theme or styling library (NativeWind, Tamagui, Restyle, Unistyles) in its own idiom, standardizing styles so screens (including AI-generated ones) look consistent and polished, fixing an app that looks AI-generated or generic instead of native (the named native-slop tells), building an in-app component library, or auditing an app for design-system drift (hardcoded colors, spacing, fonts). For platform styling specifics (semantic colors, HIG rules, native controls) use expo-native-ui; for folder layout of a new app use expo-project-structure.

  • expo
  • design systems
4.2KStars269Forks
Repository last pushed

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use `animate`.

  • react native
  • expo
  • animation
57KStars3.3KForks
Repository last pushed

Related topics

How to choose React Native skills

Start with the React Native guidance for project structure and use the design entry when the task is a screen or flow rather than platform code.

  • Create a React Native screen
  • Choose a mobile navigation structure
  • Prepare a React Native project handoff