agent coding skill risk: low

Expo SDK 55 SwiftUI Integration Guide

Instructs the model on using the @expo/ui/swift-ui package for iOS-native UI in Expo SDK 55, covering installation, component and modifier selection from SwiftUI, wrapping trees in…

SKILL 1 file

SKILL.md

Download

---
name: expo-ui-swift-ui
description: "expo-ui-swift-ui"
---
---
name: expo-ui-swift-ui
description: `@expo/ui/swift-ui` package lets you use SwiftUI Views and modifiers in your app.
---

> The instructions in this skill apply to SDK 55 only. For other SDK versions, refer to the Expo UI SwiftUI docs for that version for the most accurate information.

## When to Use
- You need to build iOS-native UI in Expo using `@expo/ui/swift-ui`.
- The task involves selecting SwiftUI views or modifiers, wrapping trees in `Host`, or embedding React Native components with `RNHostView`.
- You are targeting Expo SDK 55 behavior for SwiftUI integration and extension guidance.

## Installation

```bash
npx expo install @expo/ui
```

A native rebuild is required after installation (`npx expo run:ios`).

## Instructions

- Expo UI's API mirrors SwiftUI's API. Use SwiftUI knowledge to decide which components or modifiers to use.
- Components are imported from `@expo/ui/swift-ui`, modifiers from `@expo/ui/swift-ui/modifiers`.
- When about to use a component, fetch its docs to confirm the API - https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/{component-name}/index.md
- When unsure about a modifier's API, refer to the docs - https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/modifiers/index.md
- Every SwiftUI tree must be wrapped in `Host`.
- `RNHostView` is specifically for embedding RN components inside a SwiftUI tree. Example:

```jsx
import { Host, VStack, RNHostView } from "@expo-ui/swift-ui";
import { Pressable } from "react-native";

<Host matchContents>
  <VStack>
    <RNHostView matchContents>
      // Here, `Pressable` is an RN component so it is wrapped in `RNHostView`.
      <Pressable />
    </RNHostView>
  </VStack>
</Host>;
```

- If a required modifier or View is missing in Expo UI, it can be extended via a local Expo module. See: https://docs.expo.dev/guides/expo-ui-swift-ui/extending/index.md. Confirm with the user before extending.

## Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

REQUIRED CONTEXT

task involving iOS-native UI with @expo/ui/swift-ui in SDK 55

ROLES & RULES

Use SwiftUI knowledge to decide which components or modifiers to use.
Import components from @expo/ui/swift-ui and modifiers from @expo/ui/swift-ui/modifiers.
Fetch component docs before use.
Refer to modifier docs when unsure.
Wrap every SwiftUI tree in Host.
Use RNHostView only for embedding RN components inside SwiftUI.
Confirm with the user before extending via a local Expo module.
Use this skill only when the task clearly matches the described scope.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

EXPECTED OUTPUT

Format

markdown

Constraints

wrap every SwiftUI tree in Host
fetch component docs before use
confirm before extending via local module

SUCCESS CRITERIA

Apply instructions only to Expo SDK 55 SwiftUI tasks.
Wrap all SwiftUI trees in Host.
Fetch docs to confirm APIs before using components or modifiers.
Confirm with user before extending missing APIs.

FAILURE MODES

May apply instructions outside SDK 55 scope.
May skip fetching docs and use incorrect APIs.
May extend modules without user confirmation.

EXAMPLES

Includes one JSX example demonstrating RNHostView for embedding a React Native Pressable inside a SwiftUI VStack wrapped by Host.

CAVEATS

Ambiguities

Duplicate header block: 'name: expo-ui-swift-ui' and description appear twice at the top.

QUALITY

OVERALL: 0.62
CLARITY: 0.82
SPECIFICITY: 0.88
REUSABILITY: 0.25
COMPLETENESS: 0.78

IMPROVEMENT SUGGESTIONS

Remove the duplicated YAML header block at the top to eliminate redundancy.
Add a short note on how the skill should be invoked or selected by the host system.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.