Expo native UI skill: what it does and how to install it

Source: expo/skills · Maintainer: Expo · License: MIT · Checked: 24 October 2026

What is the expo-native-ui skill?

The expo-native-ui skill is Expo's official Agent Skill for building screens that look and behave like native iOS and Android apps. It gives your coding agent rules for platform styling, semantic colors, native controls, SF Symbols, safe areas and the libraries to prefer. Install it with npx skills add https://github.com/expo/skills --skill expo-native-ui.

Its description opens: "Build beautiful, native-feeling Expo screens. Covers Apple HIG styling, semantic colors, native controls, SF Symbols, media, visual effects, gradients, storage, and responsive layout." It sits in the Framework (open source) group of expo/skills, next to the expo-dev-client skill.

As of 24 October 2026, its skills.sh page listed 31.2K installs (snapshot, 24 October 2026). That count started in July 2026, when Expo renamed its skills; the older name, building-native-ui, still shows 58.1K installs on skills.sh but is no longer in the repo.

What does it do?

The skill is model-invoked, so the agent loads it when you ask for screens, styling or UI polish in an Expo app. The SKILL.md (version 1.1.1) starts by drawing lines:

• Routes, links, stacks, tabs, modals, sheets and headers go to the expo-router skill.
• Any motion, gestures or keyboard-driven UI goes to expo-animation.
• "Before picking any UI component, check expo-ui first." The @expo/ui package renders real SwiftUI and Jetpack Compose controls and, per the skill, works in Expo Go on SDK 56 and later.

Then it covers six areas.

Running the app. "Always try Expo Go first before creating custom builds." Custom builds are only for local Expo modules, Apple targets such as widgets and app clips, third-party native modules not in Expo Go, and native config that app.json can't express.

Library preferences. A list of swaps the agent should make by default:

Responsiveness. Use contentInsetAdjustmentBehavior="automatic" on ScrollView, FlatList and SectionList instead of SafeAreaView, flexbox instead of the Dimensions API, and useWindowDimensions over Dimensions.get().

Behavior. Haptics on iOS, selectable text for data, four states for every data screen (loading, error, empty, content), keyboard-safe forms, and a firm rule that "Every enabled control must perform its advertised action." Before calling a screen done, the agent should walk the main task, try a failure, long titles, missing images and large system text, and report what it could not run.

Styling. Follow Apple's Human Interface Guidelines on iOS and Material Design 3 on Android, and "Never dress one platform in the other's uniform." Prefer flex gap, inline styles, borderCurve: 'continuous', stack titles instead of custom header text, and CSS boxShadow instead of legacy shadow and elevation styles. "CSS and Tailwind are not supported."

Colors. A theme/colors.ts pattern built on the Color API from expo-router, with Color.ios.* and Color.android.dynamic.* values and a hex fallback for web, so light and dark mode adapt on the device.

The references/ folder adds seven files the agent opens as needed: controls.md, gradients.md, icons.md, media.md (camera, audio, video, file saving), storage.md (SQLite, AsyncStorage, SecureStore), visual-effects.md (blur and liquid glass) and webgpu-three.md (3D with WebGPU and Three.js). There is also an agents/openai.yaml for Codex.

How do you install it?

Expo's README recommends the plugin for Claude Code and Codex, and the skills CLI for other agents. Expo's skills docs cover the same routes.

Claude Code plugin (all Expo skills plus the Expo MCP server).

claude plugin install expo@claude-plugins-official

You can also run /plugin install expo@claude-plugins-official inside Claude Code. The plugin comes from Anthropic's official plugin marketplace and updates through it; see Claude Code plugins.

Codex plugin.

codex plugin add expo@openai-curated

Just this skill, with the skills CLI. The command on skills.sh:

npx skills add https://github.com/expo/skills --skill expo-native-ui

Since the skill hands navigation and motion to expo-router, expo-animation and expo-ui, you will likely want those too. The README's command for every Expo skill is npx skills@latest add expo/skills --skill '*', and to update one skill the README says to pass its name to npx skills@latest update.

Skills land in .claude/skills/expo-native-ui/ in your project, or ~/.claude/skills/expo-native-ui/ with -g, the standard Claude Code skill locations. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.

How do you use it?

Describe the screen and its job. The skill does most of its work as defaults, so you don't need to name libraries.

Example prompts (suggestions, not quotes from the repo):

• Build a settings screen for this Expo app that feels native on both iOS and Android.
• Replace the hard-coded hex colors in this app with semantic colors that follow dark mode.
• Add an SF Symbol to each row on iOS, with matching Material icons on Android.
• Add a photo picker and video playback to the profile screen. Tell me if it needs a custom build.
• Review this screen for safe area, keyboard and large-text problems.

The README's own example, "Build a native-feeling Expo Router screen with tabs, modals, and animations", touches three skills at once: this one, expo-router and expo-animation.

Tips and limits

From the SKILL.md and skills.sh, not from testing:

• Recent SDK assumptions. Several rules name SDK 56 or later, such as @expo/ui in Expo Go and expo-router/react-navigation. On an older SDK, tell the agent your version.
• Opinionated code style. It asks for kebab-case file names, inline styles and tsconfig path aliases. Say so if your project uses another convention.
• Not for long lists. The skill notes that @expo/ui's List is not virtualized; feeds and search results should use FlatList or FlashList.
• Feedback command. The skill tells the agent it can send feedback to Expo with npx --yes @expo/agent-cli@latest feedback, but only when it has something specific to report. It also asks for a brief --category evals report if an agent repeatedly fails at an Expo task or the user has to step in. Watch for it if you don't want anything sent.
• Audits. On 24 October 2026, skills.sh showed Pass from Gen Agent Trust Hub and Socket and Warn from Snyk, all audited 22 October 2026. Snyk rated it medium risk (W012, unverifiable external dependency) for running a feedback package with npx --yes ... @latest. The audit names a submit-expo-feedback package; the current SKILL.md uses @expo/agent-cli instead, after a 22 October 2026 change.
• License. MIT, stated in the SKILL.md frontmatter and in the LICENSE files at the repo root and in plugins/expo. Copy and change it, keeping the copyright notice.

Save it in your Kipt library

In Kipt, open Skills and paste the skill's GitHub folder link into the import box; Kipt reads the SKILL.md, the seven references/ files and agents/openai.yaml. Paste the repo link instead and Kipt shows a list of Expo skills to pick from, so you can add expo-router and expo-animation in the same pass. Your library stays in a private GitHub repo you own and installs into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with Expo.

Similar skills

• Expo skill (expo-dev-client): Expo's most installed skill, for the custom builds this skill tells you to avoid until you need them.
• React Native skill: Vercel's React Native and Expo rules for lists, animation, navigation and native UI.
• React best practices skill: Vercel's React performance rules for the shared logic in an Expo app.
• Firebase basics skill: Firebase's setup skill, including fetching google-services.json and GoogleService-Info.plist for mobile apps.