What is the building-native-ui skill?
Building-native-ui is a skill from the expo/skills repository for designing and building native-feeling Expo apps. It steers an AI coding agent toward Expo Go friendly libraries, native styling props, scroll and safe-area handling, and loading, error, empty and content states. In the repo today, the folder is named expo-native-ui.
It is a skill in the official expo/skills repository that guides an AI coding agent when it builds user interfaces for Expo apps. The commit history shows it was first named building-native-ui, then reorganized under an expo- prefix. The folder you will find in the repo today is expo-native-ui, at version 1.1.1.
The skill points the agent at Expo Go first, so a screen can be tried without a custom native build, and only moves to a development build when a feature needs it.
What changes in your agent's output
- Screens use ScrollView with contentInsetAdjustmentBehavior set to automatic, and useWindowDimensions for size, so content respects safe areas.
- Library choices follow the skill's preferences, such as expo-audio, expo-video, expo-symbols, expo-image and expo-glass-effect, in place of older packages.
- Styling uses boxShadow and borderCurve continuous, and no CSS or Tailwind, because the target is native views.
- iOS follows Apple Human Interface Guidelines and Android follows Material 3.
- Each screen is written with four states: loading, error, empty and content.
What it hands off
The skill stays narrow on purpose. Routing goes to the expo-router skill, motion goes to expo-animation, and native components go to expo-ui. Reference files cover controls, gradients, icons, media, storage, visual effects and WebGPU with Three.js.
Who the skill is for
Best for
- Teams building iOS and Android apps with Expo who want screens that feel native.
- Developers new to React Native who need an agent that avoids web habits such as CSS.
- Projects that want a consistent four-state pattern on every screen.
Not for
- Web-only React projects. See design-taste-frontend or improve-ui for those.
- Pure SwiftUI work. The SwiftUI expert skill covers that, and apple-design covers the visual language.
- Flutter apps. Use flutter-build-responsive-layout instead.
For broader mobile design direction, see design-mobile-apps.
How to install Building Native UI Skill for Expo Apps
claude plugin install expo@claude-plugins-officialUse the official plugin route
The Expo README documents
claude plugin install expo@claude-plugins-officialfor Claude Code, or/plugin install expo@claude-plugins-officialfrom inside a session. For Codex it listscodex plugin add expo@openai-curated.Or copy the folder by hand
Run
git clone https://github.com/expo/skills.git, then copy plugins/expo/skills/expo-native-ui into your AI coding agent's skills folder.Open an Expo project
Start the agent in the root of your Expo app so it can see package.json and app.json.
Ask for a screen
Try: build a settings screen with a list, a toggle and an empty state.
Check that it loaded
Ask the agent to build a screen and check that it uses ScrollView with automatic content inset adjustment and handles the loading, error, empty and content states.
Key features
- Expo Go firstThe skill tells the agent to try a screen in Expo Go before reaching for a custom native build.
- Preferred librariesIt names expo-audio, expo-video, expo-symbols, expo-image, expo-glass-effect and Color from expo-router as the defaults to reach for.
- Scroll and safe areasScrollView uses contentInsetAdjustmentBehavior automatic, and useWindowDimensions drives sizing.
- Native styling propsboxShadow and borderCurve continuous replace web-style shadows and rounding. CSS and Tailwind are ruled out.
- Platform conventionsApple Human Interface Guidelines on iOS and Material 3 on Android guide spacing, controls and behavior.
- Four-state screensEvery screen is expected to handle loading, error, empty and content.
- Reference filesSeparate references cover controls, gradients, icons, media, storage, visual effects and webgpu-three, loaded as needed.
- Clear hand-offsRouting, animation and native component work are deferred to the expo-router, expo-animation and expo-ui skills.
Frequently asked questions
What is the building-native-ui skill?
It is a skill in the expo/skills repository that helps an AI coding agent build native-feeling Expo and React Native interfaces. It covers library choices, styling rules, scrolling and safe areas, and the states each screen should handle.
Why is the folder called expo-native-ui?
The repo history shows the skills were reorganized under expo- and eas- prefixes, and building-native-ui was split so routing moved to its own skill. The listing name you may have seen is the older one, and the current folder is expo-native-ui.
How do I install it?
Use the Expo plugin command from the README for your AI coding agent, or clone expo/skills and copy plugins/expo/skills/expo-native-ui into your agent's skills folder. Both routes give you the same skill content, so pick whichever fits your setup.
Does it work with Expo Go?
Yes, that is its starting point. The skill tells the agent to try Expo Go first and only move to a development build when a feature needs custom native code.
Can I use Tailwind or CSS with it?
The skill says no. It steers the AI coding agent to native style props such as boxShadow and borderCurve instead of CSS or Tailwind, because the output targets native views rather than a browser, and web-style utility classes do not apply there.
Does it handle navigation and animation?
Not by itself. It hands routing to the expo-router skill, motion to expo-animation and native components to expo-ui, so install those alongside it if your screens need navigation, animated transitions or platform-native components.
Is there a Flutter or SwiftUI equivalent?
Yes. See flutter-build-responsive-layout for Flutter layouts and swiftui-expert-skill for SwiftUI. Each one covers the conventions of its own framework, so an AI coding agent working in Flutter or SwiftUI does not reuse React Native advice by mistake.